CODEWITHSUNDEEP
javascriptjsonamcharts
paliaso
paliaso

Reputation: 47

How do I draw multiple lines in amcharts line graph using json?

I have an AM Charts line chart with multiple graphs that I am loading from a url. This works great with the dataloader pulling json for the data, however I'm trying to get the script to load the dynamic "graph" data as well. I tried the solution HERE but it does not render in the browser.

EDIT - I fixed the javascript (had an extra bracket) now it renders in the browser, data points are there, but not visible and it isn't painting lines.

Does anyone have any suggestions?

css

<!-- Styles -->
<style>
html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
    width: 100%;
    height: 100%;
}
</style>'

javascript

 <!-- Chart code -->
 <script>
 var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataLoader": {
    "url": "http://127.0.0.1:5000/rate_json.json",
    "format": "json",
    "complete": function(chart) {
       //get potential valueFields after filtering out the categoryField
       var valueFields = Object.keys(chart.dataProvider[0]).filter(function(value) {
         return value !== chart.categoryField;
       })
      //create the graphs
       valueFields.forEach(function(valueField) {
         chart.graphs.push({
           "valueField": valueField,
           "type": "serial",
           "balloonText": "[[category]]: <b>[[value]]</b>",
           "fillAlphas": 0.8,
           "lineAlphas": 0.2
         })
       });
     }
   },
  "valueAxes": [{
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  }],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "month",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0
  },
  "legend": {},
  "export": {
    "enabled": true
    },
  "menu": [ {
    "class": "export-main",
    "menu": [ "PNG", "JPG", "CSV" ]
  } ]
});

</script>

html

<!-- Resources -->
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/plugins/export/export.js"></script>
<link rel="stylesheet" href='https://www.amcharts.com/lib/3/plugins/export/export.css' type='text/css' media='all'/>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/dataloader-3.19.0.min.js"></script>

<div id="chartdiv"></div>

If I use the following javascript, it works perfectly but I need to be able to add/remove Stores dynamically

<!-- Chart code -->
<script>
var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataLoader": {
    "url": "http://127.0.0.1:5000/rate_json.json",
    "format": "json"
  },
  "valueAxes": [{
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  }],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [{
    "title": "Store 1216",
    "balloonText": "[[title]]: <b>[[value]]</b>",
    "bullet": "round",
    "bulletSize": 10,
    "bulletBorderColor": "#ffffff",
    "bulletBorderAlpha": 1,
    "bulletBorderThickness": 2,
     "lineThickness": 3,
    "valueField": "1216"
  }, {
    "title": "Store 6528",
    "balloonText": "[[title]]: <b>[[value]]</b>",
    "bullet": "round",
    "bulletSize": 10,
    "bulletBorderColor": "#ffffff",
    "bulletBorderAlpha": 1,
    "bulletBorderThickness": 2,
     "lineThickness": 3,
    "valueField": "6528"
  },
  {
    "title": "Store 230",
    "balloonText": "[[title]]: <b>[[value]]</b>",
    "bullet": "round",
    "bulletSize": 10,
    "bulletBorderColor": "#ffffff",
    "bulletBorderAlpha": 1,
    "bulletBorderThickness": 2,
     "lineThickness": 3,
    "valueField": "230"
  },{
    "title": "Store 6538",
    "balloonText": "[[title]]: <b>[[value]]</b>",
    "bullet": "round",
    "bulletSize": 10,
    "bulletBorderColor": "#ffffff",
    "bulletBorderAlpha": 1,
    "bulletBorderThickness": 2,
     "lineThickness": 3,
    "valueField": "6538"
  },{
    "title": "Store 6514",
    "balloonText": "[[title]]: <b>[[value]]</b>",
    "bullet": "round",
    "bulletSize": 10,
    "bulletBorderColor": "#ffffff",
    "bulletBorderAlpha": 1,
    "bulletBorderThickness": 2,
     "lineThickness": 3,
    "valueField": "6514"
  },{
    "title": "Store 1297",
    "balloonText": "[[title]]: <b>[[value]]</b>",
    "bullet": "round",
    "bulletSize": 10,
    "bulletBorderColor": "#ffffff",
    "bulletBorderAlpha": 1,
    "bulletBorderThickness": 2,
     "lineThickness": 3,
    "valueField": "1297"
  },
  {
    "title": "Store 6299",
    "balloonText": "[[title]]: <b>[[value]]</b>",
    "bullet": "round",
    "bulletSize": 10,
    "bulletBorderColor": "#ffffff",
    "bulletBorderAlpha": 1,
    "bulletBorderThickness": 2,
     "lineThickness": 3,
    "valueField": "6299"
  },{
    "title": "Store 5830",
    "balloonText": "[[title]]: <b>[[value]]</b>",
    "bullet": "round",
    "bulletSize": 10,
    "bulletBorderColor": "#ffffff",
    "bulletBorderAlpha": 1,
    "bulletBorderThickness": 2,
     "lineThickness": 3,
    "valueField": "5830"
  },{
    "title": "Average",
    "balloonText": "[[title]]: <b>[[value]]</b>",
    "bullet": "round",
    "bulletSize": 10,
    "bulletBorderColor": "#ffffff",
    "bulletBorderAlpha": 1,
    "bulletBorderThickness": 2,
     "lineThickness": 3,
    "valueField": "Average"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "month",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0
  },
  "legend": {},
  "export": {
    "enabled": true
    },
  "menu": [ {
    "class": "export-main",
    "menu": [ "PNG", "JPG", "CSV" ]
  } ]
});

