Heat-map chart (year worth of data)

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

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

#chartdiv {
	width		: 5000px;
	height		: 150px;
	font-size	: 11px;
}

JavaScript

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

for (var i = 0; i < 365; i++) {
    var newDate = new Date(firstDate);
    newDate.setDate(newDate.getDate() + i);
    var dataPoint = {
        date: newDate
    }
    
    // generate value for each day
    for (var h = 0; h <= 6; 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 <= 6; h++) {
        sourceData[i]['color' + h] = colors[sourceData[i]['value' + h]];
        sourceData[i]['hour' + h] = 1;
    }
}

// define graph objects for each hour
var graphs = [];
for (var h = 0; h <= 6; h++) {
    graphs.push({
        "balloonText": "Original value: [[value" + h + "]]",
        "fillAlphas": 1,
        "lineAlpha": 0,
        "type": "column",
		"colorField": "color" + h,
        "valueField": "hour" + h
    });
}

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
	"theme": "none",
    "dataProvider": sourceData,
    "valueAxes": [{
        "stackType": "regular",
        "axisAlpha": 0.3,
        "gridAlpha": 0,
        "maximum": 7,
        "duration": "DD",
        "unit": "D",
        "labelFrequency": 3
    }],
    "graphs": graphs,
    "columnWidth": 1,
    "categoryField": "date",
    "categoryAxis": {
        "parseDates": true,
        "gridPosition": "start",
        "axisAlpha": 0,
        "gridAlpha": 0,
        "position": "left"
    },
	"exportConfig":{
		"menuTop":"20px",
        "menuRight":"20px",
        "menuItems": [{
        "icon": '/lib/3/images/export.png',
        "format": 'png'	  
        }]  
    }
});