JavaScript Area Chart

One of the charts of the rich HTML5 JavaScript ShieldUI Charting library is the Area type chart. It is used to utilize data visualization of cumulative values over a period of time or range. The chart is similar to a classical JavaScript Line graph. The difference is that data is being visualized with the usage of additional colored areas placed in the space locked between the series data points.

 

Positive values are represented by a colored area beginning from the X axis and filling up the space between it and the line connecting the points. Similarly for the negative values the colored area is placed below the X axis and bounded in the same manner. The ShieldUI Area JavaScript Chart is being referenced and declared in the usual way, using a <DIV></DIV> container to host the rendered chart. Data supplied data for each series is in the format:

dataSeries: [{
seriesType: 'area',
collectionAlias: "Name of Alias",
data: [1,2,3,4,5]
},

An important feature of the Area chart type is the ability to show values not only as absolute ones but also as a part of a whole. We may do so by using the stackMode property as shown:

seriesSettings: {
area: {
stackMode: "percent"
}
},

When set to percent the stackMode property will represent data as rectangular area divided by each data series values as shown on the next image:

  

 The ShieldUI Area Chart offers convenient binding to local or remote data without any additional code. The retrieved data is simply passed to the data series as shown:

dataSeries: [{
seriesType: "area",
data: remoteDataVar
}]

This HTML5 JavaScript charts also features smooth and adjustable zooming modes, exporting and printing options and a variety of events available for the users.
A live editable example for the ShieldUI Area Chart can be found here: Live Example
Additional resources and documentation about the ShieldUI Area Chart can be found here: Documentation and Resources