Custom images on category axis
HTML
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
CSS
#chartdiv {
width : 100%;
height : 500px;
font-size : 11px;
}
JavaScript
// generate data
var chartData = [];
function generateChartData() {
var firstDate = new Date();
firstDate.setTime(firstDate.getTime() - 10 * 24 * 60 * 60 * 1000);
for (var i = firstDate.getTime(); i < (firstDate.getTime() + 10 * 24 * 60 * 60 * 1000); i += 60 * 60 * 1000) {
var newDate = new Date(i);
if (i == firstDate.getTime()) {
var value1 = Math.round(Math.random() * 10) + 1;
}
else {
var value1 = Math.round(chartData[chartData.length - 1].value1 / 100 * (90 + Math.round(Math.random() * 20)) * 100) / 100;
}
if (newDate.getHours() == 12) {
// we set daily data on 12th hour only
var value2 = Math.round(Math.random() * 12) + 1;
chartData.push({
date: newDate,
value1: value1,
value2: value2
});
}
else {
chartData.push({
date: newDate,
value1: value1
});
}
}
}
generateChartData();
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"pathToImages": "//cdn.amcharts.com/lib/3/images/",
"dataProvider": chartData,
"graphs": [{
"balloonText": "[[title]]: [[value]]",
"lineThickness": 0,
"title": "intra-day",
"valueField": "value1"
}, {
"balloonText": "[[title]]: [[value]]",
"columnWidth": 20,
"fillAlphas": 1,
"title": "daily",
"type": "column",
"valueField": "value2"
}],
"zoomOutButtonRollOverAlpha": 0.0,
"chartCursor": {
"categoryBalloonDateFormat": "MMM DD JJ:NN",
"cursorPosition": "mouse",
"showNextAvailable":true
},
"valueAxes": [{
"labelOffset": 25
}],
"autoMarginOffset": 5,
"columnWidth": 1,
"categoryField": "date",
"categoryAxis": {
"minPeriod": "hh",
"parseDates": true
},
...