Zoom Line Chart in JavaScript

by Rohit Boggarapu

HTML

<script src="https://37ec0bd50491a7a1c59469c0fcb527cd3211d3e2.googledrive.com/host/0B0Oqi1QalkKRLVcyWWtVXzNod0E/fusioncharts.js"></script>
<script src="https://37ec0bd50491a7a1c59469c0fcb527cd3211d3e2.googledrive.com/host/0B0Oqi1QalkKRLVcyWWtVXzNod0E/fusioncharts.charts.js"></script>
<script src="https://37ec0bd50491a7a1c59469c0fcb527cd3211d3e2.googledrive.com/host/0B0Oqi1QalkKRLVcyWWtVXzNod0E/fusioncharts-jquery-plugin.js"></script>
<!-- Zoom Line 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.
 -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<div id="zoomline-chart">FusionCharts will render here</div>

JavaScript

(function() {
  $("#zoomline-chart").insertFusionCharts({
    type: 'zoomline',
    width: '100%',
    height: '500',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Unique Website Visitors - 2015",
        "paletteColors": "#1aaf5d,#ff0000",
        "captionFontSize": "20",
        "showBorder": "0",
        "bgColor": "#ffffff",
        "baseFont": "Open Sans",
        "showCanvasBorder": "0",
        "showShadow": "0",
        "showAlternateHGridColor": "0",
        "canvasBgColor": "#ffffff",
        "xaxisname": "Date",
        "xAxisNameFontSize": "18",
        "yaxisname": "Unique Visitors",
        "yAxisNameFontSize": "18",
        "yaxisminValue": "800",
        "yaxismaxValue": "1400",
        "forceAxisLimits": "1",
        "pixelsPerPoint": "0",
        "pixelsPerLabel": "30",
        "lineThickness": "1.5",
        "compactdatamode": "1",
        "dataseparator": "|",
        "labelHeight": "30",
        "scrollheight": "10",
        "flatScrollBars": "1",
        "scrollShowButtons": "0",
        "scrollColor": "#dddddd",
        "legendBgAlpha": "0",
        "legendBorderAlpha": "0",
        "legendShadow": "0",
        "legendItemFontSize": "14",
        "legendItemFontColor": "#666666"
      },
      "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...