Creating a "normal" line chart in amcharts.js with arrays? [closed] Creating a "normal" line chart in amcharts.js with arrays? [closed] flask flask

Creating a "normal" line chart in amcharts.js with arrays? [closed]


First things first, if you are looking at plotting a line graph out of arbitrary X and Y coordinates (as opposed plotting series-based data), you're better off using XY chart than serial one.

Also, amCharts will not be able to plot data in separate arrays of coordinates.

You can either convert the data to a proper format at the moment of generation of data, so it looks like this:

chartData = [ {  x: 1,  y: 5}, {  x: 2,  y: 6}, {  x: 3,  y: 7}, {  x: 4,  y: 8}];

Or add some code that converts your data to amCharts-compatible data before supplying it to the chart:

/** * Source data */var x = [1,2,3,4];var y = [5,6,7,8];/** * Convert source data to AmCharts-compatible format */var chartData = [];for( var i = 0; i < x.length; i++ ) {  chartData.push( {    "x": x[ i ],    "y": y[ i ]  } )}/** * Create the chart */var chart = AmCharts.makeChart( "chartdiv", {  "type": "xy",  "pathToImages": "http://www.amcharts.com/lib/3/images/",  "dataProvider": chartData,  "graphs": [ {    "bullet": "circle",    "bulletSize": 8,    "lineAlpha": 1,    "lineThickness": 2,    "fillAlphas": 0,    "xField": "x",    "yField": "y",  } ]} );

Here's a working demo of the above:

http://codepen.io/amcharts/pen/15b2c710357a7e29eda11dc5caa07d44


following is the simpliest definition possible. The dateProvider is an array of objects where each element represents the x-axis item with it's y values.

AmCharts.makeChart("your element id",{    "type": "serial",    "pathToImages": "http://cdn.amcharts.com/lib/3/images/",    "categoryField": "category",    "graphs": [        {            "valueField": "column-1"        }    ],    "dataProvider": [        {            "category": "1",            "column-1": "8"        },        {            "category": "2",            "column-1": 6        },        {            "category": "3",            "column-1": 2        },        {            "category": "4",            "column-1": 1        }    ]});

Live sample:http://live.amcharts.com/2JmYT/edit/