JavaScript Bubble Chart

An interesting chart of the Shield UI HTML5 JavaScript charting library is the Bubble Chart. It is similar in some ways to the Scatter Chart, but as it name shows- the data series points may have variable sizes. There is an image below, showing a typical view of the Bubble Chart type:

 

Similar to the Scatter chart we need to provide X and Y values for each point, but in addition we must also specify its size. Following piece of code shows a possible way to supply data series values:

data: [
  {
    x: 31.45,
    y: 26.4,
    size: 22
  },
]

Similar to the Scatter chart we may take use of axisMarkers and dataPointText properties, however they may not be quite suitable for that type of chart. We may custom format the tooltips available for each of the data series points. The following piece of code shows a way to do so:

    tooltipSettings: {
      customHeaderText: 'Current Point:',
      customPointText: function (point, chart) {
        return shield.format(
          'Formatted text: {point.x} Formatted Text:{point.y}',
          {
            point: point,
            color: point.y > 87 ? 'red' : 'green'
          }
        );
      }
    },

Using conditional formatting, we display the tooltips in two colors: red or green, depending on the current point Y value. On the image below we can see the result:

We can base our formatting also on the point.x, point.y and point.size values. For instance we may prompt user that a point of the chart has a size exceeding certain limit. Zooming for the Shield UI Bubble Chart can be enabled the usual way:

zoomMode: "xy",

Data binding to local or remote data is as easy as all of the chart of the Shield UI Charting library. The following code shows declaring a variable and populating its array with values:

  var LocalData  = [
    { x: 91, y: 144.9, size: 1},
    { x: 33, y: 14.9, size: 71},
    { x: 81, y: 42.9, size: 41},
    { x: 41, y: 34.9, size: 13},
    { x: 67, y: 78.2, size: 113}
];

An editable live example for the Shield UI Bubble Chart can be found here: Live Example
More information and code samples for the Bubble chart type can be found here: Documentation and examples