• Edit
  • Download
    1. <!doctype html>
    2. <html class="zc-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.  
    26. <body class="zc-body">
    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.   <script>
    31.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // HELPER METHODS
    32.     // -----------------------------
    33.     window.vectorplot_data = function(p) {
    34.       let x, y, length, direction, color;
    35.       let vdata = [];
    36.       let szx = [-100, 100],
    37.         szy = [-50, 50];
    38.       for (x = szx[0] + 5; x < szx[1]; x += 5) {
    39.         for (y = szy[0] + 5; y < szy[1]; y += 5) {
    40.           length = 50 + Math.abs(Math.round(Math.sin(((50 - x) * y) / 3000) * Math.cos((x + y) / 200) * 150));
    41.           direction = Math.round(Math.sin(((50 - x) * y) / 5000) * Math.cos((x + y) / 400) * 360);
    42.           color = '#000000';
    43.           if (length >= 50 && length < 70) {
    44.             color = '#00FF00';
    45.           } else if (length >= 70 && length < 100) {
    46.             color = '#FFFF00';
    47.           } else if (length >= 100 && length < 120) {
    48.             color = '#FF9900';
    49.           } else if (length >= 120 && length < 150) {
    50.             color = '#FF0000';
    51.           } else if (length >= 150 && length < 170) {
    52.             color = '#800080';
    53.           } else {
    54.             color = '#0000FF';
    55.           }
    56.           vdata.push([
    57.             x,
    58.             y,
    59.             length,
    60.             direction,
    61.             color
    62.           ]);
    63.         }
    64.       }
    65.       return vdata;
    66.     };
    67.  
    68.     // DEFINE DATA
    69.     // -----------------------------
    70.     let vData = vectorplot_data(1, 2, 3);
    71.  
    72.     // CHART CONFIG
    73.     // -----------------------------
    74.     let chartConfig = {
    75.       globals: {
    76.         fontFamily: 'Lucida Sans Unicode'
    77.       },
    78.       type: 'vectorplot',
    79.       plotarea: {
    80.         margin: 'dynamic'
    81.       },
    82.       scaleX: {
    83.         values: '-100:100:10',
    84.         guide: {
    85.           lineStyle: 'solid'
    86.         },
    87.         offset: 0
    88.       },
    89.       scaleY: {
    90.         values: '-50:50:10',
    91.         guide: {
    92.           lineStyle: 'solid'
    93.         },
    94.         offset: 0,
    95.       },
    96.       options: {
    97.         arrow: {
    98.           minLength: '6px',
    99.           maxLength: '12px',
    100.           style: {
    101.             size: '3px'
    102.           }
    103.         },
    104.         data: vData
    105.       },
    106.       tooltip: {
    107.         align: 'left',
    108.         alpha: 0.85,
    109.         backgroundColor: '#fff',
    110.         borderColor: '#999',
    111.         borderRadius: '7px',
    112.         borderWidth: '1px',
    113.         callout: true,
    114.         calloutWidth: '12px',
    115.         color: '#000',
    116.         fontSize: '13px',
    117.         padding: '15px',
    118.         placement: 'vertical'
    119.       }
    120.     };
    121.  
    122.     // RENDER CHARTS
    123.     // -----------------------------
    124.     zingchart.render({
    125.       id: 'myChart',
    126.       data: chartConfig,
    127.       height: '100%',
    128.       width: '100%'
    129.     });
    130.   </script>
    131. </body>
    132.  
    133. </html>
    1. <!doctype html>
    2. <html class="zc-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.  
    11. <body class="zc-body">
    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. </body>
    16.  
    17. </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. // HELPER METHODS
    2. // -----------------------------
    3. window.vectorplot_data = function(p) {
    4.   let x, y, length, direction, color;
    5.   let vdata = [];
    6.   let szx = [-100, 100],
    7.     szy = [-50, 50];
    8.   for (x = szx[0] + 5; x < szx[1]; x += 5) {
    9.     for (y = szy[0] + 5; y < szy[1]; y += 5) {
    10.       length = 50 + Math.abs(Math.round(Math.sin(((50 - x) * y) / 3000) * Math.cos((x + y) / 200) * 150));
    11.       direction = Math.round(Math.sin(((50 - x) * y) / 5000) * Math.cos((x + y) / 400) * 360);
    12.       color = '#000000';
    13.       if (length >= 50 && length < 70) {
    14.         color = '#00FF00';
    15.       } else if (length >= 70 && length < 100) {
    16.         color = '#FFFF00';
    17.       } else if (length >= 100 && length < 120) {
    18.         color = '#FF9900';
    19.       } else if (length >= 120 && length < 150) {
    20.         color = '#FF0000';
    21.       } else if (length >= 150 && length < 170) {
    22.         color = '#800080';
    23.       } else {
    24.         color = '#0000FF';
    25.       }
    26.       vdata.push([
    27.         x,
    28.         y,
    29.         length,
    30.         direction,
    31.         color
    32.       ]);
    33.     }
    34.   }
    35.   return vdata;
    36. };
    37.  
    38. // DEFINE DATA
    39. // -----------------------------
    40. let vData = vectorplot_data(1, 2, 3);
    41.  
    42. // CHART CONFIG
    43. // -----------------------------
    44. let chartConfig = {
    45.   globals: {
    46.     fontFamily: 'Lucida Sans Unicode'
    47.   },
    48.   type: 'vectorplot',
    49.   plotarea: {
    50.     margin: 'dynamic'
    51.   },
    52.   scaleX: {
    53.     values: '-100:100:10',
    54.     guide: {
    55.       lineStyle: 'solid'
    56.     },
    57.     offset: 0
    58.   },
    59.   scaleY: {
    60.     values: '-50:50:10',
    61.     guide: {
    62.       lineStyle: 'solid'
    63.     },
    64.     offset: 0,
    65.   },
    66.   options: {
    67.     arrow: {
    68.       minLength: '6px',
    69.       maxLength: '12px',
    70.       style: {
    71.         size: '3px'
    72.       }
    73.     },
    74.     data: vData
    75.   },
    76.   tooltip: {
    77.     align: 'left',
    78.     alpha: 0.85,
    79.     backgroundColor: '#fff',
    80.     borderColor: '#999',
    81.     borderRadius: '7px',
    82.     borderWidth: '1px',
    83.     callout: true,
    84.     calloutWidth: '12px',
    85.     color: '#000',
    86.     fontSize: '13px',
    87.     padding: '15px',
    88.     placement: 'vertical'
    89.   }
    90. };
    91.  
    92. // RENDER CHARTS
    93. // -----------------------------
    94. zingchart.render({
    95.   id: 'myChart',
    96.   data: chartConfig,
    97.   height: '100%',
    98.   width: '100%'
    99. });