<html>
	<head>
		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
		<script>
      zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    </script>
        
    <script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous">
    </script>
    
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/temperatures2000.js'></script>
    
  </head>
	<body>
    
    <script>
      window.setTimeout(function() {
        $(document.body).append('<iframe style="border:0px;position:absolute;top:0px;right:0px;width:270px;height:480px;" src="https://codepen.io/zingchart/full/ef639d5ca7dd69ae067720228a01d542"></iframe>');
      }, 2500);
    </script>
    
		<div id="zc"></div>
	
  </body>
</html>


body { 
  margin:10px;
  padding:10px; 
}

*, input, button, select, textarea, label {
  font-family: 'Lucida Sans Unicode',Monaco,Tahoma,Verdana,Arial;
}
var cdata = {
    type : 'line',
    flat : true,
    title : {
      text : 'Average Temperatures (by hour) in 2001',
      fontSize : 11,
      align : 'left',
      paddingLeft : 50
    },
    heatmap : {
        brushType : 'rectangle',
        blur : 0,
        alpha : 1,
        graph : {},
        tooltip : {
            text : '<strong>%scale-key-text %scale-value-text</strong><br>Avg. Temperature: %value\u2103'
        },
        async : false,
        gradientStops : '0 0.5 0.9 1',
        gradientColors : '#3060cf #fffbbc #c4463a #c4463a',
        minValue : -15,
        maxValue : 25
    },
    colorScale : {
        width : 15,
        height : 145,
        margin : '40 10 auto auto',
        aspect : 'gradient',
        layout : 'v',
        gradientStops : '0 0.5 0.9 1',
        gradientColors : '#3060cf #fffbbc #c4463a #c4463a',
        minValue : -15,
        maxValue : 25,
        item : {
          color : '#666'
        }
    },
    plotarea : {
        margin : '30 60 40 50'
    },
    tooltip : {
        padding : '5 10',
        fontSize : 11,
        align : 'left',
        callout : true,
        calloutWidth : 10,
        calloutHeight : 6,
        calloutPosition : 'bottom'
    },
    scaleX : {
        offset : 1,
        used : true,
        minValue : (new Date(T[0][0])).getTime(),
        maxValue : (new Date(T[T.length-1][0])).getTime(),
        step : 24*60*60*1000,
        transform : {
            type : 'date',
            text : '%F %d, %Y'
        },
        item : {
            fontSize : 10
        },
        guide : {
            visible : false    
        },
        zooming : true
    },
    scaleY : {
        maxItems :4,
        offset : 4,
        format : '%v:00',
        zooming : true,
        minValue : 0,
        maxValue : 23,
        decimals : 0,
        step : 1,
        fixedStep : true,
        item : {
            fontSize : 10    
        },
        guide : {
            visible : false    
        }
    },
    series : [{
    }],
    scrollX:{},
    scrollY:{}
};

zingchart.bind('zc', 'load', function() {
    var aData = [];
    for (t=0;t<T.length;t++) {
        aData.push([
            (new Date(T[t][0])).getTime(),
            T[t][1],
            T[t][2]
        ]);
    }
    zingchart.exec('zc', 'heatmap.setdata', {
        data : aData
    });
});

zingchart.bind('zc', 'heatmap.mousemove', function(oInfo) {
    if (oInfo.value !== null) {
        zingchart.exec(oInfo.id, 'colorscale.setvalue', {
          graphid : oInfo.graphid,
        	value : oInfo.value
    	  });
    } else {
        zingchart.exec(oInfo.id, 'colorscale.clear', {
          graphid : oInfo.graphid    
        });
    }
});

zingchart.loadModules('heatmap,color-scale', function() {
  zingchart.render({
    id : 'zc',
    width : 960,
    height : 240,
    output : 'svg',
    data : cdata,
    modules : 'heatmap,color-scale'
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.