Replacing axis labels
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: 130px;"></div>
JavaScript
var chart;
var chartData = [
{
"category": "Evaluation",
"excelent": 20,
"good": 20,
"average": 20,
"poor": 20,
"bad": 20,
"limit": 78,
"full": 100,
"bullet": 65
}
];
AmCharts.ready(function () {
// FIRST BULLET CHART
// bullet chart is a simple serial chart
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "category";
chart.rotate = true; // if you want vertical bullet chart, set rotate to false
chart.columnWidth = 1;
chart.startDuration = 1;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridAlpha = 0;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.labelFunction = formatValue;
valueAxis.maximum = 100;
valueAxis.axisAlpha = 1;
valueAxis.gridAlpha = 0;
valueAxis.stackType = "regular"; // we use stacked graphs to make color fills
chart.addValueAxis(valueAxis);
// this graph displays the short dash, which usually indicates maximum value reached.
var graph = new AmCharts.AmGraph();
graph.valueField = "limit";
graph.lineColor = "#000000";
// it's a step line with no risers
graph.type = "step";
graph.noStepRisers = true;
graph.lineAlpha = 1;
graph.lineThickness = 3;
graph.columnWidth = 0.5; // change this if you want wider dash
graph.stackable = false; // this graph shouldn't be stacked
chart.addGraph(graph);
// The following graphs produce color bands
graph = new AmCharts.AmGraph();
graph.valueField = "excelent";
graph.lineColor = "#19d228";
graph.showBalloon = false;
graph.type = "column";
graph.fillAlphas = 0.8;
chart.addGraph(graph);
graph = new AmCharts.AmGraph();
graph.valueField = "good";
graph.lineColor = "#b4dd1e";
graph.showBalloon = false;
graph.type = "column";
graph.fillAlphas = 0.8;
...