Skip to content Skip to sidebar Skip to footer

How To Add Multiple Graphs In Amcharts

I am new to amcharts and I am using the below code to generate two graphs in a chart. var chart = AmCharts.makeChart('chartdiv', { 'type': 'serial', 'dataLoader': { 'url':

Solution 1:

Assuming you already know the categoryField upfront, you can use dataLoader's complete callback to look at your newly assigned dataProvider array and create graphs based on the keys in the array object.

"dataLoader": {
    "url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/SO-41015973.json",
    "complete": function(chart) {
      //get potential valueFields after filtering out the categoryFieldvar 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": "column",
          "balloonText": "[[category]]: <b>[[value]]</b>",
          "fillAlphas": 0.8,
          "lineAlphas": 0.2
        })
      });
    }
  },

I added an extra field to your data and created a codepen demo to show that this works.

Post a Comment for "How To Add Multiple Graphs In Amcharts"