Multi Dot Bar

With the Multi Dot Bar, several values can be presented and described on a MinMax axis.

The Multi Dot Bar needs the information about the minimum (short min) and maximum (short max) values of the axis, as well as the displayed intermediate steps (short steps) in between. In addition, at least one dot with a value must be set. Simple example:

There are two basic ways to set the values of the Multi Dot Bar, by data attribute or by global JavaScript configurations variable. The same settings can be made in both cases. If the variant with the JS variable is used, the data attribute are ignored.

The following settings must/can be made:

• generally
  • id [optional] [string] is used if you want to use the settings via the global JS variable
• axis
  • min [required] [number] defines the minimum value of the axis label
  • max [required] [number] defines the maximum value of the axis label
  • step [required] [number] defines the displayed intermediate steps of the axis label
• dot
  • value [required] [number] defines the value of the dot, [min <= value <= max] applies, if no further information is given for a dot, this value is displayed in the tooltip
  • link [optional] [string] if this value is set, the dot becomes a link with a corresponding href
  • color [optional] [string] a specific color value (CSS background) can be set for the dot
  • tooltip [optional] contains infos fot the tooltip
    • enable [optional] [boolean] by setting the value to false you can disable the tooltip for that dot, by default the value is true
    • headline [optional] [string] there is a simple template with a headline and text for the tooltip, this property sets the headline
    • text [optional] [string] there is a simple template with a headline and text for the tooltip, this property sets the text
    • html [optional] [string] as an alternative to the headline/text template, you can use this property to freely define the content of the tooltip

Basic HTML (NEEDS Properties!)

Here you can see the basic HTML, that will adapted depending on the two variants (data attribute vs. JS variable), see below.

It is highly recommended that the five pre defined labels with the .shimming is set in the HTML. That will show a loading animation until the JS creates the correct labels. If it is clear in advance that fewer labels will be displayed, the number of labels/shimmings can be adjusted.

<div class="multi-dot-bar">
  <div class="multi-dot-bar__axis"></div>
  <div class="multi-dot-bar__label-list">
    <div class="multi-dot-bar__label"><p class="shimming">000</p></div>
    <div class="multi-dot-bar__label"><p class="shimming">000</p></div>
    <div class="multi-dot-bar__label"><p class="shimming">000</p></div>
    <div class="multi-dot-bar__label"><p class="shimming">000</p></div>
    <div class="multi-dot-bar__label"><p class="shimming">000</p></div>
  </div>
</div>

Properties set by data attributes

With this variant, the properties of the Multi Dot Bar can be set per data attribute. A basic example looks like this:

<div
  class="multi-dot-bar"
  data-sg-multi-dot-bar-min="0"
  data-sg-multi-dot-bar-max="1"
  data-sg-multi-dot-bar-step="0.5"
>
  <div class="multi-dot-bar__axis">
    <span class="multi-dot-bar__dot" data-sg-multi-dot-bar-dot-value="0.2"></span>
    <span class="multi-dot-bar__dot" data-sg-multi-dot-bar-dot-value="0.8"></span>
  </div>
  <div class="multi-dot-bar__label-list">
    <div class="multi-dot-bar__label"><p class="shimming">000</p></div>
    <div class="multi-dot-bar__label"><p class="shimming">000</p></div>
    <div class="multi-dot-bar__label"><p class="shimming">000</p></div>
    <div class="multi-dot-bar__label"><p class="shimming">000</p></div>
    <div class="multi-dot-bar__label"><p class="shimming">000</p></div>
  </div>
</div>

The list of possible data attributes are:

• set in .multi-dot-bar
  • [data-sg-multi-dot-bar-min] see min
  • [data-sg-multi-dot-bar-max] see max
  • [data-sg-multi-dot-bar-step] see step
• set in .multi-dot-bar__dot
  • [data-sg-multi-dot-bar-dot-value] see value
  • [data-sg-multi-dot-bar-dot-link] see link
  • [data-sg-multi-dot-bar-dot-color] see color
  • [data-sg-multi-dot-bar-dot-tooltip-enable] see tooltip.enable
  • [data-sg-multi-dot-bar-dot-tooltip-text] see tooltip.text
  • [data-sg-multi-dot-bar-dot-tooltip-headline] see tooltip.headline
  • [data-sg-multi-dot-bar-dot-tooltip-html] see tooltip.html

In the following examples the properties are set via data attribute.

Properties set by global JavaScript variable

With this variant, the properties of the Multi Dot Bar can be set per global JavaScript variable window.sgMultiDotBarConfigs. A basic example looks like this:

<script>
  window.sgMultiDotBarConfigs = window.sgMultiDotBarConfigs || [];
  window.sgMultiDotBarConfigs.push({
    id: 'my-example',
    min: 0,
    max: 1,
    step: 0.5,
    dots: [{ value: 0.2 }, { value: 0.8 }]
  });
</script>
<div
  class="multi-dot-bar"
  data-sg-multi-dot-bar-id="my-example"
>
  <div class="multi-dot-bar__axis">
  </div>
  <div class="multi-dot-bar__label-list">
    <div class="multi-dot-bar__label"><p class="shimming">000</p></div>
    <div class="multi-dot-bar__label"><p class="shimming">000</p></div>
    <div class="multi-dot-bar__label"><p class="shimming">000</p></div>
    <div class="multi-dot-bar__label"><p class="shimming">000</p></div>
    <div class="multi-dot-bar__label"><p class="shimming">000</p></div>
  </div>
</div>

The variable window.sgMultiDotBarConfigs is an array of Multi Dot Bar Configurations. So you can add multiple Bars on your page. The list of possible properties per bar are:

• id see id
• min see min
• max see max
• step see step
• dots
  • value see dots.value
  • link see dots.link
  • color see dots.color
  • tooltip see dots.tooltip
    • enable see dots.tooltip.enable
    • text see dots.tooltip.text
    • headline see dots.tooltip.headline
    • html see dots.tooltip.html

In the following examples the properties are set via global JavaScript variable.