Gallery Back to Gallery

Chrome Errors Dashboard

<!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="chrome84Overall">
  </div>

  <div id="inputs">
    <div class="row">

      <div class="col">
        <input type="checkbox" id="checkboxErrors84" checked>
        <label for='checkboxErrors84'>84 Errors</label>
      </div>

      <div class="col">
        <input type="checkbox" id="checkboxIps84" checked>
        <label for="checkboxIps84">84 IP's</label>
      </div>

      <div class="col">
        <input type="checkbox" id="checkboxErrors85">
        <label for="checkboxErrors85">85 Errors</label>
      </div>

      <div class="col">
        <input type="checkbox" id="checkboxIps85">
        <label for="checkboxIps85">85 IP's</label>
      </div>

    </div>
  </div>

  <div id="chrome84Detail">
  </div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    // DEFINE CHART LOCATIONS (IDS)
    // -----------------------------
    // Main chart render location
    var chartId = 'myChart';
    var chrome84Detail = 'chrome84Detail';
    var chrome84Overall = 'chrome84Overall';

    // Checkbox Ids
    var checkboxErrors84 = 'checkboxErrors84';
    var checkboxIps84 = 'checkboxIps84';
    var checkboxErrors85 = 'checkboxErrors85';
    var checkboxIps85 = 'checkboxIps85';


    // CHART DATA
    // -----------------------------  
    var lastIndex = null;
    var totalUsage = [74844938, 67916452, 85397784, 54840784, 71261006, 71914665, 69877920, 69797876, 64015606, 47538624, 53405488, 71237670, 69854483, 67229795, 65940984, 59888233, 46967265, 85144680, 63681846, 70527432, 97712043, 90345661, 67326277, 54836594, 59923602, 78117849, 73954211, 71816590, 72253684, 64360719, 84948147, 54739648, 69613566, 70720606, 72607842, 69859811, 64228413, 84706194, 58472683, 68672444, 77388533, 82989307, 80641084, 79055948, 62823593, 71047012];
    var dates = [1598659200000, 1598832000000, 1598918400000, 1599004800000, 1599091200000, 1599177600000, 1599264000000, 1599350400000, 1599436800000, 1599523200000, 1599609600000, 1599696000000, 1599782400000, 1599868800000, 1599955200000, 1600041600000, 1600128000000, 1600214400000, 1600300800000, 1600387200000, 1600473600000, 1600560000000, 1600646400000, 1600732800000, 1600819200000, 1600905600000, 1600992000000, 1601078400000, 1601164800000, 1601251200000, 1601337600000, 1601424000000, 1601510400000, 1601596800000];

    // Chrome84
    var chrome84 = {
      errors: [1987211, 2021396, 1319415, 1323925, 2113920, 2188253, 2170018, 2242853, 2177930, 1716637, 1705411, 2308796, 2346018, 2260725, 2144784, 1922230, 1461423, 1536246, 1758595, 2138455, 2180136, 2210526, 1886849, 1319023, 1496247, 1924003, 1932682, 1657985, 990855, 567546, 428471, 281371, 383746, 287059, 274365, 271813, 160613, 92252, 122070, 122713, 117868, 147609, 114567, 78055, 56243, 68693],
      ips: [326981, 188499, 141138, 188086, 188172, 308552, 348591, 164533, 191780, 202985, 138117, 244959, 290445, 169790, 233407, 179223, 128217, 126069, 189766, 185304, 392733, 207176, 194674, 116104, 136448, 169075, 156413, 185558, 69164, 41741, 34424, 19603, 34582, 28694, 25430, 22227, 22204, 9195, 13378, 14607, 22537, 14738, 18576, 17979, 8901, 6580]
    };
    chrome84.errorsOverall = chrome84.errors.reduce(combine);
    chrome84.ipsOverall = chrome84.ips.reduce(combine);

    // Chrome85
    var chrome85 = {
      errors: [6844, 10334, 78449, 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, 1468535, 1543169],
      ips: [1089, 1936, 7473, 15217, 9618, 8606, 16459, 20271, 18850, 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 84
    var chrome84_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, 84, 55)',
        fontSize: 18,
        height: 40,
        padding: 10,
        text: 'Chrome 84 & 85: 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 85 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: chrome84.errors,
        legendItem: {
          text: 'Chrome 84 Errors'
        }
      }, {
        backgroundColor: '#f4c20d',
        lineColor: '#f4c20d',
        lineWidth: 0,
        text: 'IPs',
        values: chrome84.ips,
        legendItem: {
          text: 'Chrome 84 IPs'
        }
      }, {
        backgroundColor: '#db3236',
        lineColor: '#db3236',
        lineWidth: 0,
        text: 'Errors',
        values: chrome85.errors,
        visible: false,
        legendItem: {
          text: 'Chrome 85 Errors'
        }
      }, {
        backgroundColor: '#2196F3',
        lineColor: '#2196F3',
        lineWidth: 0,
        text: 'IPs',
        values: chrome85.ips,
        visible: false,
        legendItem: {
          text: 'Chrome 85 IPs'
        }
      }]
    };

    // Chrome 84
    var chrome84_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, 84, 55)',
        fontSize: 18,
        height: 40,
        padding: 10,
        text: 'Chrome 84 & 85 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: [chrome84.errorsOverall]
      }, {
        backgroundColor: '#f4c20d',
        text: 'IPs',
        values: [chrome84.ipsOverall]
      }, {
        backgroundColor: '#db3236',
        text: 'Errors',
        values: [chrome85.errorsOverall],
        visible: false
      }, {
        backgroundColor: '#2196F3',
        text: 'IPs',
        values: [chrome85.ipsOverall],
        visible: false
      }]
    };


    // RENDER CHART
    // -----------------------------

    // AREA
    // Render area chart
    zingchart.render({
      id: chrome84Overall,
      data: {
        gui: {
          behaviors: [{
            id: 'Reload',
            enabled: 'none'
          }]
        },
        graphset: [chrome84_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(chrome84Detail, '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(chrome84Detail, 'setdata', {
              data: detailJSON
            });
          }
        },
        load: loaded(chrome84Overall)
      }
    });

    // RING
    // Render ring chart
    zingchart.render({
      id: chrome84Detail,
      data: {
        gui: {
          behaviors: [{
            id: 'Reload',
            enabled: 'none'
          }]
        },
        graphset: [chrome84_detail]
      },
      height: 400,
      width: '100%',
      events: {
        load: loaded(chrome84Detail)
      }
    });


    // CHECKBOX TOGGLE EVENTS
    // -----------------------------
    document.getElementById(checkboxErrors84).addEventListener('click', toggleGraphs);
    document.getElementById(checkboxIps84).addEventListener('click', toggleGraphs);
    document.getElementById(checkboxErrors85).addEventListener('click', toggleGraphs);
    document.getElementById(checkboxIps85).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 checkboxErrors84:
          plotIndex = 0;
          break;
        case checkboxIps84:
          plotIndex = 1;
          break;
        case checkboxErrors85:
          plotIndex = 2;
          break;
        case checkboxIps85:
          plotIndex = 3;
          break;
      }

      // Toggle array boolean state
      updateArray[plotIndex].visible = this.checked;

      // Update the chart
      zingchart.exec(chrome84Overall, 'appendseriesdata', {
        data: updateArray
      });
      zingchart.exec(chrome84Detail, 'appendseriesdata', {
        data: updateArray
      });
    }

    // Combine 2 values
    function combine(a, b) {
      return a + b;
    }
  </script>
