Examples

Chart Tutorials  

Examples

A more advaced walkthrough with real-world examples.

🔗Examples

🔗A simple button

Figure 1.

A button is the simplest kind of uiItem. It only requires a click event handler. The item's name automatically populates the label text when not specified:

chart.options({
  toolbar_items: {
    "Change Data": {
      events: {
        click: function(v) {
          chart.series(0).options(getData());
        }
      }
    }
  }
});

🔗A checkbox item

Figure 2.

First lets look at the fundamental way to define a checkbox item:

chart.options({
  toolbar_items: {
    Checkbox: {
      type: "option",
      label_text: "Checkbox",
      icon: "system/default/checkbox_blank",
      states_select_icon: "system/default/checkbox",
      events_change: function(val) {
        alert(val);
      }
    }
  }
});

As you can see, the checkbox icon name must be specified as well as the icon name used when the item value is true. This can be simplified using a simple type shortcut:

chart.options({
  toolbar_items: {
    Checkbox: {
      type: "checkbox",
      events_change: function(val) {
        alert(val);
      }
    }
  }
});
Notice how the first checkbox code snippet requires label text, but the second does not. This is because the item name will be used as the label when no icon or label text is defined.

🔗Classic dropdown

Figure 3.

This simple dropdown sample was used in the overview, but it was not wired up to any to any events. The snippet below shows a fully functional dropdown.

chart.options({
  toolbar: {
    items: {
      "simple dropdown": {
        type: "select",
        value: "optionB", //Sets the initial value
        items: {
          optionA: {},
          optionB: {},
          optionC: {
            events_change: function(val) {
              //This function runs only when optionC is selected or deselected and the argument passed is a Boolean representing the items select state.
              alert("optionC has changed to: " + val);
            }
          }
        },
        //This event is fired when the value of the dropdown changes.
        events_change: function(val) {
          //The val argument is a string name of the selected item.
          alert("The selection has changed to: " + val);
        }
      }
    }
  }
});

🔗Dropdown with multiple item selection

Figure 4.
chart.options({
  toolbar: {
    items: {
      "simple dropdown": {
        type: "selectMultiple",
        value: "optionA,optionB", //Sets the initial value
        items: {
          optionA: {},
          optionB: {},
          optionC: {}
        },
        events_change: function(val) {
          //The val argument is a comma delimited list of the selected items.
          alert("Selected options are: " + val);
        }
      }
    }
  }
});

🔗A non-interactive indicator

Figure 5.

This uiItem would normally behave as a button where the value is only true when the button is depressed, however, when the type is set to 'option' explicitly, it means the item will toggle the value on click. By returning false in the click event, the item state will not toggle and hence is not an interactive item.

chart.options({
  toolbar: {
    items: {
      DataCurrent: {
        type: "option",
        value: true, //Sets the initial value
        icon: "system/default/checkbox_blank",
        label_text: "Up to date",
        states_select_icon: "system/default/checkbox",
        events_click: function() {
          //By returning false, the default click action of an option type (toggling state) is disabled
          return false;
        }
      }
    }
  }
});

//Set data out of date
chart.uiItems("DataCurrent").value(false);