<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" 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 nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/temperatures2000.js'></script>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let chartConfig = {
type: 'line',
flat: true,
title: {
text: 'Average Temperatures (by hour) in 2001',
align: 'left',
fontSize: '11px',
paddingLeft: '50px',
},
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: '15px',
height: '145px',
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',
},
},
plot: {
tooltip: {
padding: '5 10',
fontSize: '11px',
align: 'left',
callout: true,
calloutWidth: '10px',
calloutHeight: '6px',
calloutPosition: 'bottom',
},
},
plotarea: {
margin: '30 60 40 50',
},
scaleX: {
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: '10px',
},
guide: {
visible: false,
},
offset: 1,
used: true,
zooming: true,
},
scaleY: {
decimals: 0,
fixedStep: true,
format: '%v:00',
guide: {
visible: false,
},
item: {
fontSize: '10px',
},
maxItems: 4,
maxValue: 23,
minValue: 0,
offset: 4,
step: 1,
zooming: true,
},
series: [{}],
scrollX: {},
scrollY: {},
};
zingchart.bind('myChart', 'load', function() {
let 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: chartConfig,
modules: 'heatmap,color-scale',
});
});
</script>
</body>
</html>
let chartConfig = {
type: 'line',
flat: true,
title: {
text: 'Average Temperatures (by hour) in 2001',
align: 'left',
fontSize: '11px',
paddingLeft: '50px',
},
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: '15px',
height: '145px',
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',
},
},
plot: {
tooltip: {
padding: '5 10',
fontSize: '11px',
align: 'left',
callout: true,
calloutWidth: '10px',
calloutHeight: '6px',
calloutPosition: 'bottom',
},
},
plotarea: {
margin: '30 60 40 50',
},
scaleX: {
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: '10px',
},
guide: {
visible: false,
},
offset: 1,
used: true,
zooming: true,
},
scaleY: {
decimals: 0,
fixedStep: true,
format: '%v:00',
guide: {
visible: false,
},
item: {
fontSize: '10px',
},
maxItems: 4,
maxValue: 23,
minValue: 0,
offset: 4,
step: 1,
zooming: true,
},
series: [{}],
scrollX: {},
scrollY: {},
};
zingchart.bind('myChart', 'load', function () {
let 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: chartConfig,
modules: 'heatmap,color-scale',
});
});
