FusionCharts - Gallery Example - Zoom Line Chart in JavaScript

Created using FusionCharts Suite XT - www.fusioncharts.com

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- ZoomLine Chart showing unique website visits for last year. 

Zoom across a data range by dragging mouse on plots, and compare two sections of data using pin feature. 

Condensed data format for ZoomLine Chart has been used in this example.
 -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
  var visitChart = new FusionCharts({
    type: 'zoomline',
    renderAt: 'chart-container',
    width: '600',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "120009297, BELB HEADQUARTERS, HQ Building Water, 15 Minute Consumption",
        "subcaption": "Period - 16/04/2016 to 25/04/2016",
        "yaxisname": "litres",
         "scrollheight": "10",
        "compactdatamode": "1",
        "dataseparator": "|",
        "axis": "linear",
      // "pixelsperpoint": "0",
       // "forceaxislimits": "1",
    "showpeakdata": "1",
    "minpeakdatalimit": "0",
    //"maxpeakdatalimit": "0",
    "palettecolors": "1763FF",
    "bgcolor": "#ffffff",
    "borderalpha": "20",
    "showcanvasborder": "0",
    "useplotgradientcolor": "0",
    "plotborderalpha": "10",
    "legendborderalpha": "0",
    "legendshadow": "0",
    "showvalues": "0",
    "showborder": "0",
    "showxaxisline": "1",
    "xaxislinecolor": "#999999",
    "divlinecolor": "#999999",
    "divlinedashed": "1",
    "showalternatehgridcolor": "0",
    "subcaptionfontbold": "1",
    "subcaptionfontsize": "10",
    "formatnumberscale": "0",
    "anchorradius": "1",
    "linethickness": "1",
    "allowpinmode": "0",
    "exportenabled": "1"

      },
      "categories": [{
        "category": "16/04 00:00|16/04 00:15|16/04 00:30|16/04 00:45|16/04 01:00|16/04 01:15|16/04 01:30|16/04 01:45|16/04 02:00|16/04 02:15|16/04 02:30|16/04 02:45|16/04 03:00|16/04 03:15|16/04 03:30|16/04 03:45|16/04 04:00|16/04 04:15|16/04 04:30|16/04 04:45|16/04 05:00|16/04 05:15|16/04 05:30|16/04 05:45|16/04 06:00|16/04 06:15|16/04 06:30|16/04 06:45|16/04 07:00|16/04 07:15|16/04 07:30|16/04 07:45|16/04 08:00|16/04 08:15|16/04 08:30|16/04 08:45|16/04 09:00|16/04 09:15|16/04 09:30|16/04 09:45|16/04 10:00|16/04 10:15|16/04 10:30|16/04 10:45|16/04 11:00|16/04 11:15|16/04 11:30|16/04 11:45|16/04 12:00|16/04 12:15|16/04 12:30|16/04 12:45|16/04 13:00|16/04...