JavaScript
// source data
var chartData = [{
"category": "January",
"limit": 153,
"bullet": 153,
"percent": "-17.0",
"full": 153
}, {
"category": "February",
"limit": 135,
"bullet": 162,
"percent": "-12.7",
"full": 135
}, {
"category": "March",
"limit": 123,
"bullet": 94,
"percent": "-3.7",
"full": 123
}, {
"category": "April",
"limit": 86,
"bullet": 70,
"percent": "-6.4",
"full": 86
}, {
"category": "May",
"limit": 85,
"bullet": 92,
"percent": "-15.3",
"full": 85
}, {
"category": "June",
"limit": 67,
"bullet": 38,
"percent": "-7.5",
"full": 67
}, {
"category": "July",
"limit": 67,
"bullet": 0,
"percent": "-4.4",
"full": 67
}, {
"category": "August",
"limit": 60,
"bullet": 0,
"percent": "-4.4",
"full": 60
}, {
"category": "September",
"limit": 76,
"bullet": 0,
"percent": "-4.4",
"full": 76
}, {
"category": "October",
"limit": 109,
"bullet": 0,
"percent": "-4.4",
"full": 109
}, {
"category": "November",
"limit": 113,
"bullet": 0,
"percent": "-4.4",
"full": 113
}, {
"category": "December",
"limit": 127,
"bullet": 0,
"percent": "-4.4",
"full": 127
}];
// pre-process data
for (var x in chartData) {
// color bar in red if it's under budge
if (chartData[x].bullet < chartData[x].limit)
chartData[x].color = "#a70d1c";
else
chartData[x].color = "#0c0";
// set alpha to semi-transparent for upcoming months we don't
// have data for yet
if (0 == chartData[x].bullet) {
chartData[x].alpha = 0.3;
chartData[x].color = "#ccc";
}
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"percentPrecision": 1,
"precision": 1,
"dataProvider": chartData,
"startDuration": 1,
"graphs": [{
"valueField": "limit",
"lineColor":...