• 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 ymin = 1997,
    35.       ymax = 2010;
    36.  
    37.     var _r_ = function(min, max) {
    38.       return Math.round(min + (max - min) * Math.random());
    39.     }
    40.  
    41.     // create fake data, will plot Q3 data (12 weeks) for each year
    42.     var data = {},
    43.       y, w;
    44.     var avgs = [];
    45.     var v = _r_(2000000, 4000000);
    46.     for (y = ymin; y <= ymax; y++) {
    47.       data[y] = [];
    48.       var sum = 0;
    49.       for (w = 0; w < 12; w++) {
    50.         v = v + _r_(-40000, 40000);
    51.         data[y].push(v);
    52.         sum += v;
    53.       }
    54.       avgs.push(Math.round(sum / 12));
    55.       // make a bigger jump
    56.       if (Math.random() > 0.5) {
    57.         v += _r_(100000, 200000);
    58.       } else {
    59.         v -= _r_(100000, 200000);
    60.       }
    61.     }
    62.  
    63.     var cdata = {
    64.       type: 'mixed',
    65.       clustered: true,
    66.       backgroundColor: '#000',
    67.       title: {
    68.         color: '#fff',
    69.         adjustLayout: true,
    70.         text: 'Q3 comparison from ' + ymin + ' until ' + ymax
    71.       },
    72.       plotarea: {
    73.         margin: 'dynamic 15 dynamic 15',
    74.         marginBottomOffset: 5
    75.       },
    76.       scaleX: {
    77.         label: {
    78.           visible: false
    79.         },
    80.         lineColor: '#2e2e2e',
    81.         guide: {
    82.           visible: true,
    83.           lineStyle: 'solid',
    84.           lineColor: '#2e2e2e'
    85.         },
    86.         item: {
    87.           fontFamily: 'Impact',
    88.           fontSize: 12,
    89.           fontWeight: 'normal',
    90.           color: '#666'
    91.         },
    92.         tick: {
    93.           visible: false
    94.         },
    95.         format: '<span style="color:#ccc">Q3</span> %scale-value',
    96.         values: [ymin, ymax, 1].join(':')
    97.       },
    98.       scaleY: {
    99.         minValue: 0,
    100.         guide: {
    101.           lineStyle: 'solid',
    102.           lineColor: '#2e2e2e'
    103.         },
    104.         lineColor: '#2e2e2e',
    105.         tick: {
    106.           visible: false
    107.         },
    108.         item: {
    109.           visible: false
    110.         },
    111.         label: {
    112.           visible: false
    113.         }
    114.       },
    115.       crosshairX: {
    116.         scaleLabel: {
    117.           visible: false
    118.         },
    119.         plotLabel: {
    120.           thousandsSeparator: ',',
    121.           padding: '5 10',
    122.           borderRadius: 7,
    123.           backgroundColor: '#cc3300',
    124.           fontSize: 12,
    125.           color: '#fff',
    126.           borderWidth: 0,
    127.           callout: true,
    128.           calloutHeight: 18,
    129.           calloutWidth: 10,
    130.           multiple: true,
    131.           text: '<span style="color:#FC7272;font-size:15px;font-weight:bold;">Q3 %scale-key-value</span><br><br>$%node-value'
    132.         },
    133.         lineWidth: '100%',
    134.         alpha: 0.1
    135.       },
    136.       plot: {
    137.         maxNodes: 0,
    138.         maxTrackers: 0,
    139.         activeArea: true
    140.       },
    141.       series: []
    142.     };
    143.  
    144.     for (y = ymin; y <= ymax; y++) {
    145.       var sdata = {
    146.         shadow: true,
    147.         shadowColor: '#133a46',
    148.         shadowAngle: 90,
    149.         shadowDistance: 3,
    150.         lineWidth: 3,
    151.         alphaArea: 0.5,
    152.         lineColor: '#00b0e2',
    153.         backgroundColor: '#133a46 #000000',
    154.         type: 'area',
    155.         clustered: true,
    156.         values: data[y]
    157.       };
    158.       cdata['series'].push(sdata);
    159.     }
    160.  
    161.     cdata['series'].push({
    162.       type: 'line',
    163.       lineWidth: 0,
    164.       values: avgs
    165.     });
    166.  
    167.  
    168.     window.addEventListener('load', function() {
    169.  
    170.       zingchart.render({
    171.         id: 'zc',
    172.         width: 800,
    173.         height: 400,
    174.         output: 'svg',
    175.         data: cdata
    176.       });
    177.  
    178.     });
    179.   </script>
    180. </body>
    181.  
    182. </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 ymin = 1997,
    2.   ymax = 2010;
    3.  
    4. var _r_ = function(min, max) {
    5.   return Math.round(min + (max - min) * Math.random());
    6. }
    7.  
    8. // create fake data, will plot Q3 data (12 weeks) for each year
    9. var data = {},
    10.   y, w;
    11. var avgs = [];
    12. var v = _r_(2000000, 4000000);
    13. for (y = ymin; y <= ymax; y++) {
    14.   data[y] = [];
    15.   var sum = 0;
    16.   for (w = 0; w < 12; w++) {
    17.     v = v + _r_(-40000, 40000);
    18.     data[y].push(v);
    19.     sum += v;
    20.   }
    21.   avgs.push(Math.round(sum / 12));
    22.   // make a bigger jump
    23.   if (Math.random() > 0.5) {
    24.     v += _r_(100000, 200000);
    25.   } else {
    26.     v -= _r_(100000, 200000);
    27.   }
    28. }
    29.  
    30. var cdata = {
    31.   type: 'mixed',
    32.   clustered: true,
    33.   backgroundColor: '#000',
    34.   title: {
    35.     color: '#fff',
    36.     adjustLayout: true,
    37.     text: 'Q3 comparison from ' + ymin + ' until ' + ymax
    38.   },
    39.   plotarea: {
    40.     margin: 'dynamic 15 dynamic 15',
    41.     marginBottomOffset: 5
    42.   },
    43.   scaleX: {
    44.     label: {
    45.       visible: false
    46.     },
    47.     lineColor: '#2e2e2e',
    48.     guide: {
    49.       visible: true,
    50.       lineStyle: 'solid',
    51.       lineColor: '#2e2e2e'
    52.     },
    53.     item: {
    54.       fontFamily: 'Impact',
    55.       fontSize: 12,
    56.       fontWeight: 'normal',
    57.       color: '#666'
    58.     },
    59.     tick: {
    60.       visible: false
    61.     },
    62.     format: '<span style="color:#ccc">Q3</span> %scale-value',
    63.     values: [ymin, ymax, 1].join(':')
    64.   },
    65.   scaleY: {
    66.     minValue: 0,
    67.     guide: {
    68.       lineStyle: 'solid',
    69.       lineColor: '#2e2e2e'
    70.     },
    71.     lineColor: '#2e2e2e',
    72.     tick: {
    73.       visible: false
    74.     },
    75.     item: {
    76.       visible: false
    77.     },
    78.     label: {
    79.       visible: false
    80.     }
    81.   },
    82.   crosshairX: {
    83.     scaleLabel: {
    84.       visible: false
    85.     },
    86.     plotLabel: {
    87.       thousandsSeparator: ',',
    88.       padding: '5 10',
    89.       borderRadius: 7,
    90.       backgroundColor: '#cc3300',
    91.       fontSize: 12,
    92.       color: '#fff',
    93.       borderWidth: 0,
    94.       callout: true,
    95.       calloutHeight: 18,
    96.       calloutWidth: 10,
    97.       multiple: true,
    98.       text: '<span style="color:#FC7272;font-size:15px;font-weight:bold;">Q3 %scale-key-value</span><br><br>$%node-value'
    99.     },
    100.     lineWidth: '100%',
    101.     alpha: 0.1
    102.   },
    103.   plot: {
    104.     maxNodes: 0,
    105.     maxTrackers: 0,
    106.     activeArea: true
    107.   },
    108.   series: []
    109. };
    110.  
    111. for (y = ymin; y <= ymax; y++) {
    112.   var sdata = {
    113.     shadow: true,
    114.     shadowColor: '#133a46',
    115.     shadowAngle: 90,
    116.     shadowDistance: 3,
    117.     lineWidth: 3,
    118.     alphaArea: 0.5,
    119.     lineColor: '#00b0e2',
    120.     backgroundColor: '#133a46 #000000',
    121.     type: 'area',
    122.     clustered: true,
    123.     values: data[y]
    124.   };
    125.   cdata['series'].push(sdata);
    126. }
    127.  
    128. cdata['series'].push({
    129.   type: 'line',
    130.   lineWidth: 0,
    131.   values: avgs
    132. });
    133.  
    134.  
    135. window.addEventListener('load', function() {
    136.  
    137.   zingchart.render({
    138.     id: 'zc',
    139.     width: 800,
    140.     height: 400,
    141.     output: 'svg',
    142.     data: cdata
    143.   });
    144.  
    145. });