• Edit
  • Download
  • <!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 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='chrome50-overall'></div>
    
      <div id="inputs">
        <div class="row">
          <div class="col">
            <input type="checkbox" id='errors-checkbox-50' checked>
            <label for='errors-checkbox-50'>50 Errors</label>
          </div>
          <div class="col">
            <input type="checkbox" id='ips-checkbox-50' checked>
            <label for='ips-checkbox-50'>50 IP's</label>
          </div>
          <div class="col">
            <input type="checkbox" id='errors-checkbox-51'>
            <label for='errors-checkbox-51'>51 Errors</label>
          </div>
          <div class="col">
            <input type="checkbox" id='ips-checkbox-51'>
            <label for='ips-checkbox-51'>51 IP's</label>
          </div>
        </div>
      </div>
    
      <div id='chrome50-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 = [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 = {
          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]
        };
    
        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]
        };
    
        chrome50.errorsOverall = chrome50.errors.reduce(function(a, b) {
          return a + b;
        });
    
        chrome50.ipsOverall = chrome50.ips.reduce(function(a, b) {
          return a + b;
        });
    
        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'
              }
            }
          ]
        };
    
        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 area chart
        zingchart.render({
          id: 'chrome50-overall',
          data: {
            gui: {
              behaviors: [{
                id: 'Reload',
                enabled: 'none'
              }]
            },
            graphset: [chrome50_overall]
          },
          height: 400,
          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('chrome50-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('chrome50-detail', 'setdata', {
                  data: detailJSON
                });
              }
            }
          }
        });
    
        // render ring chart
        zingchart.render({
          id: 'chrome50-detail',
          data: {
            gui: {
              behaviors: [{
                id: 'Reload',
                enabled: 'none'
              }]
            },
            graphset: [chrome50_detail]
          },
          height: 400
        });
    
        // assign toggle switch event listeners
        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
          }
        ];
    
        function toggleGraphs() {
          var plotIndex = 0;
    
          //determine plot index
          switch (this.id) {
            case 'errors-checkbox-50':
              plotIndex = 0;
              break;
            case 'ips-checkbox-50':
              plotIndex = 1;
              break;
            case 'errors-checkbox-51':
              plotIndex = 2;
              break;
            case 'ips-checkbox-51':
              plotIndex = 3;
              break;
          }
    
          if (this.checked) {
            updateArray[plotIndex].visible = true;
            zingchart.exec('chrome50-overall', 'appendseriesdata', {
              data: updateArray
            });
            zingchart.exec('chrome50-detail', 'appendseriesdata', {
              data: updateArray
            });
          } else {
            updateArray[plotIndex].visible = false;
            zingchart.exec('chrome50-overall', 'appendseriesdata', {
              data: updateArray
            });
            zingchart.exec('chrome50-detail', 'appendseriesdata', {
              data: updateArray
            });
          }
        }
      </script>
    </body>
    
    </html>
    <!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 src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
    
      <div id='chrome50-overall'></div>
    
      <div id="inputs">
        <div class="row">
          <div class="col">
            <input type="checkbox" id='errors-checkbox-50' checked>
            <label for='errors-checkbox-50'>50 Errors</label>
          </div>
          <div class="col">
            <input type="checkbox" id='ips-checkbox-50' checked>
            <label for='ips-checkbox-50'>50 IP's</label>
          </div>
          <div class="col">
            <input type="checkbox" id='errors-checkbox-51'>
            <label for='errors-checkbox-51'>51 Errors</label>
          </div>
          <div class="col">
            <input type="checkbox" id='ips-checkbox-51'>
            <label for='ips-checkbox-51'>51 IP's</label>
          </div>
        </div>
      </div>
    
      <div id='chrome50-detail'></div>
    
    </body>
    
    </html>
    #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;
    }
    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];
    
    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]
    };
    
    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]
    };
    
    chrome50.errorsOverall = chrome50.errors.reduce(function(a, b) {
      return a + b;
    });
    
    chrome50.ipsOverall = chrome50.ips.reduce(function(a, b) {
      return a + b;
    });
    
    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'
          }
        }
      ]
    };
    
    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 area chart
    zingchart.render({
      id: 'chrome50-overall',
      data: {
        gui: {
          behaviors: [{
            id: 'Reload',
            enabled: 'none'
          }]
        },
        graphset: [chrome50_overall]
      },
      height: 400,
      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('chrome50-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('chrome50-detail', 'setdata', {
              data: detailJSON
            });
          }
        }
      }
    });
    
    // render ring chart
    zingchart.render({
      id: 'chrome50-detail',
      data: {
        gui: {
          behaviors: [{
            id: 'Reload',
            enabled: 'none'
          }]
        },
        graphset: [chrome50_detail]
      },
      height: 400
    });
    
    // assign toggle switch event listeners
    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
      }
    ];
    
    function toggleGraphs() {
      var plotIndex = 0;
    
      //determine plot index
      switch (this.id) {
        case 'errors-checkbox-50':
          plotIndex = 0;
          break;
        case 'ips-checkbox-50':
          plotIndex = 1;
          break;
        case 'errors-checkbox-51':
          plotIndex = 2;
          break;
        case 'ips-checkbox-51':
          plotIndex = 3;
          break;
      }
    
      if (this.checked) {
        updateArray[plotIndex].visible = true;
        zingchart.exec('chrome50-overall', 'appendseriesdata', {
          data: updateArray
        });
        zingchart.exec('chrome50-detail', 'appendseriesdata', {
          data: updateArray
        });
      } else {
        updateArray[plotIndex].visible = false;
        zingchart.exec('chrome50-overall', 'appendseriesdata', {
          data: updateArray
        });
        zingchart.exec('chrome50-detail', 'appendseriesdata', {
          data: updateArray
        });
      }
    }