• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <div id="zc"></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     var _r_ = function(min, max) {
    35.       return Math.round(min + (max - min) * Math.random());
    36.     }
    37.  
    38.     var aBarColors = [
    39.       ['#D67F7F', '#C85454', '#BA2929', '#8C1F1F'],
    40.       ['#9F8EA7', '#7F698A', '#5F436D', '#473252'],
    41.       ['#7DBEDA', '#52A9CD', '#2793C1', '#1D6E91']
    42.     ];
    43.  
    44.     var aData = [],
    45.       p, y, m, ymin = 2015,
    46.       ymax = 2018,
    47.       aData2 = [],
    48.       aData3 = [];
    49.     for (p = 0; p < 3; p++) {
    50.       aData[p] = [];
    51.       for (y = ymin; y <= ymax; y++) {
    52.         aData[p][y] = [];
    53.         for (m = 0; m < 12; m++) {
    54.           aData[p][y].push(_r_(1000000, 2000000));
    55.         }
    56.       }
    57.       aData2[p] = [];
    58.       for (m = 0; m < 12; m++) {
    59.         aData2[p].push(_r_(1000000, 1200000));
    60.       }
    61.       aData3.push(_r_(10000000, 12000000));
    62.     }
    63.  
    64.     var cdata = {
    65.       backgroundColor: '#f3f3f3',
    66.       type: 'mixed',
    67.       clustered: true,
    68.       plotarea: {
    69.         margin: 'dynamic'
    70.       },
    71.       scaleX: {
    72.         ranged: true,
    73.         values: ['Apple', 'Dell', 'Microsoft']
    74.       },
    75.       scaleY: {
    76.         short: true,
    77.         scaleFactor: 3
    78.       },
    79.       plot: {
    80.         animation: {
    81.           speed: 300,
    82.           effect: 1,
    83.           sequence: 2
    84.         },
    85.         dataMon: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
    86.         dataMonth: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    87.         hoverState: {
    88.           visible: false
    89.         }
    90.       },
    91.       tooltip: {
    92.         fontSize: 13,
    93.         padding: 10,
    94.         short: true,
    95.         text: '%data-indicator: $%node-value'
    96.       },
    97.       series: [{
    98.         type: 'line',
    99.         dataIndicator: 'Capital estimated for 2019',
    100.         tooltip: {
    101.           decimals: 2
    102.         },
    103.         valueBox: {
    104.           text: '$%node-value',
    105.           short: true,
    106.           decimals: 2
    107.         },
    108.         lineWidth: 5,
    109.         lineColor: '#369',
    110.         marker: {
    111.           type: 'diamond',
    112.           size: 6,
    113.           backgroundColor: '#69c'
    114.         },
    115.         values: aData3
    116.       }]
    117.     };
    118.  
    119.     for (p = 0; p < 3; p++) {
    120.       for (y = ymin; y <= ymax; y++) {
    121.         var sdata = {
    122.           type: 'vbar',
    123.           stacked: true,
    124.           stack: p,
    125.           clustered: true,
    126.           clusterIndex: p,
    127.           barsSpaceLeft: 0.1,
    128.           barsSpaceRight: 0.1,
    129.           borderTop: '1px solid #ccc',
    130.           dataIndicator: 'Sells in %data-month ' + y,
    131.           values: aData[p][y],
    132.           backgroundColor: aBarColors[p][y - ymin]
    133.         };
    134.         if (y === ymin) {
    135.           sdata.valueBox = {
    136.             placement: 'bottom-in',
    137.             text: '%data-mon',
    138.             color: '#fff',
    139.             shadow: false,
    140.             fontSize: 10
    141.           };
    142.         } else if (y === ymax) {
    143.           sdata.valueBox = {
    144.             placement: 'top-out',
    145.             text: '%stack-total',
    146.             short: true,
    147.             decimals: 2,
    148.             color: '#000',
    149.             angle: 270,
    150.             offsetY: -10
    151.           };
    152.         }
    153.         cdata['series'].push(sdata);
    154.       }
    155.     }
    156.  
    157.     for (p = 0; p < 3; p++) {
    158.       cdata['series'].push({
    159.         type: 'line',
    160.         clustered: true,
    161.         clusterIndex: p,
    162.         clusterOffset: 30,
    163.         lineColor: '#000',
    164.         marker: {
    165.           backgroundColor: '#666'
    166.         },
    167.         dataIndicator: 'Total Losses/Returns',
    168.         values: aData2[p]
    169.       });
    170.     }
    171.  
    172.     window.addEventListener('load', function() {
    173.  
    174.       zingchart.render({
    175.         id: 'zc',
    176.         width: 1000,
    177.         height: 500,
    178.         output: 'svg',
    179.         data: cdata
    180.       });
    181.  
    182.     });
    183.   </script>
    184. </body>
    185.  
    186. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id="zc"></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. var _r_ = function(min, max) {
    2.   return Math.round(min + (max - min) * Math.random());
    3. }
    4.  
    5. var aBarColors = [
    6.   ['#D67F7F', '#C85454', '#BA2929', '#8C1F1F'],
    7.   ['#9F8EA7', '#7F698A', '#5F436D', '#473252'],
    8.   ['#7DBEDA', '#52A9CD', '#2793C1', '#1D6E91']
    9. ];
    10.  
    11. var aData = [],
    12.   p, y, m, ymin = 2015,
    13.   ymax = 2018,
    14.   aData2 = [],
    15.   aData3 = [];
    16. for (p = 0; p < 3; p++) {
    17.   aData[p] = [];
    18.   for (y = ymin; y <= ymax; y++) {
    19.     aData[p][y] = [];
    20.     for (m = 0; m < 12; m++) {
    21.       aData[p][y].push(_r_(1000000, 2000000));
    22.     }
    23.   }
    24.   aData2[p] = [];
    25.   for (m = 0; m < 12; m++) {
    26.     aData2[p].push(_r_(1000000, 1200000));
    27.   }
    28.   aData3.push(_r_(10000000, 12000000));
    29. }
    30.  
    31. var cdata = {
    32.   backgroundColor: '#f3f3f3',
    33.   type: 'mixed',
    34.   clustered: true,
    35.   plotarea: {
    36.     margin: 'dynamic'
    37.   },
    38.   scaleX: {
    39.     ranged: true,
    40.     values: ['Apple', 'Dell', 'Microsoft']
    41.   },
    42.   scaleY: {
    43.     short: true,
    44.     scaleFactor: 3
    45.   },
    46.   plot: {
    47.     animation: {
    48.       speed: 300,
    49.       effect: 1,
    50.       sequence: 2
    51.     },
    52.     dataMon: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
    53.     dataMonth: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    54.     hoverState: {
    55.       visible: false
    56.     }
    57.   },
    58.   tooltip: {
    59.     fontSize: 13,
    60.     padding: 10,
    61.     short: true,
    62.     text: '%data-indicator: $%node-value'
    63.   },
    64.   series: [{
    65.     type: 'line',
    66.     dataIndicator: 'Capital estimated for 2019',
    67.     tooltip: {
    68.       decimals: 2
    69.     },
    70.     valueBox: {
    71.       text: '$%node-value',
    72.       short: true,
    73.       decimals: 2
    74.     },
    75.     lineWidth: 5,
    76.     lineColor: '#369',
    77.     marker: {
    78.       type: 'diamond',
    79.       size: 6,
    80.       backgroundColor: '#69c'
    81.     },
    82.     values: aData3
    83.   }]
    84. };
    85.  
    86. for (p = 0; p < 3; p++) {
    87.   for (y = ymin; y <= ymax; y++) {
    88.     var sdata = {
    89.       type: 'vbar',
    90.       stacked: true,
    91.       stack: p,
    92.       clustered: true,
    93.       clusterIndex: p,
    94.       barsSpaceLeft: 0.1,
    95.       barsSpaceRight: 0.1,
    96.       borderTop: '1px solid #ccc',
    97.       dataIndicator: 'Sells in %data-month ' + y,
    98.       values: aData[p][y],
    99.       backgroundColor: aBarColors[p][y - ymin]
    100.     };
    101.     if (y === ymin) {
    102.       sdata.valueBox = {
    103.         placement: 'bottom-in',
    104.         text: '%data-mon',
    105.         color: '#fff',
    106.         shadow: false,
    107.         fontSize: 10
    108.       };
    109.     } else if (y === ymax) {
    110.       sdata.valueBox = {
    111.         placement: 'top-out',
    112.         text: '%stack-total',
    113.         short: true,
    114.         decimals: 2,
    115.         color: '#000',
    116.         angle: 270,
    117.         offsetY: -10
    118.       };
    119.     }
    120.     cdata['series'].push(sdata);
    121.   }
    122. }
    123.  
    124. for (p = 0; p < 3; p++) {
    125.   cdata['series'].push({
    126.     type: 'line',
    127.     clustered: true,
    128.     clusterIndex: p,
    129.     clusterOffset: 30,
    130.     lineColor: '#000',
    131.     marker: {
    132.       backgroundColor: '#666'
    133.     },
    134.     dataIndicator: 'Total Losses/Returns',
    135.     values: aData2[p]
    136.   });
    137. }
    138.  
    139. window.addEventListener('load', function() {
    140.  
    141.   zingchart.render({
    142.     id: 'zc',
    143.     width: 1000,
    144.     height: 500,
    145.     output: 'svg',
    146.     data: cdata
    147.   });
    148.  
    149. });