FusionCharts - Gallery Example - Multi-Series Line Chart

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>

<div id="main">


<div id="chart-container">FusionCharts will render here</div>
<div id="chart-container2">FusionCharts will render here</div>

</div>

CSS

#main {
  width: 1300px;
}

#chart-container {
  width: 800px;
  float: left;
}

#chart-container2 {
  width: 500px;
  float: right;
}

JavaScript

FusionCharts.ready(function() {
  var salesChart = new FusionCharts({
      type: 'msspline',
      renderAt: 'chart-container2',
      width: '800',
      height: '400',
      dataFormat: 'json',
      dataSource: {
        "chart": {
          "caption": "cost",
          "subcaption": "",
          "xAxisName": "Date",
        "yAxisName": "Cumulative",
          "linethickness": "",
          "labelstep":"2",
          "showvalues": "0",
          "formatnumberscale": "1",
          "drawanchors":"1",
          "divLineAlpha": "40",
          "anchoralpha": "0",
          "animation": "1",
          "legendborderalpha": "20",
          "drawCrossLine": "1",
          "crossLineColor": "#0d0d0d",
          "crossLineAlpha": "100",
          "tooltipGrayOutColor": "#80bfff",
          "theme": "fusion"
        },
        "categories": [{
          "category": [{
            "label": "1 Jan-2017"
          }, {
            "label": "10 Jan-2017"
          }, {
            "label": "20 Jan-2017"
          }, {
            "label": "1 Feb-2017"
          }, {
            "label": "10 Feb-2017"
          }, {
            "label": "20 Feb-2017"
          }, {
            "label": "1 March-2017"
          }, {
            "label": "10 March-2017"
          }, {
            "label": "20 March-2017"
          }, {
            "label": "1 April-2017"
          }, {
            "label": "10 April-2017"
          }, {
            "label": "20 April-2017"
          }, {
            "label": "1 May-2017"
          }, {
            "label": "10 May-2017"
          }, {
            "label": "20 May-2017"
          }]
        }],
        "dataset": [{
          "seriesname": "Revised Baseline",
          "data": [{
            "value": "0"
          }, {
            "value": "3600"
          }, {
            "value": "3200"
          }, {
            "value": "3900"
          }, {
            "value": "4500"
          }, {
            "value": "6180"
          }, {
           ...