Clustered Chart (Demo4) - Mixed, Stacked

<!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 _r_ = function(min, max) {
      return Math.round(min + (max - min) * Math.random());
    }

    var aBarColors = [
      ['#D67F7F', '#C85454', '#BA2929', '#8C1F1F'],
      ['#9F8EA7', '#7F698A', '#5F436D', '#473252'],
      ['#7DBEDA', '#52A9CD', '#2793C1', '#1D6E91']
    ];

    var aData = [],
      p, y, m, ymin = 2015,
      ymax = 2018,
      aData2 = [],
      aData3 = [];
    for (p = 0; p < 3; p++) {
      aData[p] = [];
      for (y = ymin; y <= ymax; y++) {
        aData[p][y] = [];
        for (m = 0; m < 12; m++) {
          aData[p][y].push(_r_(1000000, 2000000));
        }
      }
      aData2[p] = [];
      for (m = 0; m < 12; m++) {
        aData2[p].push(_r_(1000000, 1200000));
      }
      aData3.push(_r_(10000000, 12000000));
    }

    var cdata = {
      backgroundColor: '#f3f3f3',
      type: 'mixed',
      clustered: true,
      plotarea: {
        margin: 'dynamic'
      },
      scaleX: {
        ranged: true,
        values: ['Apple', 'Dell', 'Microsoft']
      },
      scaleY: {
        short: true,
        scaleFactor: 3
      },
      plot: {
        animation: {
          speed: 300,
          effect: 1,
          sequence: 2
        },
        dataMon: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
        dataMonth: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        hoverState: {
          visible: false
        }
      },
      tooltip: {
        fontSize: 13,
        padding: 10,
        short: true,
        text: '%data-indicator: $%node-value'
      },
      series: [{
        type: 'line',
        dataIndicator: 'Capital estimated for 2019',
        tooltip: {
          decimals: 2
        },
        valueBox: {
          text: '$%node-value',
          short: true,
          decimals: 2
        },
        lineWidth: 5,
        lineColor: '#369',
        marker: {
          type: 'diamond',
          size: 6,
          backgroundColor: '#69c'
        },
        values: aData3
      }]
    };

    for (p = 0; p < 3; p++) {
      for (y = ymin; y <= ymax; y++) {
        var sdata = {
          type: 'vbar',
          stacked: true,
          stack: p,
          clustered: true,
          clusterIndex: p,
          barsSpaceLeft: 0.1,
          barsSpaceRight: 0.1,
          borderTop: '1px solid #ccc',
          dataIndicator: 'Sells in %data-month ' + y,
          values: aData[p][y],
          backgroundColor: aBarColors[p][y - ymin]
        };
        if (y === ymin) {
          sdata.valueBox = {
            placement: 'bottom-in',
            text: '%data-mon',
            color: '#fff',
            shadow: false,
            fontSize: 10
          };
        } else if (y === ymax) {
          sdata.valueBox = {
            placement: 'top-out',
            text: '%stack-total',
            short: true,
            decimals: 2,
            color: '#000',
            angle: 270,
            offsetY: -10
          };
        }
        cdata['series'].push(sdata);
      }
    }

    for (p = 0; p < 3; p++) {
      cdata['series'].push({
        type: 'line',
        clustered: true,
        clusterIndex: p,
        clusterOffset: 30,
        lineColor: '#000',
        marker: {
          backgroundColor: '#666'
        },
        dataIndicator: 'Total Losses/Returns',
        values: aData2[p]
      });
    }

    window.addEventListener('load', function() {

      zingchart.render({
        id: 'zc',
        width: 1000,
        height: 500,
        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 _r_ = function(min, max) {
  return Math.round(min + (max - min) * Math.random());
}

var aBarColors = [
  ['#D67F7F', '#C85454', '#BA2929', '#8C1F1F'],
  ['#9F8EA7', '#7F698A', '#5F436D', '#473252'],
  ['#7DBEDA', '#52A9CD', '#2793C1', '#1D6E91']
];

var aData = [],
  p, y, m, ymin = 2015,
  ymax = 2018,
  aData2 = [],
  aData3 = [];
for (p = 0; p < 3; p++) {
  aData[p] = [];
  for (y = ymin; y <= ymax; y++) {
    aData[p][y] = [];
    for (m = 0; m < 12; m++) {
      aData[p][y].push(_r_(1000000, 2000000));
    }
  }
  aData2[p] = [];
  for (m = 0; m < 12; m++) {
    aData2[p].push(_r_(1000000, 1200000));
  }
  aData3.push(_r_(10000000, 12000000));
}

var cdata = {
  backgroundColor: '#f3f3f3',
  type: 'mixed',
  clustered: true,
  plotarea: {
    margin: 'dynamic'
  },
  scaleX: {
    ranged: true,
    values: ['Apple', 'Dell', 'Microsoft']
  },
  scaleY: {
    short: true,
    scaleFactor: 3
  },
  plot: {
    animation: {
      speed: 300,
      effect: 1,
      sequence: 2
    },
    dataMon: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
    dataMonth: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    hoverState: {
      visible: false
    }
  },
  tooltip: {
    fontSize: 13,
    padding: 10,
    short: true,
    text: '%data-indicator: $%node-value'
  },
  series: [{
    type: 'line',
    dataIndicator: 'Capital estimated for 2019',
    tooltip: {
      decimals: 2
    },
    valueBox: {
      text: '$%node-value',
      short: true,
      decimals: 2
    },
    lineWidth: 5,
    lineColor: '#369',
    marker: {
      type: 'diamond',
      size: 6,
      backgroundColor: '#69c'
    },
    values: aData3
  }]
};

for (p = 0; p < 3; p++) {
  for (y = ymin; y <= ymax; y++) {
    var sdata = {
      type: 'vbar',
      stacked: true,
      stack: p,
      clustered: true,
      clusterIndex: p,
      barsSpaceLeft: 0.1,
      barsSpaceRight: 0.1,
      borderTop: '1px solid #ccc',
      dataIndicator: 'Sells in %data-month ' + y,
      values: aData[p][y],
      backgroundColor: aBarColors[p][y - ymin]
    };
    if (y === ymin) {
      sdata.valueBox = {
        placement: 'bottom-in',
        text: '%data-mon',
        color: '#fff',
        shadow: false,
        fontSize: 10
      };
    } else if (y === ymax) {
      sdata.valueBox = {
        placement: 'top-out',
        text: '%stack-total',
        short: true,
        decimals: 2,
        color: '#000',
        angle: 270,
        offsetY: -10
      };
    }
    cdata['series'].push(sdata);
  }
}

for (p = 0; p < 3; p++) {
  cdata['series'].push({
    type: 'line',
    clustered: true,
    clusterIndex: p,
    clusterOffset: 30,
    lineColor: '#000',
    marker: {
      backgroundColor: '#666'
    },
    dataIndicator: 'Total Losses/Returns',
    values: aData2[p]
  });
}

window.addEventListener('load', function() {

  zingchart.render({
    id: 'zc',
    width: 1000,
    height: 500,
    output: 'svg',
    data: cdata
  });

});