- <!DOCTYPE html>
- <html>
-
- <head>
- <meta charset="utf-8">
- <title>ZingSoft Demo</title>
- <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='firefox47-overall'></div>
-
- <div id="inputs">
- <div class="row">
- <div class="col">
- <input type="checkbox" id='errors-checkbox-46' checked>
- <label for='errors-checkbox-46'>46 Errors</label>
- </div>
- <div class="col">
- <input type="checkbox" id='ips-checkbox-46' checked>
- <label for='ips-checkbox-46'>46 IP's</label>
- </div>
- <div class="col">
- <input type="checkbox" id='errors-checkbox-47'>
- <label for='errors-checkbox-47'>47 Errors</label>
- </div>
- <div class="col">
- <input type="checkbox" id='ips-checkbox-47'>
- <label for='ips-checkbox-47'>47 IP's</label>
- </div>
- </div>
- </div>
-
- <div id='firefox47-detail'></div>
-
-
- <script>
- ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
- 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 = [1465257600000, 1465344000000, 1465430400000, 1465516800000, 1465603200000, 1465689600000, 1465776000000, 1465862400000, 1465948800000, 1466035200000, 1466121600000, 1466208000000, 1466294400000, 1466380800000, 1466467200000, 1466553600000, 1466640000000, 1466726400000, 1466812800000, 1466899200000, 1466985600000];
-
- var firefox46 = {
- 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 firefox47 = {
- errors: [8210, 11169, 66456, 127063, 212732, 276359, 394463, 497394, 598650, 649893, 613827, 552797, 465394, 407681, 571281, 619941, 672898, 818924, 644163, 623913, 539337],
-
- ips: [1760, 1521, 9536, 17108, 21630, 24546, 34635, 56174, 66223, 96505, 49468, 67611, 54284, 75652, 54546, 48764, 70349, 115215, 60370, 58427, 45899]
- };
-
- firefox46.errorsOverall = firefox46.errors.reduce(function(a, b) {
- return a + b;
- });
-
- firefox46.ipsOverall = firefox46.ips.reduce(function(a, b) {
- return a + b;
- });
-
- var firefox47_overall = {
- 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: 'Firefox 46 & 47: Errors vs IPs',
- textAlign: 'left'
- },
- type: "area",
- scaleY: {
- short: true
- },
- scaleX: {
- values: dates,
- transform: {
- type: 'date',
- all: '%dd-%M-%y (%D)'
- },
- markers: [{
- alpha: 0.1,
- backgroundColor: '#000',
- type: 'area',
- range: [5, 6]
- },
- {
- alpha: 0.1,
- backgroundColor: '#000',
- type: 'area',
- range: [12, 13]
- },
- {
- alpha: 0.1,
- backgroundColor: '#000',
- type: 'area',
- range: [19, 20]
- },
- {
- alpha: 1,
- lineColor: '#EF6C00',
- lineWidth: 3,
- type: 'line',
- range: [2],
- label: {
- angle: 0,
- backgroundColor: '#EF6C00',
- color: '#FFF',
- offsetY: -288,
- offsetX: -45,
- text: 'Firefox 47 Released'
- }
- }
- ]
- },
- legend: {
- toggleAction: 'none',
- marginTop: 61
- },
- mediaRules: [{
- maxWidth: 700,
- legend: {
- visible: false
- }
- }],
- crosshairX: {
- plotLabel: {
- backgroundColor: '#FFF',
- border: '1px solid #ddd',
- fontSize: 16,
- thousandsSeparator: ','
- }
- },
- series: [{
- backgroundColor: '#00539F',
- lineColor: '#00539F',
- lineWidth: 0,
- text: 'Errors',
- values: firefox46.errors,
- legendItem: {
- text: 'Firefox 46 Errors'
- }
- },
- {
- backgroundColor: '#0095DD',
- lineColor: '#0095DD',
- lineWidth: 0,
- text: 'IPs',
- values: firefox46.ips,
- legendItem: {
- text: 'Firefox 46 IPs'
- }
- },
- {
- backgroundColor: '#E66000',
- lineColor: '#E66000',
- lineWidth: 0,
- border: '1px solid #ddd',
- thousandsSeparator: ',',
- text: 'Errors',
- values: firefox47.errors,
- visible: false,
- legendItem: {
- text: 'Firefox 47 Errors'
- }
- },
- {
- backgroundColor: '#FF9500',
- lineColor: '#FF9500',
- lineWidth: 0,
- text: 'IPs',
- values: firefox47.ips,
- visible: false,
- legendItem: {
- text: 'Firefox 47 IPs'
- }
- },
- ]
- };
-
- var firefox47_detail = {
- 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: 'Firefox 46 & 47 Details - Errors vs IPs',
- textAlign: 'left'
- },
- subtitle: {
- text: 'Overall',
- textAlign: 'left',
- x: 6,
- y: 40
- },
- type: 'pie',
- series: [{
- backgroundColor: '#00539F',
- text: 'Errors',
- values: [firefox46.errorsOverall]
- },
- {
- backgroundColor: '#0095DD',
- text: 'IPs',
- values: [firefox46.ipsOverall]
- },
- {
- backgroundColor: '#E66000',
- text: 'Errors',
- values: [firefox47.errorsOverall]
- },
- {
- backgroundColor: '#FF9500',
- text: 'IPs',
- values: [firefox47.ipsOverall]
- },
- ]
- };
-
- zingchart.render({
- id: 'firefox47-overall',
- data: firefox47_overall,
- height: 400,
- events: {
- '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('firefox47-detail', '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('firefox47-detail', 'setdata', {
- data: detailJSON
- });
- }
- }
- }
- });
-
- zingchart.render({
- id: 'firefox47-detail',
- data: firefox47_detail,
- height: 400
- });
-
- 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);
-
- var updateArray = [{
- visible: true
- },
- {
- visible: true
- },
- {
- visible: false
- },
- {
- visible: false
- }
- ];
-
- function toggleGraphs() {
- var plotIndex = 0;
- //determine plot index
- switch (this.id) {
- case 'errors-checkbox-46':
- plotIndex = 0;
- break;
- case 'ips-checkbox-46':
- plotIndex = 1;
- break;
- case 'errors-checkbox-47':
- plotIndex = 2;
- break;
- case 'ips-checkbox-47':
- plotIndex = 3;
- break;
- }
-
- if (this.checked) {
- updateArray[plotIndex].visible = true;
- zingchart.exec('firefox47-overall', 'appendseriesdata', {
- data: updateArray
- });
- zingchart.exec('firefox47-detail', 'appendseriesdata', {
- data: updateArray
- });
- } else {
- updateArray[plotIndex].visible = false;
- zingchart.exec('firefox47-overall', 'appendseriesdata', {
- data: updateArray
- });
- zingchart.exec('firefox47-detail', 'appendseriesdata', {
- data: updateArray
- });
- }
- }
- </script>
- </body>
-
- </html>
- 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 = [1465257600000, 1465344000000, 1465430400000, 1465516800000, 1465603200000, 1465689600000, 1465776000000, 1465862400000, 1465948800000, 1466035200000, 1466121600000, 1466208000000, 1466294400000, 1466380800000, 1466467200000, 1466553600000, 1466640000000, 1466726400000, 1466812800000, 1466899200000, 1466985600000];
-
- var firefox46 = {
- 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 firefox47 = {
- errors: [8210, 11169, 66456, 127063, 212732, 276359, 394463, 497394, 598650, 649893, 613827, 552797, 465394, 407681, 571281, 619941, 672898, 818924, 644163, 623913, 539337],
-
- ips: [1760, 1521, 9536, 17108, 21630, 24546, 34635, 56174, 66223, 96505, 49468, 67611, 54284, 75652, 54546, 48764, 70349, 115215, 60370, 58427, 45899]
- };
-
- firefox46.errorsOverall = firefox46.errors.reduce(function(a, b) {
- return a + b;
- });
-
- firefox46.ipsOverall = firefox46.ips.reduce(function(a, b) {
- return a + b;
- });
-
- var firefox47_overall = {
- 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: 'Firefox 46 & 47: Errors vs IPs',
- textAlign: 'left'
- },
- type: "area",
- scaleY: {
- short: true
- },
- scaleX: {
- values: dates,
- transform: {
- type: 'date',
- all: '%dd-%M-%y (%D)'
- },
- markers: [{
- alpha: 0.1,
- backgroundColor: '#000',
- type: 'area',
- range: [5, 6]
- },
- {
- alpha: 0.1,
- backgroundColor: '#000',
- type: 'area',
- range: [12, 13]
- },
- {
- alpha: 0.1,
- backgroundColor: '#000',
- type: 'area',
- range: [19, 20]
- },
- {
- alpha: 1,
- lineColor: '#EF6C00',
- lineWidth: 3,
- type: 'line',
- range: [2],
- label: {
- angle: 0,
- backgroundColor: '#EF6C00',
- color: '#FFF',
- offsetY: -288,
- offsetX: -45,
- text: 'Firefox 47 Released'
- }
- }
- ]
- },
- legend: {
- toggleAction: 'none',
- marginTop: 61
- },
- mediaRules: [{
- maxWidth: 700,
- legend: {
- visible: false
- }
- }],
- crosshairX: {
- plotLabel: {
- backgroundColor: '#FFF',
- border: '1px solid #ddd',
- fontSize: 16,
- thousandsSeparator: ','
- }
- },
- series: [{
- backgroundColor: '#00539F',
- lineColor: '#00539F',
- lineWidth: 0,
- text: 'Errors',
- values: firefox46.errors,
- legendItem: {
- text: 'Firefox 46 Errors'
- }
- },
- {
- backgroundColor: '#0095DD',
- lineColor: '#0095DD',
- lineWidth: 0,
- text: 'IPs',
- values: firefox46.ips,
- legendItem: {
- text: 'Firefox 46 IPs'
- }
- },
- {
- backgroundColor: '#E66000',
- lineColor: '#E66000',
- lineWidth: 0,
- border: '1px solid #ddd',
- thousandsSeparator: ',',
- text: 'Errors',
- values: firefox47.errors,
- visible: false,
- legendItem: {
- text: 'Firefox 47 Errors'
- }
- },
- {
- backgroundColor: '#FF9500',
- lineColor: '#FF9500',
- lineWidth: 0,
- text: 'IPs',
- values: firefox47.ips,
- visible: false,
- legendItem: {
- text: 'Firefox 47 IPs'
- }
- },
- ]
- };
-
- var firefox47_detail = {
- 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: 'Firefox 46 & 47 Details - Errors vs IPs',
- textAlign: 'left'
- },
- subtitle: {
- text: 'Overall',
- textAlign: 'left',
- x: 6,
- y: 40
- },
- type: 'pie',
- series: [{
- backgroundColor: '#00539F',
- text: 'Errors',
- values: [firefox46.errorsOverall]
- },
- {
- backgroundColor: '#0095DD',
- text: 'IPs',
- values: [firefox46.ipsOverall]
- },
- {
- backgroundColor: '#E66000',
- text: 'Errors',
- values: [firefox47.errorsOverall]
- },
- {
- backgroundColor: '#FF9500',
- text: 'IPs',
- values: [firefox47.ipsOverall]
- },
- ]
- };
-
- zingchart.render({
- id: 'firefox47-overall',
- data: firefox47_overall,
- height: 400,
- events: {
- '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('firefox47-detail', '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('firefox47-detail', 'setdata', {
- data: detailJSON
- });
- }
- }
- }
- });
-
- zingchart.render({
- id: 'firefox47-detail',
- data: firefox47_detail,
- height: 400
- });
-
- 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);
-
- var updateArray = [{
- visible: true
- },
- {
- visible: true
- },
- {
- visible: false
- },
- {
- visible: false
- }
- ];
-
- function toggleGraphs() {
- var plotIndex = 0;
- //determine plot index
- switch (this.id) {
- case 'errors-checkbox-46':
- plotIndex = 0;
- break;
- case 'ips-checkbox-46':
- plotIndex = 1;
- break;
- case 'errors-checkbox-47':
- plotIndex = 2;
- break;
- case 'ips-checkbox-47':
- plotIndex = 3;
- break;
- }
-
- if (this.checked) {
- updateArray[plotIndex].visible = true;
- zingchart.exec('firefox47-overall', 'appendseriesdata', {
- data: updateArray
- });
- zingchart.exec('firefox47-detail', 'appendseriesdata', {
- data: updateArray
- });
- } else {
- updateArray[plotIndex].visible = false;
- zingchart.exec('firefox47-overall', 'appendseriesdata', {
- data: updateArray
- });
- zingchart.exec('firefox47-detail', 'appendseriesdata', {
- data: updateArray
- });
- }
- }