<!DOCTYPE html>
<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>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
let chartId = 'myChart';
// VARS
// -----------------------------
let N = 250000,
n,
x,
y,
v;
zingchart.TIMEOUT = 1;
// CHART CONFIG
// -----------------------------
let chartConfig = {
flat: true,
type: 'scatter',
heatmap: {
tooltip: {
text: '[%scale-key-value / %scale-value-value]: %value',
callout: true,
calloutHeight: 6,
calloutPosition: 'bottom',
jsRule: 'myHeatmapTooltipJsRule()',
},
brushType: 'square',
alpha: 1,
async: true,
blur: 0,
gradientColors: '#fff #900 #090 #009 #909',
gradientStops: '0 0.25 0.5 0.75 1',
graph: true,
size: 2,
},
plot: {},
plotarea: {
margin: '40px',
},
scaleX: {
values: '0:1000:0.1',
guide: {
visible: false,
},
item: {
fontSize: '9px',
},
normalize: 1,
offset: 0,
zooming: 1,
zoomSnap: true,
},
scaleY: {
values: '0:100:1',
guide: {
visible: false,
},
item: {
fontSize: '9px',
},
normalize: 1,
offset: 0,
zooming: 1,
zoomSnap: true,
},
zoom: {
label: {},
},
series: [{}],
};
// RENDER CHARTS
// -----------------------------
zingchart.bind(chartId, 'load', function() {
console.time('data-generation');
let aData = new Array(N * 4);
for (n = 0; n < N; n++) {
x = ZC._r_(0, 100000) / 100;
y = 50 + (ZC._r_(100, 800 * Math.sin(x / 100)) / 10) * Math.cos(x / 50);
v = 1;
aData[N * 0 + n] = [
parseFloat(x.toFixed(1)),
parseFloat(y.toFixed(1)),
v,
{
text: 'Apple',
color: '#900'
},
];
}
for (n = 0; n < N; n++) {
x = ZC._r_(0, 150000) / 150;
y = 50 + (ZC._r_(200, 600 * Math.sin(x / 150)) / 10) * Math.cos(x / 100);
v = 2;
aData[N * 1 + n] = [
parseFloat(x.toFixed(1)),
parseFloat(y.toFixed(1)),
v,
{
text: 'Dell',
color: '#090'
},
];
}
for (n = 0; n < N; n++) {
x = ZC._r_(0, 90000) / 90;
y = 30 + (ZC._r_(300, 500 * Math.sin(x / 110)) / 10) * Math.cos(x / 120);
v = 3;
aData[N * 2 + n] = [
parseFloat(x.toFixed(1)),
parseFloat(y.toFixed(1)),
v,
{
text: 'Microsoft',
color: '#009'
},
];
}
for (n = 0; n < N; n++) {
x = ZC._r_(0, 200000) / 200;
y = 60 + (ZC._r_(100, 300 * Math.sin(x / 120)) / 10) * Math.cos(x / 80);
v = 4;
aData[N * 3 + n] = [
parseFloat(x.toFixed(1)),
parseFloat(y.toFixed(1)),
v,
{
text: 'IBM',
color: '#909'
},
];
}
console.timeEnd('data-generation');
zingchart.exec(chartId, 'heatmap.setdata', {
data: aData,
});
});
zingchart.loadModules('heatmap', function() {
zingchart.render({
id: chartId,
width: '100%',
height: '560px',
output: 'canvas',
data: chartConfig,
modules: 'heatmap',
});
});
// HELPER FNS
// -----------------------------
function myHeatmapTooltipJsRule(p, info) {
let obj = {};
if (info) {
obj['border-color'] = info['color'];
obj['text'] =
'<span style="font-weight:900;color:' +
info['color'] +
'">' +
info['text'] +
':</span> ' +
p['key'] +
'/' +
p['val'];
}
return obj;
}
</script>
</body>
</html>
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
let chartId = 'myChart';
// VARS
// -----------------------------
let N = 250000,
n,
x,
y,
v;
zingchart.TIMEOUT = 1;
// CHART CONFIG
// -----------------------------
let chartConfig = {
flat: true,
type: 'scatter',
heatmap: {
tooltip: {
text: '[%scale-key-value / %scale-value-value]: %value',
callout: true,
calloutHeight: 6,
calloutPosition: 'bottom',
jsRule: 'myHeatmapTooltipJsRule()',
},
brushType: 'square',
alpha: 1,
async: true,
blur: 0,
gradientColors: '#fff #900 #090 #009 #909',
gradientStops: '0 0.25 0.5 0.75 1',
graph: true,
size: 2,
},
plot: {},
plotarea: {
margin: '40px',
},
scaleX: {
values: '0:1000:0.1',
guide: {
visible: false,
},
item: {
fontSize: '9px',
},
normalize: 1,
offset: 0,
zooming: 1,
zoomSnap: true,
},
scaleY: {
values: '0:100:1',
guide: {
visible: false,
},
item: {
fontSize: '9px',
},
normalize: 1,
offset: 0,
zooming: 1,
zoomSnap: true,
},
zoom: {
label: {},
},
series: [{}],
};
// RENDER CHARTS
// -----------------------------
zingchart.bind(chartId, 'load', function () {
console.time('data-generation');
let aData = new Array(N * 4);
for (n = 0; n < N; n++) {
x = ZC._r_(0, 100000) / 100;
y = 50 + (ZC._r_(100, 800 * Math.sin(x / 100)) / 10) * Math.cos(x / 50);
v = 1;
aData[N * 0 + n] = [
parseFloat(x.toFixed(1)),
parseFloat(y.toFixed(1)),
v,
{ text: 'Apple', color: '#900' },
];
}
for (n = 0; n < N; n++) {
x = ZC._r_(0, 150000) / 150;
y = 50 + (ZC._r_(200, 600 * Math.sin(x / 150)) / 10) * Math.cos(x / 100);
v = 2;
aData[N * 1 + n] = [
parseFloat(x.toFixed(1)),
parseFloat(y.toFixed(1)),
v,
{ text: 'Dell', color: '#090' },
];
}
for (n = 0; n < N; n++) {
x = ZC._r_(0, 90000) / 90;
y = 30 + (ZC._r_(300, 500 * Math.sin(x / 110)) / 10) * Math.cos(x / 120);
v = 3;
aData[N * 2 + n] = [
parseFloat(x.toFixed(1)),
parseFloat(y.toFixed(1)),
v,
{ text: 'Microsoft', color: '#009' },
];
}
for (n = 0; n < N; n++) {
x = ZC._r_(0, 200000) / 200;
y = 60 + (ZC._r_(100, 300 * Math.sin(x / 120)) / 10) * Math.cos(x / 80);
v = 4;
aData[N * 3 + n] = [
parseFloat(x.toFixed(1)),
parseFloat(y.toFixed(1)),
v,
{ text: 'IBM', color: '#909' },
];
}
console.timeEnd('data-generation');
zingchart.exec(chartId, 'heatmap.setdata', {
data: aData,
});
});
zingchart.loadModules('heatmap', function () {
zingchart.render({
id: chartId,
width: '100%',
height: '560px',
output: 'canvas',
data: chartConfig,
modules: 'heatmap',
});
});
// HELPER FNS
// -----------------------------
function myHeatmapTooltipJsRule(p, info) {
let obj = {};
if (info) {
obj['border-color'] = info['color'];
obj['text'] =
'<span style="font-weight:900;color:' +
info['color'] +
'">' +
info['text'] +
':</span> ' +
p['key'] +
'/' +
p['val'];
}
return obj;
}
