JavaScript Charts: Bar chart with background image
<script type="text/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 = "/lib/samples/javascript/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.85;
// you can pass any number of colors in array to create more fancy gradients
graph.fillColors = ["#000000", "#c95500"];
graph.gradientOrientation = "horizontal";
graph.labelPosition = "bottom";
graph.labelText = "[[category]]: [[value]] Litres";
graph.balloonText = "[[category]]: [[value]] Litres";
chart.addGraph(graph);
// LABEL
chart.addLabel(50, 40, "Beer Consumption by country", "left", 15, "#000000", 0, 1, true);
// WRITE
chart.write("chartdiv");
});
</script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
 Bar chart with background image |
