V3: Mixed daily and intra-day graphs

HTML

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></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";

    // value         ...