<!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>
#chrome50Overall,
#chrome50Detail {
min-height: 400px;
opacity: 0;
transition: opacity .3s;
}
#chrome50Overall.loaded,
#chrome50Detail.loaded {
opacity: 1;
}
#inputs {
background: #f7f7f7;
border: 1px solid #DDD;
border-top: none;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
font-family: Open Sans;
padding: 1rem 1rem;
margin: 0 0 1.5rem 0;
user-select: none;
width: 100%;
}
#inputs input {
height: auto;
}
#inputs label {
margin: 0 0 0 4px;
cursor: pointer;
transform: translateY(-2px);
}
.row {
max-width: 600px;
display: flex;
}
.row+.row {
margin-top: 1rem;
}
.col {
display: flex;
flex: 1;
}
</style>
</head>
<body class="zc-body">
<div id="chrome84Overall">
</div>
<div id="inputs">
<div class="row">
<div class="col">
<input type="checkbox" id="checkboxErrors84" checked>
<label for='checkboxErrors84'>84 Errors</label>
</div>
<div class="col">
<input type="checkbox" id="checkboxIps84" checked>
<label for="checkboxIps84">84 IP's</label>
</div>
<div class="col">
<input type="checkbox" id="checkboxErrors85">
<label for="checkboxErrors85">85 Errors</label>
</div>
<div class="col">
<input type="checkbox" id="checkboxIps85">
<label for="checkboxIps85">85 IP's</label>
</div>
</div>
</div>
<div id="chrome84Detail">
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
let chrome84Detail = 'chrome84Detail';
let chrome84Overall = 'chrome84Overall';
// Checkbox Ids
let checkboxErrors84 = 'checkboxErrors84';
let checkboxIps84 = 'checkboxIps84';
let checkboxErrors85 = 'checkboxErrors85';
let checkboxIps85 = 'checkboxIps85';
// CHART DATA
// -----------------------------
let lastIndex = null;
let totalUsage = [
74844938, 67916452, 85397784, 54840784, 71261006, 71914665, 69877920,
69797876, 64015606, 47538624, 53405488, 71237670, 69854483, 67229795,
65940984, 59888233, 46967265, 85144680, 63681846, 70527432, 97712043,
90345661, 67326277, 54836594, 59923602, 78117849, 73954211, 71816590,
72253684, 64360719, 84948147, 54739648, 69613566, 70720606, 72607842,
69859811, 64228413, 84706194, 58472683, 68672444, 77388533, 82989307,
80641084, 79055948, 62823593, 71047012,
];
let dates = [
1598659200000, 1598832000000, 1598918400000, 1599004800000, 1599091200000,
1599177600000, 1599264000000, 1599350400000, 1599436800000, 1599523200000,
1599609600000, 1599696000000, 1599782400000, 1599868800000, 1599955200000,
1600041600000, 1600128000000, 1600214400000, 1600300800000, 1600387200000,
1600473600000, 1600560000000, 1600646400000, 1600732800000, 1600819200000,
1600905600000, 1600992000000, 1601078400000, 1601164800000, 1601251200000,
1601337600000, 1601424000000, 1601510400000, 1601596800000,
];
// Chrome84
let chrome84 = {
errors: [
1987211, 2021396, 1319415, 1323925, 2113920, 2188253, 2170018, 2242853,
2177930, 1716637, 1705411, 2308796, 2346018, 2260725, 2144784, 1922230,
1461423, 1536246, 1758595, 2138455, 2180136, 2210526, 1886849, 1319023,
1496247, 1924003, 1932682, 1657985, 990855, 567546, 428471, 281371, 383746,
287059, 274365, 271813, 160613, 92252, 122070, 122713, 117868, 147609,
114567, 78055, 56243, 68693,
],
ips: [
326981, 188499, 141138, 188086, 188172, 308552, 348591, 164533, 191780,
202985, 138117, 244959, 290445, 169790, 233407, 179223, 128217, 126069,
189766, 185304, 392733, 207176, 194674, 116104, 136448, 169075, 156413,
185558, 69164, 41741, 34424, 19603, 34582, 28694, 25430, 22227, 22204, 9195,
13378, 14607, 22537, 14738, 18576, 17979, 8901, 6580,
],
};
chrome84.errorsOverall = chrome84.errors.reduce(combine);
chrome84.ipsOverall = chrome84.ips.reduce(combine);
// Chrome85
let chrome85 = {
errors: [
6844, 10334, 78449, 111280, 76589, 89109, 104457, 134231, 166989, 153959,
209849, 204582, 208316, 313541, 408221, 497291, 995646, 1310197, 1274536,
1120691, 1579763, 1634092, 1852177, 1865755, 1679352, 1496063, 1575591,
1994408, 2136103, 1930382, 2231977, 1887391, 1468535, 1543169,
],
ips: [
1089, 1936, 7473, 15217, 9618, 8606, 16459, 20271, 18850, 25662, 32633,
15639, 17965, 44984, 53072, 49306, 68848, 112911, 109622, 116628, 270445,
172383, 230430, 177202, 297868, 153620, 160157, 230393, 269336, 272074,
137277, 209094, 193838, 259192,
],
};
// CHART CONFIG
// -----------------------------
// Chrome 84
let chrome84_overall = {
type: 'area',
globals: {
fontFamily: 'Open Sans',
},
border: '1px solid #ddd',
title: {
text: 'Chrome 84 & 85: Errors vs IPs',
backgroundColor: 'rgb(247, 247, 247)',
border: '1px solid #ddd',
color: 'rgb(44, 84, 55)',
fontSize: '18px',
height: '40px',
padding: '10px',
textAlign: 'left',
},
legend: {
marginTop: '61px',
toggleAction: 'none',
},
plot: {
tooltip: {
visible: false,
},
alphaArea: 1,
marker: {
visible: false,
},
},
plotarea: {
margin: '62px 52px 52px',
},
scaleY: {
short: true,
},
scaleX: {
values: dates,
transform: {
type: 'date',
all: '%dd-%M-%y (%D)',
},
markers: [{
type: 'line',
lineColor: '#2196F3',
lineWidth: '4px',
range: [13],
label: {
angle: 0,
backgroundColor: '#2196F3',
color: '#FFF',
offsetX: '-58px',
offsetY: '-285px',
padding: '5px',
text: 'Chrome 85 Released',
},
},
{
alpha: 0.1,
backgroundColor: '#000',
type: 'area',
range: [2, 3],
},
{
alpha: 0.1,
backgroundColor: '#000',
type: 'area',
range: [9, 10],
},
{
alpha: 0.1,
backgroundColor: '#000',
type: 'area',
range: [16, 17],
},
{
alpha: 0.1,
backgroundColor: '#000',
type: 'area',
range: [23, 24],
},
{
alpha: 0.1,
backgroundColor: '#000',
type: 'area',
range: [30, 31],
},
{
alpha: 0.1,
backgroundColor: '#000',
type: 'area',
range: [37, 38],
},
],
},
series: [{
text: 'Errors',
values: chrome84.errors,
backgroundColor: '#3cba54',
legendItem: {
text: 'Chrome 84 Errors',
},
lineColor: '#3cba54',
lineWidth: '0px',
},
{
text: 'IPs',
values: chrome84.ips,
backgroundColor: '#f4c20d',
legendItem: {
text: 'Chrome 84 IPs',
},
lineColor: '#f4c20d',
lineWidth: '0px',
},
{
text: 'Errors',
values: chrome85.errors,
backgroundColor: '#db3236',
legendItem: {
text: 'Chrome 85 Errors',
},
lineColor: '#db3236',
lineWidth: '0px',
visible: false,
},
{
text: 'IPs',
values: chrome85.ips,
backgroundColor: '#2196F3',
legendItem: {
text: 'Chrome 85 IPs',
},
lineColor: '#2196F3',
lineWidth: '0px',
visible: false,
},
],
mediaRules: [{
maxWidth: '700px',
legend: {
visible: false,
},
}, ],
crosshairX: {
plotLabel: {
backgroundColor: '#FFF',
border: '1px solid #ddd',
fontSize: '16px',
thousandsSeparator: ',',
padding: '5px',
},
},
};
// Chrome 84
let chrome84_detail = {
type: 'pie',
globals: {
fontFamily: 'Open Sans',
},
border: '1px solid #ddd',
title: {
backgroundColor: 'rgb(247, 247, 247)',
border: '1px solid #ddd',
color: 'rgb(44, 84, 55)',
fontSize: '18px',
height: '40px',
padding: '10px',
text: 'Chrome 84 & 85 Details - Errors vs IPs',
textAlign: 'left',
},
subtitle: {
text: 'Overall',
textAlign: 'left',
x: '6px',
y: '40px',
},
legend: {
visible: false,
toggleAction: 'remove',
},
plot: {
tooltip: {
visible: false,
},
valueBox: {
text: '%t: %v',
visible: true,
placement: 'out',
fontSize: '11px',
thousandsSeparator: ',',
offsetR: '15px',
rules: [{
rule: '%p == 0',
placement: 'center',
offsetY: '-17px',
},
{
rule: '%p == 1',
placement: 'center',
offsetY: '-7px',
},
{
rule: '%p == 2',
placement: 'center',
offsetY: '7px',
},
{
rule: '%p == 3',
placement: 'center',
offsetY: '17px',
},
],
},
slice: 70,
},
plotarea: {
margin: '62px 52px 52px',
},
series: [{
text: 'Errors',
values: [chrome84.errorsOverall],
backgroundColor: '#3cba54',
},
{
text: 'IPs',
values: [chrome84.ipsOverall],
backgroundColor: '#f4c20d',
},
{
text: 'Errors',
values: [chrome85.errorsOverall],
backgroundColor: '#db3236',
visible: false,
},
{
text: 'IPs',
values: [chrome85.ipsOverall],
backgroundColor: '#2196F3',
visible: false,
},
],
};
// RENDER CHART
// -----------------------------
// AREA
// Render area chart
zingchart.render({
id: chrome84Overall,
data: {
gui: {
behaviors: [{
id: 'Reload',
enabled: 'none',
}, ],
},
graphset: [chrome84_overall],
},
height: '400px',
width: '100%',
events: {
// lets update the ring chart based on where we are hovering
guide_mousemove: function(p) {
// If it's a new index...
if ((lastIndex && lastIndex !== p.items[0].nodeindex) || !lastIndex) {
// Update the last index
lastIndex = p.items[0].nodeindex;
let detailJSON = zingchart.exec(chrome84Detail, 'getdata');
for (let i = 0; i < p.items.length; i++) {
detailJSON.graphset[0].series[p.items[i].plotindex].values = [
p.items[i].value,
];
}
detailJSON.graphset[0].subtitle.text = new Date(
p.items[0].keyvalue
).toDateString();
zingchart.exec(chrome84Detail, 'setdata', {
data: detailJSON,
});
}
},
load: loaded(chrome84Overall),
},
});
// RING
// Render ring chart
zingchart.render({
id: chrome84Detail,
data: {
gui: {
behaviors: [{
id: 'Reload',
enabled: 'none',
}, ],
},
graphset: [chrome84_detail],
},
height: '400px',
width: '100%',
events: {
load: loaded(chrome84Detail),
},
});
// CHECKBOX TOGGLE EVENTS
// -----------------------------
document
.getElementById(checkboxErrors84)
.addEventListener('click', toggleGraphs);
document.getElementById(checkboxIps84).addEventListener('click', toggleGraphs);
document
.getElementById(checkboxErrors85)
.addEventListener('click', toggleGraphs);
document.getElementById(checkboxIps85).addEventListener('click', toggleGraphs);
// UPDATE THE CHART
// -----------------------------
let updateArray = [{
visible: true
},
{
visible: true
},
{
visible: false
},
{
visible: false
},
];
// CHART RENDERED
// -----------------------------
// Set CSS class to show chart after render
function loaded(id) {
let chart = document.querySelector('#' + id);
chart.classList.add('loaded');
}
// HELPER FNS
// -----------------------------
// Checkbox click handler
function toggleGraphs() {
let plotIndex = 0;
// Determine plot index
switch (this.id) {
case checkboxErrors84:
plotIndex = 0;
break;
case checkboxIps84:
plotIndex = 1;
break;
case checkboxErrors85:
plotIndex = 2;
break;
case checkboxIps85:
plotIndex = 3;
break;
}
// Toggle array boolean state
updateArray[plotIndex].visible = this.checked;
// Update the chart
zingchart.exec(chrome84Overall, 'appendseriesdata', {
data: updateArray,
});
zingchart.exec(chrome84Detail, 'appendseriesdata', {
data: updateArray,
});
}
// Combine 2 values
function combine(a, b) {
return a + b;
}
</script>
</body>
</html>
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
let chrome84Detail = 'chrome84Detail';
let chrome84Overall = 'chrome84Overall';
// Checkbox Ids
let checkboxErrors84 = 'checkboxErrors84';
let checkboxIps84 = 'checkboxIps84';
let checkboxErrors85 = 'checkboxErrors85';
let checkboxIps85 = 'checkboxIps85';
// CHART DATA
// -----------------------------
let lastIndex = null;
let totalUsage = [
74844938, 67916452, 85397784, 54840784, 71261006, 71914665, 69877920,
69797876, 64015606, 47538624, 53405488, 71237670, 69854483, 67229795,
65940984, 59888233, 46967265, 85144680, 63681846, 70527432, 97712043,
90345661, 67326277, 54836594, 59923602, 78117849, 73954211, 71816590,
72253684, 64360719, 84948147, 54739648, 69613566, 70720606, 72607842,
69859811, 64228413, 84706194, 58472683, 68672444, 77388533, 82989307,
80641084, 79055948, 62823593, 71047012,
];
let dates = [
1598659200000, 1598832000000, 1598918400000, 1599004800000, 1599091200000,
1599177600000, 1599264000000, 1599350400000, 1599436800000, 1599523200000,
1599609600000, 1599696000000, 1599782400000, 1599868800000, 1599955200000,
1600041600000, 1600128000000, 1600214400000, 1600300800000, 1600387200000,
1600473600000, 1600560000000, 1600646400000, 1600732800000, 1600819200000,
1600905600000, 1600992000000, 1601078400000, 1601164800000, 1601251200000,
1601337600000, 1601424000000, 1601510400000, 1601596800000,
];
// Chrome84
let chrome84 = {
errors: [
1987211, 2021396, 1319415, 1323925, 2113920, 2188253, 2170018, 2242853,
2177930, 1716637, 1705411, 2308796, 2346018, 2260725, 2144784, 1922230,
1461423, 1536246, 1758595, 2138455, 2180136, 2210526, 1886849, 1319023,
1496247, 1924003, 1932682, 1657985, 990855, 567546, 428471, 281371, 383746,
287059, 274365, 271813, 160613, 92252, 122070, 122713, 117868, 147609,
114567, 78055, 56243, 68693,
],
ips: [
326981, 188499, 141138, 188086, 188172, 308552, 348591, 164533, 191780,
202985, 138117, 244959, 290445, 169790, 233407, 179223, 128217, 126069,
189766, 185304, 392733, 207176, 194674, 116104, 136448, 169075, 156413,
185558, 69164, 41741, 34424, 19603, 34582, 28694, 25430, 22227, 22204, 9195,
13378, 14607, 22537, 14738, 18576, 17979, 8901, 6580,
],
};
chrome84.errorsOverall = chrome84.errors.reduce(combine);
chrome84.ipsOverall = chrome84.ips.reduce(combine);
// Chrome85
let chrome85 = {
errors: [
6844, 10334, 78449, 111280, 76589, 89109, 104457, 134231, 166989, 153959,
209849, 204582, 208316, 313541, 408221, 497291, 995646, 1310197, 1274536,
1120691, 1579763, 1634092, 1852177, 1865755, 1679352, 1496063, 1575591,
1994408, 2136103, 1930382, 2231977, 1887391, 1468535, 1543169,
],
ips: [
1089, 1936, 7473, 15217, 9618, 8606, 16459, 20271, 18850, 25662, 32633,
15639, 17965, 44984, 53072, 49306, 68848, 112911, 109622, 116628, 270445,
172383, 230430, 177202, 297868, 153620, 160157, 230393, 269336, 272074,
137277, 209094, 193838, 259192,
],
};
// CHART CONFIG
// -----------------------------
// Chrome 84
let chrome84_overall = {
type: 'area',
globals: {
fontFamily: 'Open Sans',
},
border: '1px solid #ddd',
title: {
text: 'Chrome 84 & 85: Errors vs IPs',
backgroundColor: 'rgb(247, 247, 247)',
border: '1px solid #ddd',
color: 'rgb(44, 84, 55)',
fontSize: '18px',
height: '40px',
padding: '10px',
textAlign: 'left',
},
legend: {
marginTop: '61px',
toggleAction: 'none',
},
plot: {
tooltip: {
visible: false,
},
alphaArea: 1,
marker: {
visible: false,
},
},
plotarea: {
margin: '62px 52px 52px',
},
scaleY: {
short: true,
},
scaleX: {
values: dates,
transform: {
type: 'date',
all: '%dd-%M-%y (%D)',
},
markers: [
{
type: 'line',
lineColor: '#2196F3',
lineWidth: '4px',
range: [13],
label: {
angle: 0,
backgroundColor: '#2196F3',
color: '#FFF',
offsetX: '-58px',
offsetY: '-285px',
padding: '5px',
text: 'Chrome 85 Released',
},
},
{
alpha: 0.1,
backgroundColor: '#000',
type: 'area',
range: [2, 3],
},
{
alpha: 0.1,
backgroundColor: '#000',
type: 'area',
range: [9, 10],
},
{
alpha: 0.1,
backgroundColor: '#000',
type: 'area',
range: [16, 17],
},
{
alpha: 0.1,
backgroundColor: '#000',
type: 'area',
range: [23, 24],
},
{
alpha: 0.1,
backgroundColor: '#000',
type: 'area',
range: [30, 31],
},
{
alpha: 0.1,
backgroundColor: '#000',
type: 'area',
range: [37, 38],
},
],
},
series: [
{
text: 'Errors',
values: chrome84.errors,
backgroundColor: '#3cba54',
legendItem: {
text: 'Chrome 84 Errors',
},
lineColor: '#3cba54',
lineWidth: '0px',
},
{
text: 'IPs',
values: chrome84.ips,
backgroundColor: '#f4c20d',
legendItem: {
text: 'Chrome 84 IPs',
},
lineColor: '#f4c20d',
lineWidth: '0px',
},
{
text: 'Errors',
values: chrome85.errors,
backgroundColor: '#db3236',
legendItem: {
text: 'Chrome 85 Errors',
},
lineColor: '#db3236',
lineWidth: '0px',
visible: false,
},
{
text: 'IPs',
values: chrome85.ips,
backgroundColor: '#2196F3',
legendItem: {
text: 'Chrome 85 IPs',
},
lineColor: '#2196F3',
lineWidth: '0px',
visible: false,
},
],
mediaRules: [
{
maxWidth: '700px',
legend: {
visible: false,
},
},
],
crosshairX: {
plotLabel: {
backgroundColor: '#FFF',
border: '1px solid #ddd',
fontSize: '16px',
thousandsSeparator: ',',
padding: '5px',
},
},
};
// Chrome 84
let chrome84_detail = {
type: 'pie',
globals: {
fontFamily: 'Open Sans',
},
border: '1px solid #ddd',
title: {
backgroundColor: 'rgb(247, 247, 247)',
border: '1px solid #ddd',
color: 'rgb(44, 84, 55)',
fontSize: '18px',
height: '40px',
padding: '10px',
text: 'Chrome 84 & 85 Details - Errors vs IPs',
textAlign: 'left',
},
subtitle: {
text: 'Overall',
textAlign: 'left',
x: '6px',
y: '40px',
},
legend: {
visible: false,
toggleAction: 'remove',
},
plot: {
tooltip: {
visible: false,
},
valueBox: {
text: '%t: %v',
visible: true,
placement: 'out',
fontSize: '11px',
thousandsSeparator: ',',
offsetR: '15px',
rules: [
{
rule: '%p == 0',
placement: 'center',
offsetY: '-17px',
},
{
rule: '%p == 1',
placement: 'center',
offsetY: '-7px',
},
{
rule: '%p == 2',
placement: 'center',
offsetY: '7px',
},
{
rule: '%p == 3',
placement: 'center',
offsetY: '17px',
},
],
},
slice: 70,
},
plotarea: {
margin: '62px 52px 52px',
},
series: [
{
text: 'Errors',
values: [chrome84.errorsOverall],
backgroundColor: '#3cba54',
},
{
text: 'IPs',
values: [chrome84.ipsOverall],
backgroundColor: '#f4c20d',
},
{
text: 'Errors',
values: [chrome85.errorsOverall],
backgroundColor: '#db3236',
visible: false,
},
{
text: 'IPs',
values: [chrome85.ipsOverall],
backgroundColor: '#2196F3',
visible: false,
},
],
};
// RENDER CHART
// -----------------------------
// AREA
// Render area chart
zingchart.render({
id: chrome84Overall,
data: {
gui: {
behaviors: [
{
id: 'Reload',
enabled: 'none',
},
],
},
graphset: [chrome84_overall],
},
height: '400px',
width: '100%',
events: {
// lets update the ring chart based on where we are hovering
guide_mousemove: function (p) {
// If it's a new index...
if ((lastIndex && lastIndex !== p.items[0].nodeindex) || !lastIndex) {
// Update the last index
lastIndex = p.items[0].nodeindex;
let detailJSON = zingchart.exec(chrome84Detail, 'getdata');
for (let i = 0; i < p.items.length; i++) {
detailJSON.graphset[0].series[p.items[i].plotindex].values = [
p.items[i].value,
];
}
detailJSON.graphset[0].subtitle.text = new Date(
p.items[0].keyvalue
).toDateString();
zingchart.exec(chrome84Detail, 'setdata', {
data: detailJSON,
});
}
},
load: loaded(chrome84Overall),
},
});
// RING
// Render ring chart
zingchart.render({
id: chrome84Detail,
data: {
gui: {
behaviors: [
{
id: 'Reload',
enabled: 'none',
},
],
},
graphset: [chrome84_detail],
},
height: '400px',
width: '100%',
events: {
load: loaded(chrome84Detail),
},
});
// CHECKBOX TOGGLE EVENTS
// -----------------------------
document
.getElementById(checkboxErrors84)
.addEventListener('click', toggleGraphs);
document.getElementById(checkboxIps84).addEventListener('click', toggleGraphs);
document
.getElementById(checkboxErrors85)
.addEventListener('click', toggleGraphs);
document.getElementById(checkboxIps85).addEventListener('click', toggleGraphs);
// UPDATE THE CHART
// -----------------------------
let updateArray = [
{ visible: true },
{ visible: true },
{ visible: false },
{ visible: false },
];
// CHART RENDERED
// -----------------------------
// Set CSS class to show chart after render
function loaded(id) {
let chart = document.querySelector('#' + id);
chart.classList.add('loaded');
}
// HELPER FNS
// -----------------------------
// Checkbox click handler
function toggleGraphs() {
let plotIndex = 0;
// Determine plot index
switch (this.id) {
case checkboxErrors84:
plotIndex = 0;
break;
case checkboxIps84:
plotIndex = 1;
break;
case checkboxErrors85:
plotIndex = 2;
break;
case checkboxIps85:
plotIndex = 3;
break;
}
// Toggle array boolean state
updateArray[plotIndex].visible = this.checked;
// Update the chart
zingchart.exec(chrome84Overall, 'appendseriesdata', {
data: updateArray,
});
zingchart.exec(chrome84Detail, 'appendseriesdata', {
data: updateArray,
});
}
// Combine 2 values
function combine(a, b) {
return a + b;
}
