JavaScript Range Bar Chart

The range bar offered by Shield UI as part of their HTML5 JavaScript charting library offers users the ability to visualize ranges of data over time. For instance using the Range Bar Chart we may show daily temperature low-high ranges. On the image below we can see a typical look of this chart type:

One of the differences we can see between the Shield UI Bar Chart and Range Bar Chart is that the bars here are not lined up at their bottom ends. This reflects the main concept this chart visualizes data. Bars are lined up at their pairs of values on the Y axis. This means, that if one bar represents the values 2 and 3 for instance, it will be placed according to the Y axis starting from the value 2 and stretching up in height until the value 3. Although this concept is quite clear, users can be assisted in reading the chart’s graph by using data point labels. We can enable them just the usual way using code like the sample below:

        dataPointText: {
         enabled: true,
         borderRadius: 4,
         borderWidth: 2,
         borderColor: "red"
        }

The visual result from the code can be seen on the next image:

 As we can see, labels are placed immediately below and above each of the bars, making quite easy for the user to track values. And for even more user comfort we have placed a rounded corners border around each label. Similar to the bar chart, we may reverse the bars orientations by switching the X and Y axis positioning. We may do so by using the isInverted property as shown below:

isInverted: true,  

Below is an image showing the result:

 Zooming is allowed for the Shield UI Range Bar chart, and it can be enabled by setting the desired zoom mode:

zoomMode:'xy',

As shown in the online code sample, we can easily bind the chart to local data. For that purpose we declare a variable and populate it with the needed data values as shown:

  var LocalData = [
[0.75, 0.79],
[0.95, 1.03],
[0.70, 0.79], 
[0.65, 0.70], 
[0.5, 0.69], 
[0.77, 0.89],
[0.79, 0.87],
[0.55, 0.89],
[0.65, 0.99]
 ]; 

];

As we can see data values come in pairs- so that ranges can be formed for each of the bars on the graph. Than we only need to bind it to the data series:

      seriesType: "rangebar",
      collectionAlias: "Series A",
      data: LocalData

Of course the chart can be bound to remote data as well. It also allows users to export the current state of the chart to a graphical file, or send it to the printer.

An editable live example for the Shield UI Range Bar Chart is available here: Live Example

More information as well as extensive code samples for the Range Bar chart type can be found here: Documentation and examples