<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script 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="chrome50Overall">
</div>
<div id="inputs">
<div class="row">
<div class="col">
<input type="checkbox" id="checkboxErrors50" checked>
<label for='checkboxErrors50'>50 Errors</label>
</div>
<div class="col">
<input type="checkbox" id="checkboxIps50" checked>
<label for="checkboxIps50">50 IP's</label>
</div>
<div class="col">
<input type="checkbox" id="checkboxErrors51">
<label for="checkboxErrors51">51 Errors</label>
</div>
<div class="col">
<input type="checkbox" id="checkboxIps51">
<label for="checkboxIps51">51 IP's</label>
</div>
</div>
</div>
<div id="chrome50Detail">
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
var chartId = 'myChart';
var chrome50Detail = 'chrome50Detail';
var chrome50Overall = 'chrome50Overall';
// Checkbox Ids
var checkboxErrors50 = 'checkboxErrors50';
var checkboxIps50 = 'checkboxIps50';
var checkboxErrors51 = 'checkboxErrors51';
var checkboxIps51 = 'checkboxIps51';
// CHART DATA
// -----------------------------
var lastIndex = null;
var totalUsage = [74844938, 67916452, 51397750, 54840784, 71261006, 71914665, 69877920, 69797876, 64015606, 47538624, 53405488, 71237670, 69854483, 67229795, 65940984, 59888233, 46967265, 51144680, 63681846, 70527432, 97712043, 90345661, 67326277, 54836594, 59923602, 78117849, 73954211, 71816590, 72253684, 64360719, 50948147, 54739648, 69613566, 70720606, 72607842, 69519811, 64228413, 50706194, 55072683, 68672444, 77385133, 82989307, 80641084, 79055948, 62823593, 71047012];
var dates = [1464134400000, 1464220800000, 1464307200000, 1464393600000, 1464480000000, 1464566400000, 1464652800000, 1464739200000, 1464825600000, 1464912000000, 1464998400000, 1465084800000, 1465171200000, 1465257600000, 1465344000000, 1465430400000, 1465516800000, 1465603200000, 1465689600000, 1465776000000, 1465862400000, 1465948800000, 1466035200000, 1466121600000, 1466208000000, 1466294400000, 1466380800000, 1466467200000, 1466553600000, 1466640000000, 1466726400000, 1466812800000, 1466899200000, 1466985600000];
// Chrome50
var chrome50 = {
errors: [1987211, 2021396, 1319415, 1323925, 2113920, 2188253, 2170018, 2242853, 2177930, 1716637, 1705411, 2308796, 2346018, 2260725, 2144784, 1922230, 1461423, 1536246, 1755195, 2138455, 2180136, 2210526, 1886849, 1319023, 1496247, 1924003, 1932682, 1657985, 990515, 567546, 428471, 281371, 383746, 287059, 274365, 271813, 160613, 92252, 122070, 122713, 117868, 147609, 114567, 78055, 56243, 68693],
ips: [326981, 185099, 141138, 188086, 188172, 308552, 348591, 164533, 191780, 202985, 138117, 244959, 290445, 169790, 233407, 179223, 128217, 126069, 189766, 151304, 392733, 207176, 194674, 116104, 136448, 169075, 156413, 151558, 69164, 41741, 34424, 19603, 34582, 28694, 25430, 22227, 22204, 9195, 13378, 14607, 22537, 14738, 15176, 17979, 8901, 6580]
};
chrome50.errorsOverall = chrome50.errors.reduce(combine);
chrome50.ipsOverall = chrome50.ips.reduce(combine);
// Chrome51
var chrome51 = {
errors: [6504, 10334, 75049, 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, 1465135, 1543169],
ips: [1089, 1936, 7473, 15217, 9618, 8606, 16459, 20271, 18510, 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 50
var chrome50_overall = {
type: "area",
globals: {
fontFamily: 'Open Sans'
},
border: '1px solid #ddd',
plot: {
alphaArea: 1,
marker: {
visible: false
},
tooltip: {
visible: false
}
},
plotarea: {
margin: '62px 52px 52px'
},
title: {
backgroundColor: 'rgb(247, 247, 247)',
border: '1px solid #ddd',
color: 'rgb(44, 50, 55)',
fontSize: 18,
height: 40,
padding: 10,
text: 'Chrome 50 & 51: Errors vs IPs',
textAlign: 'left'
},
legend: {
toggleAction: 'none',
marginTop: 61
},
mediaRules: [{
maxWidth: 700,
legend: {
visible: false
}
}],
scaleY: {
short: true
},
scaleX: {
values: dates,
transform: {
type: 'date',
all: '%dd-%M-%y (%D)'
},
markers: [{
type: 'line',
lineColor: '#2196F3',
lineWidth: 4,
range: [13],
label: {
angle: 0,
backgroundColor: '#2196F3',
color: '#FFF',
offsetX: -58,
offsetY: -285,
padding: 5,
text: 'Chrome 51 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]
}]
},
crosshairX: {
plotLabel: {
backgroundColor: '#FFF',
border: '1px solid #ddd',
fontSize: 16,
thousandsSeparator: ',',
padding: 5
}
},
series: [{
backgroundColor: '#3cba54',
lineColor: '#3cba54',
lineWidth: 0,
text: 'Errors',
values: chrome50.errors,
legendItem: {
text: 'Chrome 50 Errors'
}
}, {
backgroundColor: '#f4c20d',
lineColor: '#f4c20d',
lineWidth: 0,
text: 'IPs',
values: chrome50.ips,
legendItem: {
text: 'Chrome 50 IPs'
}
}, {
backgroundColor: '#db3236',
lineColor: '#db3236',
lineWidth: 0,
text: 'Errors',
values: chrome51.errors,
visible: false,
legendItem: {
text: 'Chrome 51 Errors'
}
}, {
backgroundColor: '#2196F3',
lineColor: '#2196F3',
lineWidth: 0,
text: 'IPs',
values: chrome51.ips,
visible: false,
legendItem: {
text: 'Chrome 51 IPs'
}
}]
};
// Chrome 50
var chrome50_detail = {
type: 'pie',
globals: {
fontFamily: 'Open Sans'
},
border: '1px solid #ddd',
plot: {
slice: 70,
valueBox: {
visible: true,
placement: 'out',
fontSize: 11,
thousandsSeparator: ',',
offsetR: 15,
text: '%t: %v',
rules: [{
rule: '%p == 0',
placement: 'center',
offsetY: -17
}, {
rule: '%p == 1',
placement: 'center',
offsetY: -7
}, {
rule: '%p == 2',
placement: 'center',
offsetY: 7
}, {
rule: '%p == 3',
placement: 'center',
offsetY: 17
}]
}
},
tooltip: {
visible: false
},
plotarea: {
margin: '62px 52px 52px'
},
title: {
backgroundColor: 'rgb(247, 247, 247)',
border: '1px solid #ddd',
color: 'rgb(44, 50, 55)',
fontSize: 18,
height: 40,
padding: 10,
text: 'Chrome 50 & 51 Details - Errors vs IPs',
textAlign: 'left'
},
subtitle: {
text: 'Overall',
textAlign: 'left',
x: 6,
y: 40
},
legend: {
visible: false,
toggleAction: 'remove'
},
series: [{
backgroundColor: '#3cba54',
text: 'Errors',
values: [chrome50.errorsOverall]
}, {
backgroundColor: '#f4c20d',
text: 'IPs',
values: [chrome50.ipsOverall]
}, {
backgroundColor: '#db3236',
text: 'Errors',
values: [chrome51.errorsOverall],
visible: false
}, {
backgroundColor: '#2196F3',
text: 'IPs',
values: [chrome51.ipsOverall],
visible: false
}]
};
// RENDER CHART
// -----------------------------
// AREA
// Render area chart
zingchart.render({
id: chrome50Overall,
data: {
gui: {
behaviors: [{
id: 'Reload',
enabled: 'none'
}]
},
graphset: [chrome50_overall]
},
height: 400,
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;
var detailJSON = zingchart.exec(chrome50Detail, 'getdata');
for (var 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(chrome50Detail, 'setdata', {
data: detailJSON
});
}
},
load: loaded(chrome50Overall)
}
});
// RING
// Render ring chart
zingchart.render({
id: chrome50Detail,
data: {
gui: {
behaviors: [{
id: 'Reload',
enabled: 'none'
}]
},
graphset: [chrome50_detail]
},
height: 400,
width: '100%',
events: {
load: loaded(chrome50Detail)
}
});
// CHECKBOX TOGGLE EVENTS
// -----------------------------
document.getElementById(checkboxErrors50).addEventListener('click', toggleGraphs);
document.getElementById(checkboxIps50).addEventListener('click', toggleGraphs);
document.getElementById(checkboxErrors51).addEventListener('click', toggleGraphs);
document.getElementById(checkboxIps51).addEventListener('click', toggleGraphs);
// UPDATE THE CHART
// -----------------------------
var updateArray = [{
visible: true
},
{
visible: true
},
{
visible: false
},
{
visible: false
}
];
// CHART RENDERED
// -----------------------------
// Set CSS class to show chart after render
function loaded(id) {
var chart = document.querySelector('#' + id);
chart.classList.add('loaded');
}
// HELPER FNS
// -----------------------------
// Checkbox click handler
function toggleGraphs() {
var plotIndex = 0;
// Determine plot index
switch (this.id) {
case checkboxErrors50:
plotIndex = 0;
break;
case checkboxIps50:
plotIndex = 1;
break;
case checkboxErrors51:
plotIndex = 2;
break;
case checkboxIps51:
plotIndex = 3;
break;
}
// Toggle array boolean state
updateArray[plotIndex].visible = this.checked;
// Update the chart
zingchart.exec(chrome50Overall, 'appendseriesdata', {
data: updateArray
});
zingchart.exec(chrome50Detail, 'appendseriesdata', {
data: updateArray
});
}
// Combine 2 values
function combine(a, b) {
return a + b;
}
</script>
</body>
</html>
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
var chartId = 'myChart';
var chrome50Detail = 'chrome50Detail';
var chrome50Overall = 'chrome50Overall';
// Checkbox Ids
var checkboxErrors50 = 'checkboxErrors50';
var checkboxIps50 = 'checkboxIps50';
var checkboxErrors51 = 'checkboxErrors51';
var checkboxIps51 = 'checkboxIps51';
// CHART DATA
// -----------------------------
var lastIndex = null;
var totalUsage = [74844938,67916452,51397750,54840784,71261006,71914665,69877920,69797876,64015606,47538624,53405488,71237670,69854483,67229795,65940984,59888233,46967265,51144680,63681846,70527432,97712043,90345661,67326277,54836594,59923602,78117849,73954211,71816590,72253684,64360719,50948147,54739648,69613566,70720606,72607842,69519811,64228413,50706194,55072683,68672444,77385133,82989307,80641084,79055948,62823593,71047012];
var dates = [1464134400000,1464220800000,1464307200000,1464393600000,1464480000000,1464566400000,1464652800000,1464739200000,1464825600000,1464912000000,1464998400000,1465084800000,1465171200000,1465257600000,1465344000000,1465430400000,1465516800000,1465603200000,1465689600000,1465776000000,1465862400000,1465948800000,1466035200000,1466121600000,1466208000000,1466294400000,1466380800000,1466467200000,1466553600000,1466640000000,1466726400000,1466812800000,1466899200000,1466985600000];
// Chrome50
var chrome50 = {
errors: [1987211,2021396,1319415,1323925,2113920,2188253,2170018,2242853,2177930,1716637,1705411,2308796,2346018,2260725,2144784,1922230,1461423,1536246,1755195,2138455,2180136,2210526,1886849,1319023,1496247,1924003,1932682,1657985,990515,567546,428471,281371,383746,287059,274365,271813,160613,92252,122070,122713,117868,147609,114567,78055,56243,68693],
ips: [326981,185099,141138,188086,188172,308552,348591,164533,191780,202985,138117,244959,290445,169790,233407,179223,128217,126069,189766,151304,392733,207176,194674,116104,136448,169075,156413,151558,69164,41741,34424,19603,34582,28694,25430,22227,22204,9195,13378,14607,22537,14738,15176,17979,8901,6580]
};
chrome50.errorsOverall = chrome50.errors.reduce(combine);
chrome50.ipsOverall = chrome50.ips.reduce(combine);
// Chrome51
var chrome51 = {
errors: [6504,10334,75049,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,1465135,1543169],
ips: [1089,1936,7473,15217,9618,8606,16459,20271,18510,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 50
var chrome50_overall = {
type: "area",
globals: {
fontFamily: 'Open Sans'
},
border: '1px solid #ddd',
plot: {
alphaArea: 1,
marker: {
visible: false
},
tooltip: {
visible: false
}
},
plotarea: {
margin: '62px 52px 52px'
},
title: {
backgroundColor: 'rgb(247, 247, 247)',
border: '1px solid #ddd',
color: 'rgb(44, 50, 55)',
fontSize: 18,
height: 40,
padding: 10,
text: 'Chrome 50 & 51: Errors vs IPs',
textAlign: 'left'
},
legend: {
toggleAction: 'none',
marginTop: 61
},
mediaRules: [{
maxWidth: 700,
legend: {
visible: false
}
}],
scaleY: {
short: true
},
scaleX: {
values: dates,
transform: {
type: 'date',
all: '%dd-%M-%y (%D)'
},
markers: [{
type: 'line',
lineColor: '#2196F3',
lineWidth: 4,
range: [13],
label: {
angle: 0,
backgroundColor: '#2196F3',
color: '#FFF',
offsetX: -58,
offsetY: -285,
padding: 5,
text: 'Chrome 51 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]
}]
},
crosshairX: {
plotLabel: {
backgroundColor: '#FFF',
border: '1px solid #ddd',
fontSize: 16,
thousandsSeparator: ',',
padding: 5
}
},
series: [{
backgroundColor: '#3cba54',
lineColor: '#3cba54',
lineWidth: 0,
text: 'Errors',
values: chrome50.errors,
legendItem: {
text: 'Chrome 50 Errors'
}
}, {
backgroundColor: '#f4c20d',
lineColor: '#f4c20d',
lineWidth: 0,
text: 'IPs',
values: chrome50.ips,
legendItem: {
text: 'Chrome 50 IPs'
}
}, {
backgroundColor: '#db3236',
lineColor: '#db3236',
lineWidth: 0,
text: 'Errors',
values: chrome51.errors,
visible: false,
legendItem: {
text: 'Chrome 51 Errors'
}
}, {
backgroundColor: '#2196F3',
lineColor: '#2196F3',
lineWidth: 0,
text: 'IPs',
values: chrome51.ips,
visible: false,
legendItem: {
text: 'Chrome 51 IPs'
}
}]
};
// Chrome 50
var chrome50_detail = {
type: 'pie',
globals: {
fontFamily: 'Open Sans'
},
border: '1px solid #ddd',
plot: {
slice: 70,
valueBox: {
visible: true,
placement: 'out',
fontSize: 11,
thousandsSeparator: ',',
offsetR: 15,
text: '%t: %v',
rules: [{
rule: '%p == 0',
placement: 'center',
offsetY: -17
}, {
rule: '%p == 1',
placement: 'center',
offsetY: -7
}, {
rule: '%p == 2',
placement: 'center',
offsetY: 7
}, {
rule: '%p == 3',
placement: 'center',
offsetY: 17
}]
}
},
tooltip: {
visible: false
},
plotarea: {
margin: '62px 52px 52px'
},
title: {
backgroundColor: 'rgb(247, 247, 247)',
border: '1px solid #ddd',
color: 'rgb(44, 50, 55)',
fontSize: 18,
height: 40,
padding: 10,
text: 'Chrome 50 & 51 Details - Errors vs IPs',
textAlign: 'left'
},
subtitle: {
text: 'Overall',
textAlign: 'left',
x: 6,
y: 40
},
legend: {
visible: false,
toggleAction: 'remove'
},
series: [{
backgroundColor: '#3cba54',
text: 'Errors',
values: [chrome50.errorsOverall]
}, {
backgroundColor: '#f4c20d',
text: 'IPs',
values: [chrome50.ipsOverall]
}, {
backgroundColor: '#db3236',
text: 'Errors',
values: [chrome51.errorsOverall],
visible: false
}, {
backgroundColor: '#2196F3',
text: 'IPs',
values: [chrome51.ipsOverall],
visible: false
}]
};
// RENDER CHART
// -----------------------------
// AREA
// Render area chart
zingchart.render({
id: chrome50Overall,
data: {
gui: {
behaviors: [{
id: 'Reload',
enabled: 'none'
}]
},
graphset: [chrome50_overall]
},
height: 400,
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;
var detailJSON = zingchart.exec(chrome50Detail, 'getdata');
for (var 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(chrome50Detail, 'setdata', {
data: detailJSON
});
}
},
load: loaded(chrome50Overall)
}
});
// RING
// Render ring chart
zingchart.render({
id: chrome50Detail,
data: {
gui: {
behaviors: [{
id: 'Reload',
enabled: 'none'
}]
},
graphset: [chrome50_detail]
},
height: 400,
width: '100%',
events: {
load: loaded(chrome50Detail)
}
});
// CHECKBOX TOGGLE EVENTS
// -----------------------------
document.getElementById(checkboxErrors50).addEventListener('click', toggleGraphs);
document.getElementById(checkboxIps50).addEventListener('click', toggleGraphs);
document.getElementById(checkboxErrors51).addEventListener('click', toggleGraphs);
document.getElementById(checkboxIps51).addEventListener('click', toggleGraphs);
// UPDATE THE CHART
// -----------------------------
var updateArray = [
{ visible: true },
{ visible: true },
{ visible: false },
{ visible: false }
];
// CHART RENDERED
// -----------------------------
// Set CSS class to show chart after render
function loaded(id) {
var chart = document.querySelector('#' + id);
chart.classList.add('loaded');
}
// HELPER FNS
// -----------------------------
// Checkbox click handler
function toggleGraphs() {
var plotIndex = 0;
// Determine plot index
switch (this.id) {
case checkboxErrors50: plotIndex = 0; break;
case checkboxIps50: plotIndex = 1; break;
case checkboxErrors51: plotIndex = 2; break;
case checkboxIps51: plotIndex = 3; break;
}
// Toggle array boolean state
updateArray[plotIndex].visible = this.checked;
// Update the chart
zingchart.exec(chrome50Overall, 'appendseriesdata', {
data: updateArray
});
zingchart.exec(chrome50Detail, 'appendseriesdata', {
data: updateArray
});
}
// Combine 2 values
function combine(a, b) { return a + b; }
