<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.rawgit.com/zingchart-demos/dwa-module/master/dwa-module.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
#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);
font-family: Open Sans;
padding: 1rem 1rem;
margin: 0 0 1.5rem 0;
max-width: 600px;
width: 100%;
}
label {
cursor: pointer;
}
.row {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.row+.row {
margin-top: 1rem;
}
.col {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
</style>
</head>
<body>
<div id='browsers-overall'></div>
<div id="inputs">
<div class="row">
<div class="col">
<input type="checkbox" id='ips-checkbox-46' checked>
<label for='ips-checkbox-46'>FF 46 IP's</label>
</div>
<div class="col">
<input type="checkbox" id='errors-checkbox-46' checked>
<label for='errors-checkbox-46'>FF 46 Errors</label>
</div>
<div class="col">
<input type="checkbox" id='ips-checkbox-47'>
<label for='ips-checkbox-47'>FF 47 IP's</label>
</div>
<div class="col">
<input type="checkbox" id='errors-checkbox-47'>
<label for='errors-checkbox-47'>FF 47 Errors</label>
</div>
</div>
<div class="row">
<div class="col">
<input type="checkbox" id='ips-checkbox-50' checked>
<label for='ips-checkbox-50'>GC 50 IP's</label>
</div>
<div class="col">
<input type="checkbox" id='errors-checkbox-50' checked>
<label for='ips-checkbox-50'>GC 50 Errors</label>
</div>
<div class="col">
<input type="checkbox" id='ips-checkbox-51'>
<label for='ips-checkbox-51'>GC 51 IP's</label>
</div>
<div class="col">
<input type="checkbox" id='errors-checkbox-51'>
<label for='errors-checkbox-51'>GC 51 Errors</label>
</div>
</div>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var lastIndex = null;
var dates = [1463097600000, 1463184000000, 1463270400000, 1463356800000, 1463443200000, 1463529600000, 1463616000000, 1463702400000, 1463788800000, 1463875200000, 1463961600000, 1464048000000, 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];
var chrome50 = {
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],
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]
};
var chrome51 = {
ips: [null, null, null, null, null, null, null, null, null, null, null, null, 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],
errors: [null, null, null, null, null, null, null, null, null, null, null, null, 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]
}
var ff47 = {
ips: [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 1760, 1521, 9536, 17108, 21630, 24546, 34635, 56174, 66223, 96505, 49468, 67611, 54284, 75652, 54546, 48764, 70349, 115215, 60370, 58427, 45899],
errors: [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 8210, 11169, 66456, 127063, 212732, 276359, 394463, 497394, 598650, 649893, 613827, 552797, 465394, 407681, 571281, 619941, 672898, 818924, 644163, 623913, 539337]
};
var ff46 = {
ips: [105033, 68639, 70514, 52033, 54284, 55281, 65646, 129225, 57026, 80650, 68431, 67611, 58808, 98828, 52697, 66024, 81819, 36537, 18449, 14476, 16947, 13129, 18601, 9601, 10010, 6721, 9076, 7183, 4481, 4163, 6329, 4627, 2273, 2446],
errors: [581709, 599207, 560855, 577347, 450640, 502702, 673812, 648815, 681907, 678205, 680293, 584835, 609466, 716579, 731340, 656795, 438526, 342905, 228377, 147886, 159924, 132810, 142360, 108443, 58452, 61142, 54958, 75664, 56928, 41196, 32403, 29316, 22534, 18591]
};
var browsers_overall = {
globals: {
fontFamily: 'Open Sans'
},
border: '1px solid #ddd',
plot: {
stacked: true,
marker: {
visible: false
},
tooltip: {
visible: false
},
alphaArea: 1
},
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: 'Browser Performance: Errors vs IPs',
textAlign: 'left'
},
type: 'area',
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: -55,
offsetY: -280,
padding: 5,
text: 'Chrome 51 Released',
mediaRules: [{
maxWidth: 700,
text: '51 Release'
}]
},
},
{
type: 'line',
lineColor: '#FF9800',
lineWidth: 4,
range: [25],
label: {
angle: 0,
backgroundColor: '#FF9800',
color: '#FFF',
offsetX: -55,
offsetY: -275,
padding: 5,
text: 'Firefox 47 Released',
mediaRules: [{
maxWidth: 700,
text: '47 Release',
offsetX: -25
}]
}
},
{
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]
},
{
alpha: 0.1,
backgroundColor: '#000',
type: 'area',
range: [44, 45]
}
]
},
legend: {
toggleAction: 'none'
},
mediaRules: [{
maxWidth: 700,
legend: {
visible: false
}
}],
crosshairX: {
plotLabel: {
backgroundColor: '#FFF',
border: '1px solid #ddd',
fontSize: 16,
thousandsSeparator: ','
}
},
series: [
// Firefox 46 =============
{
backgroundColor: '#0095DD',
color: '#0095DD',
lineColor: '#0095DD',
lineWidth: 0,
text: 'Firefox 46 IPs',
values: ff46.ips
},
{
backgroundColor: '#00539F',
color: '#00539F',
lineColor: '#00539F',
lineWidth: 0,
text: 'Firefox 46 Errors',
values: ff46.errors
},
// Firefox 47 =============
{
backgroundColor: '#FF9500',
color: '#FF9500',
lineColor: '#FF9500',
lineWidth: 0,
text: 'Firefox 47 IPs',
values: ff47.ips,
visible: false
},
{
backgroundColor: '#E66000',
color: '#E66000',
lineColor: '#E66000',
lineWidth: 0,
text: 'Firefox 47 Errors',
values: ff47.errors,
visible: false
},
// Chrome 50 ===============
{
backgroundColor: '#f4c20d',
color: '#f4c20d',
lineColor: '#f4c20d',
lineWidth: 0,
text: 'Chrome 50 IPs',
values: chrome50.ips
},
{
backgroundColor: '#3cba54',
color: '#3cba54',
lineColor: '#3cba54',
lineWidth: 0,
text: 'Chrome 50 Errors',
values: chrome50.errors
},
// Chrome 51 ===============
{
backgroundColor: '#2196F3',
color: '#2196F3',
lineColor: '#2196F3',
lineWidth: 0,
text: 'Chrome 51 IPs',
values: chrome51.ips,
visible: false
},
{
backgroundColor: '#db3236',
color: '#db3236',
lineColor: '#db3236',
lineWidth: 0,
text: 'Chrome 51 Errors',
values: chrome51.errors,
visible: false
},
],
labels: [
// {
// backgroundColor: '#212121',
// border: '1px solid #000000',
// borderRadius: 2,
// color: '#FFF',
// cursor: 'pointer',
// id: 'toggle-ips',
// text: 'IPs',
// width: 60,
// x: 350,
// y: 11
// },
// {
// backgroundColor: '#BDBDBD',
// border: '1px solid #757575',
// borderRadius: 2,
// color: '#FFF',
// cursor: 'pointer',
// id: 'toggle-errors',
// text: 'Errors',
// width: 60,
// x: 420,
// y: 11
// }
]
};
zingchart.render({
id: 'browsers-overall',
data: browsers_overall,
height: 400
});
// assign toggle switch event listeners
document.getElementById('errors-checkbox-46').addEventListener('click', toggleGraphs);
document.getElementById('ips-checkbox-46').addEventListener('click', toggleGraphs);
document.getElementById('errors-checkbox-47').addEventListener('click', toggleGraphs);
document.getElementById('ips-checkbox-47').addEventListener('click', toggleGraphs);
document.getElementById('errors-checkbox-50').addEventListener('click', toggleGraphs);
document.getElementById('ips-checkbox-50').addEventListener('click', toggleGraphs);
document.getElementById('errors-checkbox-51').addEventListener('click', toggleGraphs);
document.getElementById('ips-checkbox-51').addEventListener('click', toggleGraphs);
var updateArray = [{
visible: true
},
{
visible: true
},
{
visible: false
},
{
visible: false
},
{
visible: true
},
{
visible: true
},
{
visible: false
},
{
visible: false
}
];
function toggleGraphs() {
var plotIndex = 0;
//determine plot index
switch (this.id) {
case 'errors-checkbox-46':
plotIndex = 1;
break;
case 'ips-checkbox-46':
plotIndex = 0;
break;
case 'errors-checkbox-47':
plotIndex = 3;
break;
case 'ips-checkbox-47':
plotIndex = 2;
break;
case 'errors-checkbox-50':
plotIndex = 5;
break;
case 'ips-checkbox-50':
plotIndex = 4;
break;
case 'errors-checkbox-51':
plotIndex = 7;
break;
case 'ips-checkbox-51':
plotIndex = 6;
break;
}
if (this.checked) {
updateArray[plotIndex].visible = true;
zingchart.exec('browsers-overall', 'appendseriesdata', {
data: updateArray
});
} else {
updateArray[plotIndex].visible = false;
zingchart.exec('browsers-overall', 'appendseriesdata', {
data: updateArray
});
}
}
</script>
</body>
</html>
var lastIndex = null;
var dates = [1463097600000, 1463184000000, 1463270400000, 1463356800000, 1463443200000, 1463529600000, 1463616000000, 1463702400000, 1463788800000, 1463875200000, 1463961600000, 1464048000000, 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];
var chrome50 = {
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],
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]
};
var chrome51 = {
ips: [null, null, null, null, null, null, null, null, null, null, null, null, 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],
errors: [null, null, null, null, null, null, null, null, null, null, null, null, 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]
}
var ff47 = {
ips: [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 1760, 1521, 9536, 17108, 21630, 24546, 34635, 56174, 66223, 96505, 49468, 67611, 54284, 75652, 54546, 48764, 70349, 115215, 60370, 58427, 45899],
errors: [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 8210, 11169, 66456, 127063, 212732, 276359, 394463, 497394, 598650, 649893, 613827, 552797, 465394, 407681, 571281, 619941, 672898, 818924, 644163, 623913, 539337]
};
var ff46 = {
ips: [105033, 68639, 70514, 52033, 54284, 55281, 65646, 129225, 57026, 80650, 68431, 67611, 58808, 98828, 52697, 66024, 81819, 36537, 18449, 14476, 16947, 13129, 18601, 9601, 10010, 6721, 9076, 7183, 4481, 4163, 6329, 4627, 2273, 2446],
errors: [581709, 599207, 560855, 577347, 450640, 502702, 673812, 648815, 681907, 678205, 680293, 584835, 609466, 716579, 731340, 656795, 438526, 342905, 228377, 147886, 159924, 132810, 142360, 108443, 58452, 61142, 54958, 75664, 56928, 41196, 32403, 29316, 22534, 18591]
};
var browsers_overall = {
globals: {
fontFamily: 'Open Sans'
},
border: '1px solid #ddd',
plot: {
stacked: true,
marker: {
visible: false
},
tooltip: {
visible: false
},
alphaArea: 1
},
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: 'Browser Performance: Errors vs IPs',
textAlign: 'left'
},
type: 'area',
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: -55,
offsetY: -280,
padding: 5,
text: 'Chrome 51 Released',
mediaRules: [{
maxWidth: 700,
text: '51 Release'
}]
},
},
{
type: 'line',
lineColor: '#FF9800',
lineWidth: 4,
range: [25],
label: {
angle: 0,
backgroundColor: '#FF9800',
color: '#FFF',
offsetX: -55,
offsetY: -275,
padding: 5,
text: 'Firefox 47 Released',
mediaRules: [{
maxWidth: 700,
text: '47 Release',
offsetX: -25
}]
}
},
{
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]
},
{
alpha: 0.1,
backgroundColor: '#000',
type: 'area',
range: [44, 45]
}
]
},
legend: {
toggleAction: 'none'
},
mediaRules: [{
maxWidth: 700,
legend: {
visible: false
}
}],
crosshairX: {
plotLabel: {
backgroundColor: '#FFF',
border: '1px solid #ddd',
fontSize: 16,
thousandsSeparator: ','
}
},
series: [
// Firefox 46 =============
{
backgroundColor: '#0095DD',
color: '#0095DD',
lineColor: '#0095DD',
lineWidth: 0,
text: 'Firefox 46 IPs',
values: ff46.ips
},
{
backgroundColor: '#00539F',
color: '#00539F',
lineColor: '#00539F',
lineWidth: 0,
text: 'Firefox 46 Errors',
values: ff46.errors
},
// Firefox 47 =============
{
backgroundColor: '#FF9500',
color: '#FF9500',
lineColor: '#FF9500',
lineWidth: 0,
text: 'Firefox 47 IPs',
values: ff47.ips,
visible: false
},
{
backgroundColor: '#E66000',
color: '#E66000',
lineColor: '#E66000',
lineWidth: 0,
text: 'Firefox 47 Errors',
values: ff47.errors,
visible: false
},
// Chrome 50 ===============
{
backgroundColor: '#f4c20d',
color: '#f4c20d',
lineColor: '#f4c20d',
lineWidth: 0,
text: 'Chrome 50 IPs',
values: chrome50.ips
},
{
backgroundColor: '#3cba54',
color: '#3cba54',
lineColor: '#3cba54',
lineWidth: 0,
text: 'Chrome 50 Errors',
values: chrome50.errors
},
// Chrome 51 ===============
{
backgroundColor: '#2196F3',
color: '#2196F3',
lineColor: '#2196F3',
lineWidth: 0,
text: 'Chrome 51 IPs',
values: chrome51.ips,
visible: false
},
{
backgroundColor: '#db3236',
color: '#db3236',
lineColor: '#db3236',
lineWidth: 0,
text: 'Chrome 51 Errors',
values: chrome51.errors,
visible: false
},
],
labels: [
// {
// backgroundColor: '#212121',
// border: '1px solid #000000',
// borderRadius: 2,
// color: '#FFF',
// cursor: 'pointer',
// id: 'toggle-ips',
// text: 'IPs',
// width: 60,
// x: 350,
// y: 11
// },
// {
// backgroundColor: '#BDBDBD',
// border: '1px solid #757575',
// borderRadius: 2,
// color: '#FFF',
// cursor: 'pointer',
// id: 'toggle-errors',
// text: 'Errors',
// width: 60,
// x: 420,
// y: 11
// }
]
};
zingchart.render({
id: 'browsers-overall',
data: browsers_overall,
height: 400
});
// assign toggle switch event listeners
document.getElementById('errors-checkbox-46').addEventListener('click', toggleGraphs);
document.getElementById('ips-checkbox-46').addEventListener('click', toggleGraphs);
document.getElementById('errors-checkbox-47').addEventListener('click', toggleGraphs);
document.getElementById('ips-checkbox-47').addEventListener('click', toggleGraphs);
document.getElementById('errors-checkbox-50').addEventListener('click', toggleGraphs);
document.getElementById('ips-checkbox-50').addEventListener('click', toggleGraphs);
document.getElementById('errors-checkbox-51').addEventListener('click', toggleGraphs);
document.getElementById('ips-checkbox-51').addEventListener('click', toggleGraphs);
var updateArray = [{
visible: true
},
{
visible: true
},
{
visible: false
},
{
visible: false
},
{
visible: true
},
{
visible: true
},
{
visible: false
},
{
visible: false
}
];
function toggleGraphs() {
var plotIndex = 0;
//determine plot index
switch (this.id) {
case 'errors-checkbox-46':
plotIndex = 1;
break;
case 'ips-checkbox-46':
plotIndex = 0;
break;
case 'errors-checkbox-47':
plotIndex = 3;
break;
case 'ips-checkbox-47':
plotIndex = 2;
break;
case 'errors-checkbox-50':
plotIndex = 5;
break;
case 'ips-checkbox-50':
plotIndex = 4;
break;
case 'errors-checkbox-51':
plotIndex = 7;
break;
case 'ips-checkbox-51':
plotIndex = 6;
break;
}
if (this.checked) {
updateArray[plotIndex].visible = true;
zingchart.exec('browsers-overall', 'appendseriesdata', {
data: updateArray
});
} else {
updateArray[plotIndex].visible = false;
zingchart.exec('browsers-overall', 'appendseriesdata', {
data: updateArray
});
}
}