• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        #myChart {
          height: 100%;
          width: 100%;
          min-height: 150px;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <div id="zc"></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var ymin = 1997,
          ymax = 2010;
    
        var _r_ = function(min, max) {
          return Math.round(min + (max - min) * Math.random());
        }
    
        // create fake data, will plot Q3 data (12 weeks) for each year
        var data = {},
          y, w;
        var avgs = [];
        var v = _r_(2000000, 4000000);
        for (y = ymin; y <= ymax; y++) {
          data[y] = [];
          var sum = 0;
          for (w = 0; w < 12; w++) {
            v = v + _r_(-40000, 40000);
            data[y].push(v);
            sum += v;
          }
          avgs.push(Math.round(sum / 12));
          // make a bigger jump
          if (Math.random() > 0.5) {
            v += _r_(100000, 200000);
          } else {
            v -= _r_(100000, 200000);
          }
        }
    
        var cdata = {
          type: 'mixed',
          clustered: true,
          backgroundColor: '#000',
          title: {
            color: '#fff',
            adjustLayout: true,
            text: 'Q3 comparison from ' + ymin + ' until ' + ymax
          },
          plotarea: {
            margin: 'dynamic 15 dynamic 15',
            marginBottomOffset: 5
          },
          scaleX: {
            label: {
              visible: false
            },
            lineColor: '#2e2e2e',
            guide: {
              visible: true,
              lineStyle: 'solid',
              lineColor: '#2e2e2e'
            },
            item: {
              fontFamily: 'Impact',
              fontSize: 12,
              fontWeight: 'normal',
              color: '#666'
            },
            tick: {
              visible: false
            },
            format: '<span style="color:#ccc">Q3</span> %scale-value',
            values: [ymin, ymax, 1].join(':')
          },
          scaleY: {
            minValue: 0,
            guide: {
              lineStyle: 'solid',
              lineColor: '#2e2e2e'
            },
            lineColor: '#2e2e2e',
            tick: {
              visible: false
            },
            item: {
              visible: false
            },
            label: {
              visible: false
            }
          },
          crosshairX: {
            scaleLabel: {
              visible: false
            },
            plotLabel: {
              thousandsSeparator: ',',
              padding: '5 10',
              borderRadius: 7,
              backgroundColor: '#cc3300',
              fontSize: 12,
              color: '#fff',
              borderWidth: 0,
              callout: true,
              calloutHeight: 18,
              calloutWidth: 10,
              multiple: true,
              text: '<span style="color:#FC7272;font-size:15px;font-weight:bold;">Q3 %scale-key-value</span><br><br>$%node-value'
            },
            lineWidth: '100%',
            alpha: 0.1
          },
          plot: {
            maxNodes: 0,
            maxTrackers: 0,
            activeArea: true
          },
          series: []
        };
    
        for (y = ymin; y <= ymax; y++) {
          var sdata = {
            shadow: true,
            shadowColor: '#133a46',
            shadowAngle: 90,
            shadowDistance: 3,
            lineWidth: 3,
            alphaArea: 0.5,
            lineColor: '#00b0e2',
            backgroundColor: '#133a46 #000000',
            type: 'area',
            clustered: true,
            values: data[y]
          };
          cdata['series'].push(sdata);
        }
    
        cdata['series'].push({
          type: 'line',
          lineWidth: 0,
          values: avgs
        });
    
    
        window.addEventListener('load', function() {
    
          zingchart.render({
            id: 'zc',
            width: 800,
            height: 400,
            output: 'svg',
            data: cdata
          });
    
        });
      </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>
      <div id="zc"></div>
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }
    
    .zc-ref {
      display: none;
    }
    var ymin = 1997,
      ymax = 2010;
    
    var _r_ = function(min, max) {
      return Math.round(min + (max - min) * Math.random());
    }
    
    // create fake data, will plot Q3 data (12 weeks) for each year
    var data = {},
      y, w;
    var avgs = [];
    var v = _r_(2000000, 4000000);
    for (y = ymin; y <= ymax; y++) {
      data[y] = [];
      var sum = 0;
      for (w = 0; w < 12; w++) {
        v = v + _r_(-40000, 40000);
        data[y].push(v);
        sum += v;
      }
      avgs.push(Math.round(sum / 12));
      // make a bigger jump
      if (Math.random() > 0.5) {
        v += _r_(100000, 200000);
      } else {
        v -= _r_(100000, 200000);
      }
    }
    
    var cdata = {
      type: 'mixed',
      clustered: true,
      backgroundColor: '#000',
      title: {
        color: '#fff',
        adjustLayout: true,
        text: 'Q3 comparison from ' + ymin + ' until ' + ymax
      },
      plotarea: {
        margin: 'dynamic 15 dynamic 15',
        marginBottomOffset: 5
      },
      scaleX: {
        label: {
          visible: false
        },
        lineColor: '#2e2e2e',
        guide: {
          visible: true,
          lineStyle: 'solid',
          lineColor: '#2e2e2e'
        },
        item: {
          fontFamily: 'Impact',
          fontSize: 12,
          fontWeight: 'normal',
          color: '#666'
        },
        tick: {
          visible: false
        },
        format: '<span style="color:#ccc">Q3</span> %scale-value',
        values: [ymin, ymax, 1].join(':')
      },
      scaleY: {
        minValue: 0,
        guide: {
          lineStyle: 'solid',
          lineColor: '#2e2e2e'
        },
        lineColor: '#2e2e2e',
        tick: {
          visible: false
        },
        item: {
          visible: false
        },
        label: {
          visible: false
        }
      },
      crosshairX: {
        scaleLabel: {
          visible: false
        },
        plotLabel: {
          thousandsSeparator: ',',
          padding: '5 10',
          borderRadius: 7,
          backgroundColor: '#cc3300',
          fontSize: 12,
          color: '#fff',
          borderWidth: 0,
          callout: true,
          calloutHeight: 18,
          calloutWidth: 10,
          multiple: true,
          text: '<span style="color:#FC7272;font-size:15px;font-weight:bold;">Q3 %scale-key-value</span><br><br>$%node-value'
        },
        lineWidth: '100%',
        alpha: 0.1
      },
      plot: {
        maxNodes: 0,
        maxTrackers: 0,
        activeArea: true
      },
      series: []
    };
    
    for (y = ymin; y <= ymax; y++) {
      var sdata = {
        shadow: true,
        shadowColor: '#133a46',
        shadowAngle: 90,
        shadowDistance: 3,
        lineWidth: 3,
        alphaArea: 0.5,
        lineColor: '#00b0e2',
        backgroundColor: '#133a46 #000000',
        type: 'area',
        clustered: true,
        values: data[y]
      };
      cdata['series'].push(sdata);
    }
    
    cdata['series'].push({
      type: 'line',
      lineWidth: 0,
      values: avgs
    });
    
    
    window.addEventListener('load', function() {
    
      zingchart.render({
        id: 'zc',
        width: 800,
        height: 400,
        output: 'svg',
        data: cdata
      });
    
    });