JavaScript Inversed Range Bar Chart

The inversed range bar chart, part of the Shield UI HTML5 JavaScript charting library, may be referred to as a variation of the range bar chart. It offers different vision of data representation- bars ranges are shown on the X instead of the Y axes. We can see a sample image below

Similar to Shield UI Range Bar Chart we can add data point labels in order to assist users in faster reading the graph values. In addition we may further graphically distinguish the labels by placing a border around them. In order to do so, we use the dataPointText property as shown in the sample code below:

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

And on the next image we can see the result:

As for the Shield UI Range Bar chart, zooming is also allowed for the inversed bar chart. We only need to set the desired mode by using the code below:

zoomMode:'xy',

We need to take into consideration, that the chart has the axis X and Y switched. This means, that if we need to zoom on the X axis, we actually set zoomMode:'y' instead of zoomMode:'x'. On the next image we can see the chart zoomed in:

As visible from the above illustration it is more logical to use the ‘y’ zoom mode, instead of ‘x’ or ‘xy’. This will allow us to show smaller ranges in closer details by stretching them only alongside, instead of zooming in as shown on the next image:

Just as any Shield UI chart, the inversed bar chart can easily be bound to local or remote 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], 
…
  ]; 

];

Here again values come in pairs- so that ranges begins and ends are clearly declared.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

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