Adding multiple lines in Date based AmCharts

Question

I've just started working with AmCharts Javascript charting library. My requirement is to draw one chart with one value axis and one date axis. And I have data sets showing results for different team members.

Plus I have one array in which the consolidated performance of team members is stored which basically shows companies' performance.

I came across this date based chart in am charts which I want to use for my application. The problem is, I want to add multiple lines in this chart which I don't know how to add. I tried doing it with given sample code, but there is no way of feeding more than one array of data.

I also tried creating separate graphs using new AmCharts.AmGraph() Method but amCharts asks for data provider on chart level. Not on graph level.

Please help

Simon Simon · Accepted Answer · 2014-10-17T11:16:14

Just add in your second graph into the "graphs" section...

    {
        "id": "g2",
        "bullet": "round",
        "bulletBorderAlpha": 1,
        "bulletColor": "#00FF00",
        "bulletSize": 5,
        "hideBulletsCount": 50,
        "lineThickness": 2,
        "title": "green line",
        "useLineColorForBulletBorder": true,
        "valueField": "value2"
    }

and also add the second stream into your data...

    {
        "date": "2012-07-27",
        "value": 13,
        "value2": 10
    }, {
        "date": "2012-07-28",
        "value": 11,
        "value2": 12
    }

As you can see, I have added the "value2" which will be used as the example data for a second graph. Just make sure that you refer to this value in the graph section (as you will see in the "valueField" in the top section of code above.

You can see a working example at http://jsfiddle.net/srp8313j/. I only added a few points for the second graph just so you can get a taster of what is needed to be done.

Adding multiple lines in Date based AmCharts

1 Answers