FusionCharts - 246598_Zoomed Event _Zoom Line Chart in JavaScript

Created using FusionCharts Suite XT - www.fusioncharts.com

by Vishalika

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>
<div id="chart-container">FusionCharts will render here</div>
<!-- Sample for : Zoom Line Chart. This sample is showing unique website visit for last year. You can zoom a particular data by dragging arrow on plots and compare the data using pin feature and also can reset the chart using reset button. -->
<div>
<div id="indicatorDiv" style="color: #1790e1; width: 480px; font-family: 'Arial','Helvatica'; font-size: 14px; padding: 10px; ">Zoom in to get the Start Index and End Index value</div>

JavaScript

FusionCharts.ready(function () {
    var visitChart = new FusionCharts({
        type: 'zoomline',
        renderAt: 'chart-container',
        width: '600',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Unique Website Visitors",
                    "subcaption": "Last year",
                    "yaxisname": "\u00A0 \u00A0 \u00A0\u00A0 \u00A0\u00A0\u00A0 \u00A0 \u00A0 \u00A0\u00A0 \u00A0\u00A0\u00A0 \u00A0 \u00A0 \u00A0\u00A0 \u00A0\u00A0\u00A0 Unique Visitors",
                    "xaxisname": "Date",
                    "yaxisminValue": "800",
                    "yaxismaxValue": "1400",
                    "forceAxisLimits" : "1",
                    "pixelsPerPoint": "0",
                    "pixelsPerLabel": "30",
                    "lineThickness": "1",
					"compactdatamode" : "1",
					"dataseparator" : "|",
                    "labelHeight": "30",
                    "theme": "fint"
            },
			"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 25|Apr 26|Apr 27|Apr 28|Apr 29|Apr 30|May 01|May 02|May 03|May 04|May 05|May 06|May 07|May 08|May 09|May 10|May 11|May 12|May 13|May 14|May 15|May 16|May...