Column chart with CSV data from textarea
HTML
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
<textarea id="csv" style="width: 90%; height: 150px;">USA,2025
China,1882
Japan,1809
Germany,1322
UK,1122
France,1114
</textarea>
<input type="button" value="parse CSV" onclick="parseData();" />
CSS
#chartdiv {
width : 100%;
height : 250px;
font-size : 11px;
}
JavaScript
var chartData = parseCsv();
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"dataProvider": chartData,
"valueAxes": [{
"gridColor": "#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0
},
"exportConfig": {
"menuTop": 0,
"menuItems": [{
"icon": '/lib/3/images/export.png',
"format": 'png'
}]
}
});
function parseCsv() {
// get data
var data = document.getElementById('csv').value;
//replace UNIX new lines
data = data.replace(/\r\n/g, "\n");
//replace MAC new lines
data = data.replace(/\r/g, "\n");
//split into rows
var rows = data.split("\n");
var chartData = [];
// loop through all rows
for (var i = 0; i < rows.length; i++) {
// this line helps to skip empty rows
if (rows[i]) {
// our columns are separated by comma
var column = rows[i].split(",");
// column is array now
// first item is category
var date = column[0];
// second item is value of the second column
var value = column[1];
// create object which contains all these items:
var dataObject = {
country: date,
visits: value
};
// add object to chartData array
...