amcharts Bar with background image
by nikcenter
HTML
<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<div id="chartdiv2" style="width: 100%; height: 360px;"></div>
JavaScript
var chart;
var chartData = [{
country: "Жолобецький Олександр Олександрович",
відсотків: 66,
},
{
country: "Мудрак Олег Іванович",
відсотків: 66,
},
{
country: "Клюс Сергій Валерійович",
відсотків: 65,
},
{
country: "Мишкін Андрій Олександрович",
відсотків: 53,
},
{
country: "Клюс Сергій Валерійович",
відсотків: 65,
},
{
country: "Коробко Гнат Георгійович",
відсотків: 44,
},
{
country: "Богомаз Олег Миколайович",
відсотків: 18,
}];
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 = "https://dl.dropbox.com/u/22993308/zmin.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 = "відсотків";
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 = ["#0000000", "#FF6600"];
graph.gradientOrientation =...