Heat-map chart (using V2)

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/amcharts.js"></script>
<div id="chartdiv"><a></a></div>

CSS

body {
    font-family: Verdana;
    font-size: 12px;
    padding: 10px;
}

#chartdiv {
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}

JavaScript

// generate random data
var sourceData = [];
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 28);
firstDate.setHours(0, 0, 0, 0);

for (var i = 0; i < 28; i++) {
    var newDate = new Date(firstDate);
    newDate.setDate(newDate.getDate() + i);
    var dataPoint = {
        date: newDate
    }
    
    // generate value for each hour
    for (var h = 0; h <= 23; h++) {
        dataPoint['value' + h] = Math.round(Math.random() * 4);
    }

    sourceData.push(dataPoint);
}

// now let's populate the source data with the colors based on the value
// as well as replace the original value with 1
var colors = ['#FF0000', '#FF9100', '#F2FF00', '#9DFF00', '#00FF00'];
for (i in sourceData) {
    for (var h = 0; h <= 23; h++) {
        sourceData[i]['color' + h] = colors[sourceData[i]['value' + h]];
        sourceData[i]['hour' + h] = 1;
    }
}

AmCharts.ready(function () {
    var chart = new AmCharts.AmSerialChart();
    chart.dataProvider = sourceData;
    chart.columnWidth = 1;
    chart.categoryField = "date";
    
    // define graph objects for each hour
    for (var h = 0; h <= 23; h++) {
        var graph = new AmCharts.AmGraph();
        graph.balloonText = "Original value: [[value" + h + "]]";
        graph.fillAlphas = 1;
        graph.lineAlpha = 0;
        graph.type = "column";
        graph.colorField = "color" + h;
        graph.valueField = "hour" + h;
        chart.addGraph(graph);
    }
    
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.stackType = "regular";
    valueAxis.axisAlpha = 0.3;
    valueAxis.gridAlpha = 0;
    valueAxis.maximum = 24;
    valueAxis.duration = "mm";
    valueAxis.unit = ":00";
    chart.addValueAxis(valueAxis);
    
    chart.categoryAxis.parseDates = true;
    chart.categoryAxis.gridPosition = "start";
    chart.categoryAxis.axisAlpha = 0;
    chart.categoryAxis.gridAlpha = 0;
    
    chart.write('chartdiv');
});

/*
var chart = AmCharts.makeChart("chartdiv", {
    "type":...