amcharts Bar with background image
HTML
<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 360px;"></div>
JavaScript
var chart;
var chartData = [{
country: "Czech Republic",
litres: 156.90,
short: "CZ"},
{
country: "Ireland",
litres: 131.10,
short: "IR"},
{
country: "Germany",
litres: 115.80,
short: "DE"},
{
country: "Australia",
litres: 109.90,
short: "AU"},
{
country: "Austria",
litres: 108.30,
short: "AT"},
{
country: "UK",
litres: 99.00,
short: "UK"},
{
country: "Belgium",
litres: 93.00,
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
chart.autoMargins = false;
chart.marginTop = 100;
chart.marginLeft = 50;
chart.marginRight = 30;
chart.startDuration = 2;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridAlpha = 0;
categoryAxis.axisAlpha = 0;
categoryAxis.labelsEnabled = false;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.gridAlpha = 0;
valueAxis.axisAlpha = 0;
valueAxis.labelsEnabled = false;
valueAxis.minimum = 0;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.balloonText = "[[category]]: [[value]]";
graph.valueField = "litres";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 0.5;
// you can pass any number of colors in array to create more fancy gradients
graph.fillColors = ["red", "green"];
graph.gradientOrientation = "horizontal";
graph.labelPosition = "bottom";
graph.labelText = "[[category]]: [[value]] Litres";
...