How to import charts - Bloodmallet/bloodmallet_web_frontend GitHub Wiki

Welcome! I'm excited to greet you here.

Requirements

  • Highcharts license on your end (if your website is a commercial one)
  • include Highcharts script before this script (see Minimal example)
  • add the css class bloodmallet_chart to a <div> of your choice (see Scheme for more information)

Please support the project using one of the following methods:

Minimal example

Creates a Casting Patchwerk trinkets chart with data for elemental shamans.

<div 
  id="unique-id-1"
  class="bloodmallet_chart"
  data-wow-class="shaman" 
  data-wow-spec="elemental"
>Loading...</div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://bloodmallet.com/js/bloodmallet_chart_import.min.js"></script>

Minimal Example image

Maximal example

Creates an identical chart to the minimal example above.

<div 
  id="unique-id-2" 
  class="bloodmallet_chart" 
  data-wow-class="shaman" 
  data-wow-spec="elemental" 
  data-type="trinkets"
  data-fight-style="castingpatchwerk"
  data-talent-target-scaling-min-target-count="1"
  data-talent-target-scaling-max-target-count="15"
  data-chart-engine="highcharts"
  data-tooltip-engine="wowhead"
  data-entries="7"
  data-value-style="absolute"
  data-background-color="#343a40" 
  data-font-color="#f8f9fa" 
  data-axis-color="#828282"
  data-language="en"
  data-filter-itemlevels=""
  data-filter-sources=""
  data-filter-active-passive=""
>Loading...</div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://bloodmallet.com/js/bloodmallet_chart_import.min.js"></script>

Scheme

Required: class="bloodmallet_chart"

The importer looks for this class and if it can't be found, no chart is added.

Required: data-wow-class="[wow_class]"

Valid input is any World of Warcraft Class name written in lower case and with underscores instead of spaces.

Examples for [wow_class]:

  • death_knight
  • hunter
  • priest

Required: data-wow-spec="[wow_spec]"

Valid input is any World of Warcraft Spec name written in lower case and with underscores instead of spaces. (Pay attention to the correct wow_class and wow_spec combination.)

Examples for [wow_spec]:

  • blood
  • beast_mastery
  • shadow

Optional: data-type="[data_type]"

Determines what data is loaded and therefore shown in the chart.

Valid input for [data_type]:

  • phials
  • potions
  • races
  • secondary_distributions
  • talent_target_scaling
  • trinkets - default

Optional: data-fight-style="[fight_style]"

SimulationCraft fight style used for the data generation and therefore for the chart.

Valid input for [fight_style]:

  • castingpatchwerk - default
  • castingpatchwerk3 (3 permanent targets)
  • castingpatchwerk5 (5 permanent targets)

Optional: data-chart-engine="[chart_engine]"

Chart lib you want to use to render the chart.

Valid input for [chart_engine]:

  • highcharts - default (latest release version)
  • highcharts_old (~4.1)

Optional: data-tooltip-engine="[tooltip_engine]"

Determines how the links of items and spells are generated.

Valid input for [tooltip_engine]:

  • wowhead - default
  • wowdb
  • none (plain text)

Optional: data-entries="[number]"

Determines the number of entries in the chart.

Default: 7

Optional: data-background-color="[color]"

Background color of the chart and its elements

Default: #343a40

Examples for [color]:

  • brown
  • #eee
  • #a3a3a3

Optional: data-font-color="[color]"

Font color of most of the elements

Default: #f8f9fa

Examples for [color]:

  • brown
  • #eee
  • #a3a3a3

Optional: data-axis-color="[color]"

Axis color and axis description color

Default: #828282

Examples for [color]:

  • brown
  • #eee
  • #a3a3a3

Optional: data-language="[language]"

Set the language of the data names/links. The Title and Legend of the chart are currently not translated.

Valid input for [language]:

  • cn - Chinese
  • de - German
  • en - English default
  • es - Spanish
  • fr - French
  • it - Italian
  • ko - Korean
  • pt - Portuguese
  • ru - Russian

Optional: data-value-style="[style]"

Determines how most of the charts present values.

Valid input for [style]:

  • absolute - default
  • relative

Filters

Trinkets

Trinkets can be filtered with the following additions. Please note, that whatever you add to the filter will be REMOVED from the chart. An empty filter will let the chart show everything.

You can list multiple elements per filter by separating them with ;.

data-filter-itemlevels="[itemlevels]"

Allows you to remove selected itemlevels from the chart.

Examples for [itemlevels]:

  • 200
  • 203;204

data-filter-active-passive="[active-passive]"

Allows you to remove all trinkets of that type.

Valid input for [active-passive]:

  • active
  • passive

data-filter-sources="[sources]"

Allows to remove trinkets of the selected source.

Valid input for [sources]:

  • Calling
  • Dungeon
  • Profession
  • PvP
  • Raid
  • World Drop

Talent Target Scaling

Talent target scaling can be filtered with the following additions.

data-talent-target-scaling-min-target-count="[target_count]"

Removes data lower than target_count. Must be an int.

Valid input for [target_count]:

  • 1 (default) to 15

data-talent-target-scaling-max-target-count="[target_count]"

Removes data greater than target_count. Must be an int.

Valid input for [target_count]:

  • 1 to 15 (default)

Getting data from bloodmallet.com

Data is avilable via the importer described on this page.

Please reach out if you miss some chart types. We should work together to enable them.

⚠️ **GitHub.com Fallback** ⚠️