amcharts Mixed daily and intra-day graphs
HTML
<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>
CSS
body
{
font-size:12px;
color:#000000;
background-color:#ffffff;
font-family:verdana,helvetica,arial,sans-serif;
}
JavaScript
var chart;
var chartData = [];
// generate data
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);
}
else {
var value1 = chartData[chartData.length - 1].value1 / 100 * (90 + Math.round(Math.random() * 20));
}
if (newDate.getHours() == 12) {
// we set daily data on 12th hour only
var value2 = Math.round(Math.random() * 12);
chartData.push({
date: newDate,
value1: value1,
value2: value2
});
}
else {
chartData.push({
date: newDate,
value1: value1
});
}
}
}
// creat chart
AmCharts.ready(function() {
// generate some data
generateChartData();
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.autoMarginOffset = 5;
chart.marginBottom = 0;
chart.pathToImages = "http://www.amcharts.com/lib/images/";
chart.zoomOutButton = {
backgroundColor: '#000000',
backgroundAlpha: 0.15
};
chart.dataProvider = chartData;
chart.categoryField = "date";
chart.balloon.bulletSize = 5;
chart.columnWidth = 20; // we set column width to 20 so that each daily column spans 20 categories (hours)
chart.numberFormatter = {precision:2, decimalSeparator:'.', thousandsSeparator:','};
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true;
categoryAxis.minPeriod = "hh";
categoryAxis.dashLength = 1;
categoryAxis.gridAlpha = 0.15;
categoryAxis.axisColor = "#DADADA";
...