</body>

</html>
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body class="zc-body">

  <div id="chrome84Overall">
  </div>

  <div id="inputs">
    <div class="row">

      <div class="col">
        <input type="checkbox" id="checkboxErrors84" checked>
        <label for='checkboxErrors84'>84 Errors</label>          
      </div>
        
      <div class="col">
        <input type="checkbox" id="checkboxIps84" checked>
        <label for="checkboxIps84">84 IP's</label>
      </div>
        
      <div class="col">
        <input type="checkbox" id="checkboxErrors85">
        <label for="checkboxErrors85">85 Errors</label>
      </div>
      
      <div class="col">
        <input type="checkbox" id="checkboxIps85">
        <label for="checkboxIps85">85 IP's</label>
      </div>
      
    </div>
  </div> 
    
  <div id="chrome84Detail">
  </div>

</body>
</html>
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
var chartId = 'myChart';
var chrome84Detail = 'chrome84Detail';
var chrome84Overall = 'chrome84Overall';

// Checkbox Ids
var checkboxErrors84 = 'checkboxErrors84';
var checkboxIps84 = 'checkboxIps84';
var checkboxErrors85 = 'checkboxErrors85';
var checkboxIps85 = 'checkboxIps85';


// CHART DATA
// -----------------------------  
var lastIndex = null;    
var totalUsage = [74844938,67916452,85397784,54840784,71261006,71914665,69877920,69797876,64015606,47538624,53405488,71237670,69854483,67229795,65940984,59888233,46967265,85144680,63681846,70527432,97712043,90345661,67326277,54836594,59923602,78117849,73954211,71816590,72253684,64360719,84948147,54739648,69613566,70720606,72607842,69859811,64228413,84706194,58472683,68672444,77388533,82989307,80641084,79055948,62823593,71047012];
var dates = [1598659200000,1598832000000,1598918400000,1599004800000,1599091200000,1599177600000,1599264000000,1599350400000,1599436800000,1599523200000,1599609600000,1599696000000,1599782400000,1599868800000,1599955200000,1600041600000,1600128000000,1600214400000,1600300800000,1600387200000,1600473600000,1600560000000,1600646400000,1600732800000,1600819200000,1600905600000,1600992000000,1601078400000,1601164800000,1601251200000,1601337600000,1601424000000,1601510400000,1601596800000];

