Clustered Chart (Demo2)

<!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
  });

});