• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script 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
      });
    
    });