How to import charts or data

BloodmalletEU edited this page Sep 13, 2018 · 12 revisions

Welcome! And let me tell you right away, that I'm excited to greet you here. I love this feature and welcome any feedback about it.

Requirements

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

A link back to bloodmallet.com is not required but highly appreciated. You can also check out these options to support this project:

Minimal example

Creates a 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-chart-engine="highcharts"
  data-tooltip-engine="wowhead"
  data-type="trinkets"
  data-azerite-tier="all"
  data-fight-style="patchwerk"
  data-entries="7"
  data-background-color="#343a40" 
  data-font-color="#f8f9fa" 
  data-axis-color="#828282"
  data-language="en"
>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: id="[some-unique-id]"

Whatever you like, but it must be unique within the page and a single string without spaces.

Required: class="bloodmallet_chart"

You NEED to add bloodmallet_chart as the class of your element, or else no chart will be added into it.

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-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 spell are generated.

Valid input for [tooltip_engine]:

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

Optional: data-type="[data_type]"

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

Valid input for [data_type]:

  • trinkets - default
  • azerite_items_chest
  • azerite_items_head
  • azerite_items_shoulders
  • azerite_traits_itemlevel - different itemlevels, same number of traits (one)
  • azerite_traits_stacking - same itemlevels (raid mythic itemlevel), different number of traits
  • races

Optional: data-azerite-tier="[tier]"

Determines which azerite tiers will be shown for azerite_traits_itemlevel and azerite_traits_stacking.

Valid input for [tier]:

  • all - default hows all traits in one chart
  • 3 - tier 3 (outer ring) traits only (to ensure backwards compatibility "1" will be preserved and handled like "3")
  • 2 - tier 2 (next to outer ring) traits only

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

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

Valid input for [fight_style]:

  • patchwerk - default
  • hecticaddcleave

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

Getting data from bloodmallet.com

All data is public. You can always get it for free from bloodmallet.com/json/[data_type]/[file_name].json or fork this repository. If you have special ideas or suggestions, contact me.

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.