// Chrome84
var chrome84 = {
  errors: [1987211,2021396,1319415,1323925,2113920,2188253,2170018,2242853,2177930,1716637,1705411,2308796,2346018,2260725,2144784,1922230,1461423,1536246,1758595,2138455,2180136,2210526,1886849,1319023,1496247,1924003,1932682,1657985,990855,567546,428471,281371,383746,287059,274365,271813,160613,92252,122070,122713,117868,147609,114567,78055,56243,68693],
  ips: [326981,188499,141138,188086,188172,308552,348591,164533,191780,202985,138117,244959,290445,169790,233407,179223,128217,126069,189766,185304,392733,207176,194674,116104,136448,169075,156413,185558,69164,41741,34424,19603,34582,28694,25430,22227,22204,9195,13378,14607,22537,14738,18576,17979,8901,6580]
};
chrome84.errorsOverall = chrome84.errors.reduce(combine);
chrome84.ipsOverall = chrome84.ips.reduce(combine);

// Chrome85
var chrome85 = {
  errors: [6844,10334,78449,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,1468535,1543169],
  ips: [1089,1936,7473,15217,9618,8606,16459,20271,18850,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 84
var chrome84_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, 84, 55)',
    fontSize: 18,
    height: 40,
    padding: 10,
    text: 'Chrome 84 & 85: 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 85 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: chrome84.errors,
    legendItem: {
      text: 'Chrome 84 Errors'
    }
  }, {
    backgroundColor: '#f4c20d',
    lineColor: '#f4c20d',
    lineWidth: 0,
    text: 'IPs',
    values: chrome84.ips,
    legendItem: {
      text: 'Chrome 84 IPs'
    }
  }, {
    backgroundColor: '#db3236',
    lineColor: '#db3236',
    lineWidth: 0,
    text: 'Errors',
    values: chrome85.errors,
    visible: false,
    legendItem: {
      text: 'Chrome 85 Errors'
    }
  }, {
    backgroundColor: '#2196F3',
    lineColor: '#2196F3',
    lineWidth: 0,
    text: 'IPs',
    values: chrome85.ips,
    visible: false,
    legendItem: {
      text: 'Chrome 85 IPs'
    }
  }]
};

// Chrome 84
var chrome84_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, 84, 55)',
    fontSize: 18,
    height: 40,
    padding: 10,
    text: 'Chrome 84 & 85 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: [chrome84.errorsOverall]
  }, {
    backgroundColor: '#f4c20d',
    text: 'IPs',
    values: [chrome84.ipsOverall]
  }, {
    backgroundColor: '#db3236',
    text: 'Errors',
    values: [chrome85.errorsOverall],
    visible: false
  }, {
    backgroundColor: '#2196F3',
    text: 'IPs',
    values: [chrome85.ipsOverall],
    visible: false
  }]
};


// RENDER CHART
// -----------------------------

// AREA
// Render area chart
zingchart.render({
  id: chrome84Overall,
  data: {
    gui: {
      behaviors: [{
        id: 'Reload',
        enabled: 'none'
      }]
    },
    graphset: [chrome84_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(chrome84Detail, '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(chrome84Detail, 'setdata', {
          data: detailJSON
        });
      }
    },
    load: loaded(chrome84Overall)
  }
});

// RING
// Render ring chart
zingchart.render({
  id: chrome84Detail,
  data: {
    gui: {
      behaviors: [{
        id: 'Reload',
        enabled: 'none'
      }]
    },
    graphset: [chrome84_detail]
  },
  height: 400,
  width: '100%',
  events: {
    load: loaded(chrome84Detail)
  }
});


// CHECKBOX TOGGLE EVENTS
// -----------------------------
document.getElementById(checkboxErrors84).addEventListener('click', toggleGraphs);
document.getElementById(checkboxIps84).addEventListener('click', toggleGraphs);
document.getElementById(checkboxErrors85).addEventListener('click', toggleGraphs);
document.getElementById(checkboxIps85).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 checkboxErrors84: plotIndex = 0; break;
    case checkboxIps84: plotIndex = 1; break;
    case checkboxErrors85: plotIndex = 2; break;
    case checkboxIps85: plotIndex = 3; break;
  }

  // Toggle array boolean state
  updateArray[plotIndex].visible = this.checked;

  // Update the chart
  zingchart.exec(chrome84Overall, 'appendseriesdata', {
    data: updateArray
  });
  zingchart.exec(chrome84Detail, 'appendseriesdata', {
    data: updateArray
  });
}

// Combine 2 values
function combine(a, b) { return a + b; }
#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; }
Sinusoid Line Chart 18/270 Grouped Bar Chart

Related Documentation: