Heat-map chart

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>
<div id="chartdiv"></div>

CSS

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

#chartdiv {
	width: 100%;
	height: 500px;
}

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;
  }
}

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

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "dataProvider": sourceData,
  "valueAxes": [ {
    "stackType": "regular",
    "axisAlpha": 0.3,
    "gridAlpha": 0,
    "maximum": 24,
    "duration": "mm",
    "unit": ":00"
  } ],
  "graphs": graphs,
  "columnWidth": 1,
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true,
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left"
  },
  "listeners": [{
    "event": "clickGraphItem",
    "method": function(event) {
      alert(event.item.graph.imageUrl);
      console.log(sourceData[0])
    }
  }]
} );
//chart.backgroundImage = "http://www.amcharts.com/lib/images/bg.jpg";