</script>

Data

    [{"month": "February", "1216": 22.8, "6528": 23.65, "230": 23.61, "6538": 23.43, "6514": 23.21, "1297": 23.14, "6299": 23.11, "5830": 22.71, "Average": 23.21}, {"month": "March", "1216": 20.01, "6528": 22.61, "230": 23.67, "6538": 22.54, "6514": 22.91, "1297": 23.59, "6299": 13.87, "5830": 22.7, "Average": 21.49}, {"month": "April", "1216": 24.67, "6528": 24.64, "230": 22.7, "6538": 40.89, "6514": 38.18, "1297": 41.98, "6299": 23.19, "5830": 38.8, "Average": 37.51}, {"month": "May", "1216": 22.8, "6528": 23.65, "230": 23.61, "6538": 23.43, "6514": 23.21, "1297": 23.14, "6299": 23.11, "5830": 22.71, "Average": 23.21}, {"month": "June", "1216": 20.01, "6528": 22.61, "230": 23.67, "6538": 22.54, "6514": 22.91, "1297": 23.59, "6299": 13.87, "5830": 22.7, "Average": 21.49}, {"month": "July", "1216": 21.67, "6528": 21.64, "230": 25.7, "6538": 40.89, "6514": 38.18, "1297": 41.98, "6299": 23.19, "5830": 38.8, "Average": 37.51}, {"month": "August", "1216": 22.8, "6528": 23.65, "230": 23.61, "6538": 23.43, "6514": 23.21, "1297": 23.14, "6299": 23.11, "5830": 22.71, "Average": 23.21}, {"month": "Sept", "1216": 20.01, "6528": 22.61, "230": 23.67, "6538": 22.54, "6514": 22.91, "1297": 23.59, "6299": 13.87, "5830": 22.7, "Average": 21.49}, {"month": "Oct", "1216": 14.67, "6528": 16.64, "230": 27.7, "6538": 20.9, "6514": 22.18, "1297": 21.84, "6299": 15.19, "5830": 18.8, "Average": 21.99}]

Example when Working: enter image description here

Upvotes: 0

Views: 2634

Answers (1)

xorspark
xorspark

Reputation: 16012

The issue is how you're creating the graphs - there is no type: "serial" in an AmGraph object, as that value is used for the chart type. In an AmGraph object, type can be set to "line", "column", "step", "smoothedLine", "candlestick", and "ohlc". Fixing the type will fix your chart.

"complete": function(chart) {
   //get potential valueFields after filtering out the categoryField
   var valueFields = Object.keys(chart.dataProvider[0]).filter(function(value) {
     return value !== chart.categoryField;
   })
  //create the graphs
   valueFields.forEach(function(valueField) {
     chart.graphs.push({
       "valueField": valueField,
       "title": valueField, //added to show labels next to legend markers
       "type": "line", //type should be line, not serial
       "balloonText": "[[category]]: <b>[[value]]</b>",
       "lineAlphas": 0.2
     })
   });
 }

Demo

Upvotes: 1

Related Questions