AmChart Test Legend Values
by Anton
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>
CSS
#chartdiv {
width : 100%;
height : 300px;
}
JavaScript
var chartData = generateChartData();
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"dataProvider": chartData,
"valueAxes": [{
"axisAlpha": 0.2,
"dashLength": 1,
"position": "left"
}],
"legend": {
"position": "bottom",
"valueText": "[[value]]"
},
"graphs": [{
"id":"g1",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor":"#FFFFFF",
"hideBulletsCount": 50,
"title": "Series Number One",
"valueField": "visits",
"useLineColorForBulletBorder":true
}],
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisColor": "#DADADA",
"dashLength": 1,
"minorGridEnabled": true
}
});
chart.addListener("rendered", zoomChart);
zoomChart();
// generate some random data, quite different range
function generateChartData() {
var chartData = [];
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 5);
for (var i = 0; i < 10; i++) {
// we create date objects here. In your data, you can have date strings
// and then set format of your dates using chart.dataDateFormat property,
// however when possible, use date objects, as this will speed up chart rendering.
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var visits = Math.random() * (100) + 20;
chartData.push({
date: newDate,
visits: visits
});
}
return chartData;
}