Updating balloon text with balloonFunction
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>
JavaScript
// since v3, chart can accept data in JSON format
// if your category axis parses dates, you should only
// set date format of your data (dataDateFormat property of AmSerialChart)
var chartData = [
{
"lineColor": "#ffc321",
"date": "2012-01-01",
"duration": 408
},
{
"date": "2012-01-02",
"duration": 482
},
{
"date": "2012-01-03",
"duration": 562
},
{
"date": "2012-01-04",
"duration": 379
},
{
"lineColor": "#fd813c",
"date": "2012-01-05",
"duration": 501
},
{
"date": "2012-01-06",
"duration": 443
},
{
"date": "2012-01-07",
"duration": 405
},
{
"date": "2012-01-08",
"duration": 309,
"lineColor": "#CC0000"
},
{
"date": "2012-01-09",
"duration": 287
},
{
"date": "2012-01-10",
"duration": 485
},
{
"date": "2012-01-11",
"duration": 890
},
{
"date": "2012-01-12",
"duration": 810
}
];
var chart;
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "date";
chart.dataDateFormat = "YYYY-MM-DD";
chart.marginTop = 0;
var balloon = chart.balloon;
balloon.cornerRadius = 6;
balloon.adjustBorderColor = false;
balloon.horizontalPadding = 10;
balloon.verticalPadding = 10;
// AXES
// category axis
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
categoryAxis.autoGridCount = false;
categoryAxis.gridCount = 50;
categoryAxis.gridAlpha = 0;
categoryAxis.gridColor = "#000000";
categoryAxis.axisColor = "#555555";
// we want custom...