• 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='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>
    <!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='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>
    
    
    </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 = [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
        });
      }
    }