<!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>
<!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> </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> </body> </html>
.zc-body { background: #fff; } .chart--container { height: 100%; width: 100%; min-height: 530px; } .zc-ref { display: none; }
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', }); });