• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    8.  
    9.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10.   <style>
    11.     #inputs {
    12.       background: #F7F7F7;
    13.       border: 1px solid #DDD;
    14.       border-top: none;
    15.       border-bottom-left-radius: 4px;
    16.       border-bottom-right-radius: 4px;
    17.       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    18.       font-family: Open Sans;
    19.       padding: 1rem 1rem;
    20.       margin: 0 0 1.5rem 0;
    21.       max-width: 600px;
    22.       width: 100%;
    23.     }
    24.  
    25.     label {
    26.       cursor: pointer;
    27.     }
    28.  
    29.     .row {
    30.       display: -webkit-flex;
    31.       display: -ms-flexbox;
    32.       display: flex;
    33.     }
    34.  
    35.     .row+.row {
    36.       margin-top: 1rem;
    37.     }
    38.  
    39.     .col {
    40.       -webkit-flex: 1;
    41.       -ms-flex: 1;
    42.       flex: 1;
    43.     }
    44.   </style>
    45. </head>
    46.  
    47. <body>
    48.  
    49.   <div id='firefox47-overall'></div>
    50.  
    51.   <div id="inputs">
    52.     <div class="row">
    53.       <div class="col">
    54.         <input type="checkbox" id='errors-checkbox-46' checked>
    55.         <label for='errors-checkbox-46'>46 Errors</label>
    56.       </div>
    57.       <div class="col">
    58.         <input type="checkbox" id='ips-checkbox-46' checked>
    59.         <label for='ips-checkbox-46'>46 IP's</label>
    60.       </div>
    61.       <div class="col">
    62.         <input type="checkbox" id='errors-checkbox-47'>
    63.         <label for='errors-checkbox-47'>47 Errors</label>
    64.       </div>
    65.       <div class="col">
    66.         <input type="checkbox" id='ips-checkbox-47'>
    67.         <label for='ips-checkbox-47'>47 IP's</label>
    68.       </div>
    69.     </div>
    70.   </div>
    71.  
    72.   <div id='firefox47-detail'></div>
    73.  
    74.  
    75.   <script>
    76.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    77.     var lastIndex = null;
    78.  
    79.     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];
    80.  
    81.     var dates = [1465257600000, 1465344000000, 1465430400000, 1465516800000, 1465603200000, 1465689600000, 1465776000000, 1465862400000, 1465948800000, 1466035200000, 1466121600000, 1466208000000, 1466294400000, 1466380800000, 1466467200000, 1466553600000, 1466640000000, 1466726400000, 1466812800000, 1466899200000, 1466985600000];
    82.  
    83.     var firefox46 = {
    84.       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],
    85.       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]
    86.     };
    87.  
    88.     var firefox47 = {
    89.       errors: [8210, 11169, 66456, 127063, 212732, 276359, 394463, 497394, 598650, 649893, 613827, 552797, 465394, 407681, 571281, 619941, 672898, 818924, 644163, 623913, 539337],
    90.  
    91.       ips: [1760, 1521, 9536, 17108, 21630, 24546, 34635, 56174, 66223, 96505, 49468, 67611, 54284, 75652, 54546, 48764, 70349, 115215, 60370, 58427, 45899]
    92.     };
    93.  
    94.     firefox46.errorsOverall = firefox46.errors.reduce(function(a, b) {
    95.       return a + b;
    96.     });
    97.  
    98.     firefox46.ipsOverall = firefox46.ips.reduce(function(a, b) {
    99.       return a + b;
    100.     });
    101.  
    102.     var firefox47_overall = {
    103.       globals: {
    104.         fontFamily: 'Open Sans'
    105.       },
    106.       border: '1px solid #ddd',
    107.       plot: {
    108.         alphaArea: 1,
    109.         marker: {
    110.           visible: false
    111.         },
    112.         tooltip: {
    113.           visible: false
    114.         }
    115.       },
    116.       plotarea: {
    117.         margin: '62px 52px 52px'
    118.       },
    119.       title: {
    120.         backgroundColor: 'rgb(247, 247, 247)',
    121.         border: '1px solid #ddd',
    122.         color: 'rgb(44, 50, 55)',
    123.         fontSize: 18,
    124.         height: 40,
    125.         padding: 10,
    126.         text: 'Firefox 46 & 47: Errors vs IPs',
    127.         textAlign: 'left'
    128.       },
    129.       type: "area",
    130.       scaleY: {
    131.         short: true
    132.       },
    133.       scaleX: {
    134.         values: dates,
    135.         transform: {
    136.           type: 'date',
    137.           all: '%dd-%M-%y (%D)'
    138.         },
    139.         markers: [{
    140.             alpha: 0.1,
    141.             backgroundColor: '#000',
    142.             type: 'area',
    143.             range: [5, 6]
    144.           },
    145.           {
    146.             alpha: 0.1,
    147.             backgroundColor: '#000',
    148.             type: 'area',
    149.             range: [12, 13]
    150.           },
    151.           {
    152.             alpha: 0.1,
    153.             backgroundColor: '#000',
    154.             type: 'area',
    155.             range: [19, 20]
    156.           },
    157.           {
    158.             alpha: 1,
    159.             lineColor: '#EF6C00',
    160.             lineWidth: 3,
    161.             type: 'line',
    162.             range: [2],
    163.             label: {
    164.               angle: 0,
    165.               backgroundColor: '#EF6C00',
    166.               color: '#FFF',
    167.               offsetY: -288,
    168.               offsetX: -45,
    169.               text: 'Firefox 47 Released'
    170.             }
    171.           }
    172.         ]
    173.       },
    174.       legend: {
    175.         toggleAction: 'none',
    176.         marginTop: 61
    177.       },
    178.       mediaRules: [{
    179.         maxWidth: 700,
    180.         legend: {
    181.           visible: false
    182.         }
    183.       }],
    184.       crosshairX: {
    185.         plotLabel: {
    186.           backgroundColor: '#FFF',
    187.           border: '1px solid #ddd',
    188.           fontSize: 16,
    189.           thousandsSeparator: ','
    190.         }
    191.       },
    192.       series: [{
    193.           backgroundColor: '#00539F',
    194.           lineColor: '#00539F',
    195.           lineWidth: 0,
    196.           text: 'Errors',
    197.           values: firefox46.errors,
    198.           legendItem: {
    199.             text: 'Firefox 46 Errors'
    200.           }
    201.         },
    202.         {
    203.           backgroundColor: '#0095DD',
    204.           lineColor: '#0095DD',
    205.           lineWidth: 0,
    206.           text: 'IPs',
    207.           values: firefox46.ips,
    208.           legendItem: {
    209.             text: 'Firefox 46 IPs'
    210.           }
    211.         },
    212.         {
    213.           backgroundColor: '#E66000',
    214.           lineColor: '#E66000',
    215.           lineWidth: 0,
    216.           border: '1px solid #ddd',
    217.           thousandsSeparator: ',',
    218.           text: 'Errors',
    219.           values: firefox47.errors,
    220.           visible: false,
    221.           legendItem: {
    222.             text: 'Firefox 47 Errors'
    223.           }
    224.         },
    225.         {
    226.           backgroundColor: '#FF9500',
    227.           lineColor: '#FF9500',
    228.           lineWidth: 0,
    229.           text: 'IPs',
    230.           values: firefox47.ips,
    231.           visible: false,
    232.           legendItem: {
    233.             text: 'Firefox 47 IPs'
    234.           }
    235.         },
    236.       ]
    237.     };
    238.  
    239.     var firefox47_detail = {
    240.       globals: {
    241.         fontFamily: 'Open Sans'
    242.       },
    243.       border: '1px solid #ddd',
    244.       plot: {
    245.         slice: 70,
    246.         valueBox: {
    247.           visible: true,
    248.           placement: 'out',
    249.           fontSize: 11,
    250.           thousandsSeparator: ',',
    251.           offsetR: 15,
    252.           text: '%t: %v',
    253.           rules: [{
    254.               rule: '%p == 0',
    255.               placement: 'center',
    256.               offsetY: -17
    257.             },
    258.             {
    259.               rule: '%p == 1',
    260.               placement: 'center',
    261.               offsetY: -7
    262.             },
    263.             {
    264.               rule: '%p == 2',
    265.               placement: 'center',
    266.               offsetY: 7
    267.             },
    268.             {
    269.               rule: '%p == 3',
    270.               placement: 'center',
    271.               offsetY: 17
    272.             }
    273.           ]
    274.         },
    275.         tooltip: {
    276.           visible: false
    277.         }
    278.       },
    279.       plotarea: {
    280.         margin: '62px 52px 52px'
    281.       },
    282.       title: {
    283.         backgroundColor: 'rgb(247, 247, 247)',
    284.         border: '1px solid #ddd',
    285.         color: 'rgb(44, 50, 55)',
    286.         fontSize: 18,
    287.         height: 40,
    288.         padding: 10,
    289.         text: 'Firefox 46 & 47 Details - Errors vs IPs',
    290.         textAlign: 'left'
    291.       },
    292.       subtitle: {
    293.         text: 'Overall',
    294.         textAlign: 'left',
    295.         x: 6,
    296.         y: 40
    297.       },
    298.       type: 'pie',
    299.       series: [{
    300.           backgroundColor: '#00539F',
    301.           text: 'Errors',
    302.           values: [firefox46.errorsOverall]
    303.         },
    304.         {
    305.           backgroundColor: '#0095DD',
    306.           text: 'IPs',
    307.           values: [firefox46.ipsOverall]
    308.         },
    309.         {
    310.           backgroundColor: '#E66000',
    311.           text: 'Errors',
    312.           values: [firefox47.errorsOverall]
    313.         },
    314.         {
    315.           backgroundColor: '#FF9500',
    316.           text: 'IPs',
    317.           values: [firefox47.ipsOverall]
    318.         },
    319.       ]
    320.     };
    321.  
    322.     zingchart.render({
    323.       id: 'firefox47-overall',
    324.       data: firefox47_overall,
    325.       height: 400,
    326.       events: {
    327.         'guide_mousemove': function(p) {
    328.  
    329.           // If it's a new index...
    330.           if (lastIndex && lastIndex !== p.items[0].nodeindex || !lastIndex) {
    331.  
    332.             // Update the last index
    333.             lastIndex = p.items[0].nodeindex;
    334.  
    335.             var detailJSON = zingchart.exec('firefox47-detail', 'getdata');
    336.  
    337.             for (var i = 0; i < p.items.length; i++) {
    338.               detailJSON.graphset[0].series[p.items[i].plotindex].values = [p.items[i].value];
    339.             }
    340.  
    341.             detailJSON.graphset[0].subtitle.text = new Date(p.items[0].keyvalue).toDateString();
    342.  
    343.             zingchart.exec('firefox47-detail', 'setdata', {
    344.               data: detailJSON
    345.             });
    346.           }
    347.         }
    348.       }
    349.     });
    350.  
    351.     zingchart.render({
    352.       id: 'firefox47-detail',
    353.       data: firefox47_detail,
    354.       height: 400
    355.     });
    356.  
    357.     document.getElementById('errors-checkbox-46').addEventListener('click', toggleGraphs);
    358.     document.getElementById('ips-checkbox-46').addEventListener('click', toggleGraphs);
    359.     document.getElementById('errors-checkbox-47').addEventListener('click', toggleGraphs);
    360.     document.getElementById('ips-checkbox-47').addEventListener('click', toggleGraphs);
    361.  
    362.     var updateArray = [{
    363.         visible: true
    364.       },
    365.       {
    366.         visible: true
    367.       },
    368.       {
    369.         visible: false
    370.       },
    371.       {
    372.         visible: false
    373.       }
    374.     ];
    375.  
    376.     function toggleGraphs() {
    377.       var plotIndex = 0;
    378.       //determine plot index
    379.       switch (this.id) {
    380.         case 'errors-checkbox-46':
    381.           plotIndex = 0;
    382.           break;
    383.         case 'ips-checkbox-46':
    384.           plotIndex = 1;
    385.           break;
    386.         case 'errors-checkbox-47':
    387.           plotIndex = 2;
    388.           break;
    389.         case 'ips-checkbox-47':
    390.           plotIndex = 3;
    391.           break;
    392.       }
    393.  
    394.       if (this.checked) {
    395.         updateArray[plotIndex].visible = true;
    396.         zingchart.exec('firefox47-overall', 'appendseriesdata', {
    397.           data: updateArray
    398.         });
    399.         zingchart.exec('firefox47-detail', 'appendseriesdata', {
    400.           data: updateArray
    401.         });
    402.       } else {
    403.         updateArray[plotIndex].visible = false;
    404.         zingchart.exec('firefox47-overall', 'appendseriesdata', {
    405.           data: updateArray
    406.         });
    407.         zingchart.exec('firefox47-detail', 'appendseriesdata', {
    408.           data: updateArray
    409.         });
    410.       }
    411.     }
    412.   </script>
    413. </body>
    414.  
    415. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    8.  
    9.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.  
    14.   <div id='firefox47-overall'></div>
    15.  
    16.   <div id="inputs">
    17.     <div class="row">
    18.       <div class="col">
    19.         <input type="checkbox" id='errors-checkbox-46' checked>
    20.         <label for='errors-checkbox-46'>46 Errors</label>
    21.       </div>
    22.       <div class="col">
    23.         <input type="checkbox" id='ips-checkbox-46' checked>
    24.         <label for='ips-checkbox-46'>46 IP's</label>
    25.       </div>
    26.       <div class="col">
    27.         <input type="checkbox" id='errors-checkbox-47'>
    28.         <label for='errors-checkbox-47'>47 Errors</label>
    29.       </div>
    30.       <div class="col">
    31.         <input type="checkbox" id='ips-checkbox-47'>
    32.         <label for='ips-checkbox-47'>47 IP's</label>
    33.       </div>
    34.     </div>
    35.   </div>
    36.  
    37.   <div id='firefox47-detail'></div>
    38.  
    39.  
    40. </body>
    41.  
    42. </html>
    1. #inputs {
    2.   background: #F7F7F7;
    3.   border: 1px solid #DDD;
    4.   border-top: none;
    5.   border-bottom-left-radius: 4px;
    6.   border-bottom-right-radius: 4px;
    7.   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    8.   font-family: Open Sans;
    9.   padding: 1rem 1rem;
    10.   margin: 0 0 1.5rem 0;
    11.   max-width: 600px;
    12.   width: 100%;
    13. }
    14.  
    15. label {
    16.   cursor: pointer;
    17. }
    18.  
    19. .row {
    20.   display: -webkit-flex;
    21.   display: -ms-flexbox;
    22.   display: flex;
    23. }
    24.  
    25. .row+.row {
    26.   margin-top: 1rem;
    27. }
    28.  
    29. .col {
    30.   -webkit-flex: 1;
    31.   -ms-flex: 1;
    32.   flex: 1;
    33. }
    1. var lastIndex = null;
    2.  
    3. 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];
    4.  
    5. var dates = [1465257600000, 1465344000000, 1465430400000, 1465516800000, 1465603200000, 1465689600000, 1465776000000, 1465862400000, 1465948800000, 1466035200000, 1466121600000, 1466208000000, 1466294400000, 1466380800000, 1466467200000, 1466553600000, 1466640000000, 1466726400000, 1466812800000, 1466899200000, 1466985600000];
    6.  
    7. var firefox46 = {
    8.   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],
    9.   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]
    10. };
    11.  
    12. var firefox47 = {
    13.   errors: [8210, 11169, 66456, 127063, 212732, 276359, 394463, 497394, 598650, 649893, 613827, 552797, 465394, 407681, 571281, 619941, 672898, 818924, 644163, 623913, 539337],
    14.  
    15.   ips: [1760, 1521, 9536, 17108, 21630, 24546, 34635, 56174, 66223, 96505, 49468, 67611, 54284, 75652, 54546, 48764, 70349, 115215, 60370, 58427, 45899]
    16. };
    17.  
    18. firefox46.errorsOverall = firefox46.errors.reduce(function(a, b) {
    19.   return a + b;
    20. });
    21.  
    22. firefox46.ipsOverall = firefox46.ips.reduce(function(a, b) {
    23.   return a + b;
    24. });
    25.  
    26. var firefox47_overall = {
    27.   globals: {
    28.     fontFamily: 'Open Sans'
    29.   },
    30.   border: '1px solid #ddd',
    31.   plot: {
    32.     alphaArea: 1,
    33.     marker: {
    34.       visible: false
    35.     },
    36.     tooltip: {
    37.       visible: false
    38.     }
    39.   },
    40.   plotarea: {
    41.     margin: '62px 52px 52px'
    42.   },
    43.   title: {
    44.     backgroundColor: 'rgb(247, 247, 247)',
    45.     border: '1px solid #ddd',
    46.     color: 'rgb(44, 50, 55)',
    47.     fontSize: 18,
    48.     height: 40,
    49.     padding: 10,
    50.     text: 'Firefox 46 & 47: Errors vs IPs',
    51.     textAlign: 'left'
    52.   },
    53.   type: "area",
    54.   scaleY: {
    55.     short: true
    56.   },
    57.   scaleX: {
    58.     values: dates,
    59.     transform: {
    60.       type: 'date',
    61.       all: '%dd-%M-%y (%D)'
    62.     },
    63.     markers: [{
    64.         alpha: 0.1,
    65.         backgroundColor: '#000',
    66.         type: 'area',
    67.         range: [5, 6]
    68.       },
    69.       {
    70.         alpha: 0.1,
    71.         backgroundColor: '#000',
    72.         type: 'area',
    73.         range: [12, 13]
    74.       },
    75.       {
    76.         alpha: 0.1,
    77.         backgroundColor: '#000',
    78.         type: 'area',
    79.         range: [19, 20]
    80.       },
    81.       {
    82.         alpha: 1,
    83.         lineColor: '#EF6C00',
    84.         lineWidth: 3,
    85.         type: 'line',
    86.         range: [2],
    87.         label: {
    88.           angle: 0,
    89.           backgroundColor: '#EF6C00',
    90.           color: '#FFF',
    91.           offsetY: -288,
    92.           offsetX: -45,
    93.           text: 'Firefox 47 Released'
    94.         }
    95.       }
    96.     ]
    97.   },
    98.   legend: {
    99.     toggleAction: 'none',
    100.     marginTop: 61
    101.   },
    102.   mediaRules: [{
    103.     maxWidth: 700,
    104.     legend: {
    105.       visible: false
    106.     }
    107.   }],
    108.   crosshairX: {
    109.     plotLabel: {
    110.       backgroundColor: '#FFF',
    111.       border: '1px solid #ddd',
    112.       fontSize: 16,
    113.       thousandsSeparator: ','
    114.     }
    115.   },
    116.   series: [{
    117.       backgroundColor: '#00539F',
    118.       lineColor: '#00539F',
    119.       lineWidth: 0,
    120.       text: 'Errors',
    121.       values: firefox46.errors,
    122.       legendItem: {
    123.         text: 'Firefox 46 Errors'
    124.       }
    125.     },
    126.     {
    127.       backgroundColor: '#0095DD',
    128.       lineColor: '#0095DD',
    129.       lineWidth: 0,
    130.       text: 'IPs',
    131.       values: firefox46.ips,
    132.       legendItem: {
    133.         text: 'Firefox 46 IPs'
    134.       }
    135.     },
    136.     {
    137.       backgroundColor: '#E66000',
    138.       lineColor: '#E66000',
    139.       lineWidth: 0,
    140.       border: '1px solid #ddd',
    141.       thousandsSeparator: ',',
    142.       text: 'Errors',
    143.       values: firefox47.errors,
    144.       visible: false,
    145.       legendItem: {
    146.         text: 'Firefox 47 Errors'
    147.       }
    148.     },
    149.     {
    150.       backgroundColor: '#FF9500',
    151.       lineColor: '#FF9500',
    152.       lineWidth: 0,
    153.       text: 'IPs',
    154.       values: firefox47.ips,
    155.       visible: false,
    156.       legendItem: {
    157.         text: 'Firefox 47 IPs'
    158.       }
    159.     },
    160.   ]
    161. };
    162.  
    163. var firefox47_detail = {
    164.   globals: {
    165.     fontFamily: 'Open Sans'
    166.   },
    167.   border: '1px solid #ddd',
    168.   plot: {
    169.     slice: 70,
    170.     valueBox: {
    171.       visible: true,
    172.       placement: 'out',
    173.       fontSize: 11,
    174.       thousandsSeparator: ',',
    175.       offsetR: 15,
    176.       text: '%t: %v',
    177.       rules: [{
    178.           rule: '%p == 0',
    179.           placement: 'center',
    180.           offsetY: -17
    181.         },
    182.         {
    183.           rule: '%p == 1',
    184.           placement: 'center',
    185.           offsetY: -7
    186.         },
    187.         {
    188.           rule: '%p == 2',
    189.           placement: 'center',
    190.           offsetY: 7
    191.         },
    192.         {
    193.           rule: '%p == 3',
    194.           placement: 'center',
    195.           offsetY: 17
    196.         }
    197.       ]
    198.     },
    199.     tooltip: {
    200.       visible: false
    201.     }
    202.   },
    203.   plotarea: {
    204.     margin: '62px 52px 52px'
    205.   },
    206.   title: {
    207.     backgroundColor: 'rgb(247, 247, 247)',
    208.     border: '1px solid #ddd',
    209.     color: 'rgb(44, 50, 55)',
    210.     fontSize: 18,
    211.     height: 40,
    212.     padding: 10,
    213.     text: 'Firefox 46 & 47 Details - Errors vs IPs',
    214.     textAlign: 'left'
    215.   },
    216.   subtitle: {
    217.     text: 'Overall',
    218.     textAlign: 'left',
    219.     x: 6,
    220.     y: 40
    221.   },
    222.   type: 'pie',
    223.   series: [{
    224.       backgroundColor: '#00539F',
    225.       text: 'Errors',
    226.       values: [firefox46.errorsOverall]
    227.     },
    228.     {
    229.       backgroundColor: '#0095DD',
    230.       text: 'IPs',
    231.       values: [firefox46.ipsOverall]
    232.     },
    233.     {
    234.       backgroundColor: '#E66000',
    235.       text: 'Errors',
    236.       values: [firefox47.errorsOverall]
    237.     },
    238.     {
    239.       backgroundColor: '#FF9500',
    240.       text: 'IPs',
    241.       values: [firefox47.ipsOverall]
    242.     },
    243.   ]
    244. };
    245.  
    246. zingchart.render({
    247.   id: 'firefox47-overall',
    248.   data: firefox47_overall,
    249.   height: 400,
    250.   events: {
    251.     'guide_mousemove': function(p) {
    252.  
    253.       // If it's a new index...
    254.       if (lastIndex && lastIndex !== p.items[0].nodeindex || !lastIndex) {
    255.  
    256.         // Update the last index
    257.         lastIndex = p.items[0].nodeindex;
    258.  
    259.         var detailJSON = zingchart.exec('firefox47-detail', 'getdata');
    260.  
    261.         for (var i = 0; i < p.items.length; i++) {
    262.           detailJSON.graphset[0].series[p.items[i].plotindex].values = [p.items[i].value];
    263.         }
    264.  
    265.         detailJSON.graphset[0].subtitle.text = new Date(p.items[0].keyvalue).toDateString();
    266.  
    267.         zingchart.exec('firefox47-detail', 'setdata', {
    268.           data: detailJSON
    269.         });
    270.       }
    271.     }
    272.   }
    273. });
    274.  
    275. zingchart.render({
    276.   id: 'firefox47-detail',
    277.   data: firefox47_detail,
    278.   height: 400
    279. });
    280.  
    281. document.getElementById('errors-checkbox-46').addEventListener('click', toggleGraphs);
    282. document.getElementById('ips-checkbox-46').addEventListener('click', toggleGraphs);
    283. document.getElementById('errors-checkbox-47').addEventListener('click', toggleGraphs);
    284. document.getElementById('ips-checkbox-47').addEventListener('click', toggleGraphs);
    285.  
    286. var updateArray = [{
    287.     visible: true
    288.   },
    289.   {
    290.     visible: true
    291.   },
    292.   {
    293.     visible: false
    294.   },
    295.   {
    296.     visible: false
    297.   }
    298. ];
    299.  
    300. function toggleGraphs() {
    301.   var plotIndex = 0;
    302.   //determine plot index
    303.   switch (this.id) {
    304.     case 'errors-checkbox-46':
    305.       plotIndex = 0;
    306.       break;
    307.     case 'ips-checkbox-46':
    308.       plotIndex = 1;
    309.       break;
    310.     case 'errors-checkbox-47':
    311.       plotIndex = 2;
    312.       break;
    313.     case 'ips-checkbox-47':
    314.       plotIndex = 3;
    315.       break;
    316.   }
    317.  
    318.   if (this.checked) {
    319.     updateArray[plotIndex].visible = true;
    320.     zingchart.exec('firefox47-overall', 'appendseriesdata', {
    321.       data: updateArray
    322.     });
    323.     zingchart.exec('firefox47-detail', 'appendseriesdata', {
    324.       data: updateArray
    325.     });
    326.   } else {
    327.     updateArray[plotIndex].visible = false;
    328.     zingchart.exec('firefox47-overall', 'appendseriesdata', {
    329.       data: updateArray
    330.     });
    331.     zingchart.exec('firefox47-detail', 'appendseriesdata', {
    332.       data: updateArray
    333.     });
    334.   }
    335. }