<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-body {
background: #fff;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/temperatures2000.js'></script>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
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('myChart', '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('myChart', 'heatmap.setdata', {
data: aData
});
});
zingchart.bind('myChart', '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: 'myChart',
width: '100%',
height: '100%',
data: cdata,
modules: 'heatmap,color-scale'
});
});
</script>
</body>
</html>
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('myChart', '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('myChart', 'heatmap.setdata', {
data : aData
});
});
zingchart.bind('myChart', '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 : 'myChart',
width : '100%',
height : '100%',
data : cdata,
modules : 'heatmap,color-scale'
});
});
