• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .zc-body {
    10.       background: #fff;
    11.     }
    12.  
    13.     .chart--container {
    14.       height: 100%;
    15.       width: 100%;
    16.       min-height: 530px;
    17.     }
    18.  
    19.     .zc-ref {
    20.       display: none;
    21.     }
    22.   </style>
    23. </head>
    24.  
    25. <body class="zc-body">
    26.  
    27.   <div id="myChart" class="chart--container">
    28.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    29.   </div>
    30.  
    31.   <script>
    32.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE CHART LOCATIONS (IDS)
    33.     // -----------------------------
    34.     // Main chart render location
    35.     let chartId = 'myChart';
    36.  
    37.     // VARS
    38.     // -----------------------------
    39.     let N = 250000,
    40.       n,
    41.       x,
    42.       y,
    43.       v;
    44.     zingchart.TIMEOUT = 1;
    45.  
    46.     // CHART CONFIG
    47.     // -----------------------------
    48.  
    49.     let chartConfig = {
    50.       flat: true,
    51.       type: 'scatter',
    52.       heatmap: {
    53.         tooltip: {
    54.           text: '[%scale-key-value / %scale-value-value]: %value',
    55.           callout: true,
    56.           calloutHeight: 6,
    57.           calloutPosition: 'bottom',
    58.           jsRule: 'myHeatmapTooltipJsRule()',
    59.         },
    60.         brushType: 'square',
    61.         alpha: 1,
    62.         async: true,
    63.         blur: 0,
    64.         gradientColors: '#2196F3 #3F51B5 #42A5F5 #7986CB',
    65.         gradientStops: '0 0.25 0.5 0.75 1',
    66.         graph: true,
    67.         size: 2,
    68.       },
    69.       plot: {},
    70.       plotarea: {
    71.         margin: '40px',
    72.       },
    73.       scaleX: {
    74.         values: '0:1000:0.1',
    75.         guide: {
    76.           visible: false,
    77.         },
    78.         item: {
    79.           fontSize: '9px',
    80.         },
    81.         normalize: 1,
    82.         offset: 0,
    83.         zooming: 1,
    84.         zoomSnap: true,
    85.       },
    86.       scaleY: {
    87.         values: '0:100:1',
    88.         guide: {
    89.           visible: false,
    90.         },
    91.         item: {
    92.           fontSize: '9px',
    93.         },
    94.         normalize: 1,
    95.         offset: 0,
    96.         zooming: 1,
    97.         zoomSnap: true,
    98.       },
    99.       zoom: {
    100.         label: {},
    101.       },
    102.       series: [{}],
    103.     };
    104.  
    105.     // RENDER CHARTS
    106.     // -----------------------------
    107.  
    108.     zingchart.bind(chartId, 'load', function() {
    109.       console.time('data-generation');
    110.       let aData = new Array(N * 4);
    111.       for (n = 0; n < N; n++) {
    112.         x = ZC._r_(0, 100000) / 100;
    113.         y = 50 + (ZC._r_(100, 800 * Math.sin(x / 100)) / 10) * Math.cos(x / 50);
    114.         v = 1;
    115.         aData[N * 0 + n] = [
    116.           parseFloat(x.toFixed(1)),
    117.           parseFloat(y.toFixed(1)),
    118.           v,
    119.           {
    120.             text: 'Apple',
    121.             color: '#900'
    122.           },
    123.         ];
    124.       }
    125.       for (n = 0; n < N; n++) {
    126.         x = ZC._r_(0, 150000) / 150;
    127.         y = 50 + (ZC._r_(200, 600 * Math.sin(x / 150)) / 10) * Math.cos(x / 100);
    128.         v = 2;
    129.         aData[N * 1 + n] = [
    130.           parseFloat(x.toFixed(1)),
    131.           parseFloat(y.toFixed(1)),
    132.           v,
    133.           {
    134.             text: 'Dell',
    135.             color: '#090'
    136.           },
    137.         ];
    138.       }
    139.       for (n = 0; n < N; n++) {
    140.         x = ZC._r_(0, 90000) / 90;
    141.         y = 30 + (ZC._r_(300, 500 * Math.sin(x / 110)) / 10) * Math.cos(x / 120);
    142.         v = 3;
    143.         aData[N * 2 + n] = [
    144.           parseFloat(x.toFixed(1)),
    145.           parseFloat(y.toFixed(1)),
    146.           v,
    147.           {
    148.             text: 'Microsoft',
    149.             color: '#009'
    150.           },
    151.         ];
    152.       }
    153.       for (n = 0; n < N; n++) {
    154.         x = ZC._r_(0, 200000) / 200;
    155.         y = 60 + (ZC._r_(100, 300 * Math.sin(x / 120)) / 10) * Math.cos(x / 80);
    156.         v = 4;
    157.         aData[N * 3 + n] = [
    158.           parseFloat(x.toFixed(1)),
    159.           parseFloat(y.toFixed(1)),
    160.           v,
    161.           {
    162.             text: 'IBM',
    163.             color: '#909'
    164.           },
    165.         ];
    166.       }
    167.       console.timeEnd('data-generation');
    168.       zingchart.exec(chartId, 'heatmap.setdata', {
    169.         data: aData,
    170.       });
    171.     });
    172.     zingchart.loadModules('heatmap', function() {
    173.       zingchart.render({
    174.         id: chartId,
    175.         width: '100%',
    176.         height: '560px',
    177.         output: 'canvas',
    178.         data: chartConfig,
    179.         modules: 'heatmap',
    180.       });
    181.     });
    182.  
    183.     // HELPER FNS
    184.     // -----------------------------
    185.  
    186.     function myHeatmapTooltipJsRule(p, info) {
    187.       let obj = {};
    188.       if (info) {
    189.         obj['border-color'] = info['color'];
    190.         obj['text'] =
    191.           '<span style="font-weight:900;color:' +
    192.           info['color'] +
    193.           '">' +
    194.           info['text'] +
    195.           ':</span> ' +
    196.           p['key'] +
    197.           '/' +
    198.           p['val'];
    199.       }
    200.       return obj;
    201.     }
    202.   </script>
    203. </body>
    204.  
    205. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body class="zc-body">
    11.  
    12.   <div id="myChart" class="chart--container">
    13.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    14.   </div>
    15.  
    16. </body>
    17.  
    18. </html>
    1. .zc-body {
    2.   background: #fff;
    3. }
    4.  
    5. .chart--container {
    6.   height: 100%;
    7.   width: 100%;
    8.   min-height: 530px;
    9. }
    10.  
    11. .zc-ref {
    12.   display: none;
    13. }
    1. // DEFINE CHART LOCATIONS (IDS)
    2. // -----------------------------
    3. // Main chart render location
    4. let chartId = 'myChart';
    5.  
    6. // VARS
    7. // -----------------------------
    8. let N = 250000,
    9.   n,
    10.   x,
    11.   y,
    12.   v;
    13. zingchart.TIMEOUT = 1;
    14.  
    15. // CHART CONFIG
    16. // -----------------------------
    17.  
    18. let chartConfig = {
    19.   flat: true,
    20.   type: 'scatter',
    21.   heatmap: {
    22.     tooltip: {
    23.       text: '[%scale-key-value / %scale-value-value]: %value',
    24.       callout: true,
    25.       calloutHeight: 6,
    26.       calloutPosition: 'bottom',
    27.       jsRule: 'myHeatmapTooltipJsRule()',
    28.     },
    29.     brushType: 'square',
    30.     alpha: 1,
    31.     async: true,
    32.     blur: 0,
    33.     gradientColors: '#2196F3 #3F51B5 #42A5F5 #7986CB',
    34.     gradientStops: '0 0.25 0.5 0.75 1',
    35.     graph: true,
    36.     size: 2,
    37.   },
    38.   plot: {},
    39.   plotarea: {
    40.     margin: '40px',
    41.   },
    42.   scaleX: {
    43.     values: '0:1000:0.1',
    44.     guide: {
    45.       visible: false,
    46.     },
    47.     item: {
    48.       fontSize: '9px',
    49.     },
    50.     normalize: 1,
    51.     offset: 0,
    52.     zooming: 1,
    53.     zoomSnap: true,
    54.   },
    55.   scaleY: {
    56.     values: '0:100:1',
    57.     guide: {
    58.       visible: false,
    59.     },
    60.     item: {
    61.       fontSize: '9px',
    62.     },
    63.     normalize: 1,
    64.     offset: 0,
    65.     zooming: 1,
    66.     zoomSnap: true,
    67.   },
    68.   zoom: {
    69.     label: {},
    70.   },
    71.   series: [{}],
    72. };
    73.  
    74. // RENDER CHARTS
    75. // -----------------------------
    76.  
    77. zingchart.bind(chartId, 'load', function() {
    78.   console.time('data-generation');
    79.   let aData = new Array(N * 4);
    80.   for (n = 0; n < N; n++) {
    81.     x = ZC._r_(0, 100000) / 100;
    82.     y = 50 + (ZC._r_(100, 800 * Math.sin(x / 100)) / 10) * Math.cos(x / 50);
    83.     v = 1;
    84.     aData[N * 0 + n] = [
    85.       parseFloat(x.toFixed(1)),
    86.       parseFloat(y.toFixed(1)),
    87.       v,
    88.       {
    89.         text: 'Apple',
    90.         color: '#900'
    91.       },
    92.     ];
    93.   }
    94.   for (n = 0; n < N; n++) {
    95.     x = ZC._r_(0, 150000) / 150;
    96.     y = 50 + (ZC._r_(200, 600 * Math.sin(x / 150)) / 10) * Math.cos(x / 100);
    97.     v = 2;
    98.     aData[N * 1 + n] = [
    99.       parseFloat(x.toFixed(1)),
    100.       parseFloat(y.toFixed(1)),
    101.       v,
    102.       {
    103.         text: 'Dell',
    104.         color: '#090'
    105.       },
    106.     ];
    107.   }
    108.   for (n = 0; n < N; n++) {
    109.     x = ZC._r_(0, 90000) / 90;
    110.     y = 30 + (ZC._r_(300, 500 * Math.sin(x / 110)) / 10) * Math.cos(x / 120);
    111.     v = 3;
    112.     aData[N * 2 + n] = [
    113.       parseFloat(x.toFixed(1)),
    114.       parseFloat(y.toFixed(1)),
    115.       v,
    116.       {
    117.         text: 'Microsoft',
    118.         color: '#009'
    119.       },
    120.     ];
    121.   }
    122.   for (n = 0; n < N; n++) {
    123.     x = ZC._r_(0, 200000) / 200;
    124.     y = 60 + (ZC._r_(100, 300 * Math.sin(x / 120)) / 10) * Math.cos(x / 80);
    125.     v = 4;
    126.     aData[N * 3 + n] = [
    127.       parseFloat(x.toFixed(1)),
    128.       parseFloat(y.toFixed(1)),
    129.       v,
    130.       {
    131.         text: 'IBM',
    132.         color: '#909'
    133.       },
    134.     ];
    135.   }
    136.   console.timeEnd('data-generation');
    137.   zingchart.exec(chartId, 'heatmap.setdata', {
    138.     data: aData,
    139.   });
    140. });
    141. zingchart.loadModules('heatmap', function() {
    142.   zingchart.render({
    143.     id: chartId,
    144.     width: '100%',
    145.     height: '560px',
    146.     output: 'canvas',
    147.     data: chartConfig,
    148.     modules: 'heatmap',
    149.   });
    150. });
    151.  
    152. // HELPER FNS
    153. // -----------------------------
    154.  
    155. function myHeatmapTooltipJsRule(p, info) {
    156.   let obj = {};
    157.   if (info) {
    158.     obj['border-color'] = info['color'];
    159.     obj['text'] =
    160.       '<span style="font-weight:900;color:' +
    161.       info['color'] +
    162.       '">' +
    163.       info['text'] +
    164.       ':</span> ' +
    165.       p['key'] +
    166.       '/' +
    167.       p['val'];
    168.   }
    169.   return obj;
    170. }