JavaScript Range Spline Area Chart

Like some of the other Shield UI’s HTML5 JavaScript charts the range area chart also has its enhanced variation. This is the range Spline area chart. The difference that we can see right away is that similarly to the spline or the spline area charts, the lines, bouldering the areas are mathematically smoothed. On the next image we can see a typical look of the spline area chart:

Aiding the user to interactively read the charts data we may take use of the axisMarkers property which dynamically places horizontal or vertical lines to the position of the current data point. To do so we may use similar to the following code:

    tooltipSettings: {
      axisMarkers: {
        enabled: true,
        mode: 'x',
        width: 1,
        zIndex: 3
      }
    },   

On the next image we can see the axisMarker line:

 

We may also format the line just the way we like or need. For instance we may make it thicker and even paint it in red to even more distinguish it from the chart:

    tooltipSettings: {
      axisMarkers: {
        enabled: true,
        mode: 'x',
        width: 3,
        zIndex: 3,
        color: 'red'
      }
    },   

And here is the result:

In case we also need a horizontal line, showing us the Y values we just need to set the mode property to:

 mode: 'xy',

And on the next image we can see the result of using the ‘xy’ axismarker mode:

A typical use utilizing the range spline area chart would be to display multiple series. So we can see whether there are overlapping ranges, for which values of X they occur and so on. On the next image we can see a typical multiple series view of the the Shield UI range spline area chart:

Just at a glance we can see, thet there are two overlapping areas occurring for 4 and 8. In case we need to, we can also easily zoom in for closer detailed view using the desired zoom mode:

zoomMode:'xy',

As in our online live example we can easily bind to local data. The code below illustrates how to declare and populate a variable containing our data:

var LocalData = [
[0.75, 0.79],
…
  ]; 

];

In a similar manner we declare a secondary variable and then bind the chart’s series to them:

    dataSeries: [{
      seriesType: "rangesplinearea",
      collectionAlias: "Series A",
      data: LocalData
    },{
      seriesType: "rangesplinearea",
      collectionAlias: "Series B",
      data: LocalDataB
    }
  ]

You can look and try the online live example for the Shield UI Range Spline Area Chart here: Live Example

As usual there is plenty more information and code example for the Range Spline Area chart available online here: Documentation and examples