FusionCharts - Gallery Example - Zoom Line Chart in JavaScript

Created using FusionCharts Suite XT - www.fusioncharts.com

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": "test",
        "yaxisname": "Distance",
        "xaxisname": "time (milliseconds)",
        "compactdatamode": "1",
        "displayStartIndex": "1",
        "displayEndIndex": "70",
        "linethickness": "1",
        "dataseparator": "|",
        "pixelsPerPoint": "40",
        "theme": "fusion"
      },
      "annotations": {
        "groups": []
      },
      "categories": [{
        "category": "0|499|1000|1499|1999|2500|3000|3500|4000|4500|4999|5499|5999|6499|6999|7499|7999|8499|8999|9499|10000|10500|11000|11500|12000|12500|13000|13500|14000|14500|15000|15500|16000|16500|17000|17500|18000|18500|19000|19500|19999|20499|20999|21499|21999|22499|22999|23499|23999|24499|24999|25499|25999|26499|0|466|966|1966|2466|2966|3466|3966|4466|4966|5466|5966|6466|6966|7466|7966|8466|8966|9466|9966|10466|10966|11966|12466|17133|17466|17633|17966|18133|18466|18633|18966|19133|19466|19633|19966|20133|20633|21133|21633|22133|22633|23133|23633|24133|24633|27133|27633|28133|28633|29133|30133|30633|31133|31633|32133|32633|33133|33333|33633|33800|34133|34300|34633|34800|35133|35300|35633|35800|36133|36300|36633|36800|37133|37300|37633|37800|38133|38300|38633|38800|39133|39300|39633|41300|41800|42300|43300|43800|44300|44800|45300|45800|46300|46800|47300|47800|48300|48800|51800|0|466|966|1466|1966|2466|2966|3466|3966|4466|4966|4966|5466|5466|5966|6466|6466|6966|6966|7466|7966|8466|8966|9466|9966|10466|10966|11466|11966|11966|12466|12466|12966|13466|13966|14467|14467|14967|14967|15467|15967|16467|16467|16967|16967|17467|17467|17967|17967|18467|18467|18967|19467|19467|19967|19967|20467|20467|20967|21467|21967|22467|22967|23467|23967|24467|24967|25467|25967|26467|26967"
      }],
      "dataset": [{
        "seriesname": "Left",
        "data":...