V3: Bar with background image
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
var chart;
var chartData = [{
"country": "Czech Republic",
"litres": 156.9,
"short": "CZ"
}, {
"country": "Ireland",
"litres": 131.1,
"short": "IR"
}, {
"country": "Germany",
"litres": 115.8,
"short": "DE"
}, {
"country": "Australia",
"litres": 109.9,
"short": "AU"
}, {
"country": "Austria",
"litres": 108.3,
"short": "AT"
}, {
"country": "UK",
"litres": 99,
"short": "UK"
}, {
"country": "Belgium",
"litres": 93,
"short": "BE"
}];
AmCharts.ready(function () {
// SERIAL CHART
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "country";
chart.rotate = true;
chart.color = "#FFFFFF";
// this line makes the chart to show image in the background
chart.backgroundImage = "http://www.amcharts.com/lib/images/bg.jpg";
// sometimes we need to set margins manually
// autoMargins should be set to false in order chart to use custom margin values
valueAxis = new AmCharts.ValueAxis();
valueAxis.maximum = 100;
valueAxis.minimum = 0;
valueAxis.axisAlpha = 1;
valueAxis.gridAlpha = 0;
chart.addValueAxis(valueAxis);
// this graph displays the short dash, which usually indicates maximum value reached.
graph = new AmCharts.AmGraph();
graph.valueField = "limit";
graph.lineColor = "#000000";
graph.type = "step";
graph.noStepRisers = true;
graph.lineAlpha = 1;
graph.lineThickness = 3;
graph.columnWidth = 0.5;
graph.stackable = false;
chart.addGraph(graph);
// this is the "bullet" graph - black bar showing current value
graph = new AmCharts.AmGraph();
graph.valueField = "bullet";
graph.lineColor = "#000000";
graph.type = "column";
graph.lineAlpha = 1;
graph.fillAlphas = 1;
graph.columnWidth = 0.3; // this makes it narrower than color graph
...