FusionCharts - Gallery Example - Zoom Line Chart in JavaScript

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.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: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Unique Website Visitors",
        "subcaption": "Last year",
        "yaxisname": "Unique Visitors",
        "yaxisminValue": "800",
        "yaxismaxValue": "1400",
        "pixelsPerPoint": "0",
        "pixelsPerLabel": "30",
        "lineThickness": "1",
        "compactdatamode": "1",
        "dataseparator": "|",
        //"toolBarButonColor": "ff0000",
        //"showToolBarButtonToolText": "1",
        "zoomPaneBgColor": "a7d7f9",
        "zoomPaneBgAlpha": "50",
        "pinLineThicknessDelta": "5",
        "pinPaneBgColor": "87919b",
        "pinPaneBgAlpha": "50",
        "btnResetChartTooltext": "Want to Reset? Go for it.",
        "btnZoomOutTooltext": "Zoom Out the Chart",
        //"btnSwitchToZoomModeTooltext": "Yes",
        "btnSwitchToPinModeTooltext": "Switch on the Pin Mode",
        "scrollColor": "bdbdbd",
        "scrollheight": "15",
        "theme": "fusion"
      },
      "categories": [{
        "category": "Jan 01|Jan 02|Jan 03|Jan 04|Jan 05|Jan 06|Jan 07|Jan 08|Jan 09|Jan 10|Jan 11|Jan 12|Jan 13|Jan 14|Jan 15|Jan 16|Jan 17|Jan 18|Jan 19|Jan 20|Jan 21|Jan 22|Jan 23|Jan 24|Jan 25|Jan 26|Jan 27|Jan 28|Jan 29|Jan 30|Jan 31|Feb 01|Feb 02|Feb 03|Feb 04|Feb 05|Feb 06|Feb 07|Feb 08|Feb 09|Feb 10|Feb 11|Feb 12|Feb 13|Feb 14|Feb 15|Feb 16|Feb 17|Feb 18|Feb 19|Feb 20|Feb 21|Feb 22|Feb 23|Feb 24|Feb 25|Feb 26|Feb 27|Feb 28|Mar 01|Mar 02|Mar 03|Mar 04|Mar 05|Mar 06|Mar 07|Mar 08|Mar 09|Mar 10|Mar 11|Mar 12|Mar 13|Mar 14|Mar 15|Mar 16|Mar 17|Mar 18|Mar 19|Mar 20|Mar 21|Mar 22|Mar 23|Mar 24|Mar 25|Mar 26|Mar 27|Mar 28|Mar 29|Mar 30|Mar 31|Apr 01|Apr 02|Apr 03|Apr 04|Apr 05|Apr 06|Apr 07|Apr 08|Apr 09|Apr 10|Apr 11|Apr 12|Apr 13|Apr 14|Apr 15|Apr 16|Apr 17|Apr 18|Apr 19|Apr 20|Apr 21|Apr 22|Apr 23|Apr 24|Apr...