FusionCharts - Gallery Example - Zoom Line Chart in JavaScript

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- This sample shows the usage of the zoomTo() method. -->
<div id="indicatorDiv">Method Name: <strong>zoomTo()</strong>    
    <p>Zooms the zoom line chart to view a specific range of data.</p>
    <p>From the drop-down given below, select a month.</p>
    <p>Click <strong>Zoom into month</strong>.</p>
    <p>The chart is zoomed in to show data for the selected month.</p>
       <div class="text-center">
       	<div class="mb-20">Select a month:
       		<select id="month">
       		    <option value="Jan">Jan</option>
       		    <option value="Feb">Feb</option>
       		    <option value="Mar">Mar</option>
       		    <option value="Apr">Apr</option>
       		    <option value="May">May</option>
       		    <option value="Jun">Jun</option>
       		    <option value="Jul">Jul</option>
       		    <option value="Aug">Aug</option>
       		    <option value="Sep">Sep</option>
       		    <option value="Oct">Oct</option>
       		    <option value="Nov">Nov</option>
       		    <option value="Dec">Dec</option>
       		</select>
       		
       		<button id="zoom">Zoom into month</button>      </div>
       	<div id="chart-container">FusionCharts will render here</div>
       </div>

</div>

CSS

body {
    padding: 5px;
    margin: 0 auto;
}

strong{
  font-weight: bold;
}

.text-center {
  text-align: center;
}

p {
  margin: 10px auto;
}

.mb-20 {
  margin-bottom: 20px;
}

#indicatorDiv {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}
#month {
    height: 25px;
    font-size: 12px;
}
#zoom {
    height: 25px;
    font-size: 13px;
}

JavaScript

FusionCharts.ready(function () {
    var visitChart = new FusionCharts({
        type: 'zoomline',
        renderAt: 'chart-container',
        width: '500',
        height: '350',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Unique Website Visitors",
                    "subcaption": "Last year",
                    "paletteColors": "#0075c2,#1aaf5d",
                    "captionFontSize": "13",
                    "subcaptionFontSize": "12",
                    "subcaptionFontBold": "0",
                    "showBorder": "0",
                    "bgColor": "#ffffff",
                    "baseFont": "Helvetica Neue,Arial",
                    "showCanvasBorder": "0",
                    "showShadow": "0",
                    "showAlternateHGridColor": "0",
                    "canvasBgColor": "#ffffff",
                    "yaxisname": "Unique Visitors",
                    "xaxisname": "Date",
                    "yaxisminValue": "800",
                    "yaxismaxValue": "1400",
                    "forceAxisLimits": "1",
                    "pixelsPerPoint": "0",
                    "pixelsPerLabel": "30",
                    "lineThickness": "1",
                    "compactdatamode": "1",
                    "dataseparator": "|",
                    "labelHeight": "30",
                    "scrollheight": "10",
                    "flatScrollBars": "1",
                    "scrollShowButtons": "0",
                    "scrollColor": "#cccccc",
                    "legendBgAlpha": "0",
                    "legendBorderAlpha": "0",
                    "legendShadow": "0",
                    "legendItemFontSize": "10",
                    "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...