• 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-color: #F7F7F7;
    11.     }
    12.  
    13.     .chart--container {
    14.       width: 100%;
    15.       height: 100%;
    16.       min-height: 530px;
    17.     }
    18.  
    19.     .zc-ref {
    20.       display: none;
    21.     }
    22.   </style>
    23. </head>
    24.  
    25. <body>
    26.   <div id="myChart" class="chart--container">
    27.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    28.   </div>
    29.   <script>
    30.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    31.     let chartConfig = {
    32.       type: "scatter",
    33.       backgroundColor: '#F7F7F7',
    34.       title: {
    35.         text: 'Points Along A Sine Wave'
    36.       },
    37.       plot: {
    38.         selectionMode: "none", // turn off normal selection   
    39.         marker: {
    40.           borderWidth: 0
    41.         },
    42.         selectedMarker: {
    43.           size: '9px',
    44.           borderWidth: '1px',
    45.           borderColor: '#000',
    46.         },
    47.         hoverMarker: {
    48.           size: '7px'
    49.         },
    50.         tooltip: {
    51.           text: '%t: %v',
    52.           backgroundColor: '#FFF',
    53.           borderColor: '#000',
    54.           borderRadius: '4px',
    55.           borderWidth: '1px',
    56.           fontColor: '#000',
    57.           fontSize: '14px'
    58.         }
    59.       },
    60.       plotarea: {
    61.         margin: 'dynamic'
    62.       },
    63.       scaleX: {
    64.         visible: false
    65.       },
    66.       scaleY: {
    67.         minValue: -2,
    68.         maxValue: 2,
    69.         step: 1,
    70.         guide: {
    71.           visible: false
    72.         },
    73.         lineColor: '#90CAF9',
    74.         lineWidth: '2px',
    75.         refLine: {
    76.           lineColor: '#90CAF9',
    77.           lineWidth: '2px'
    78.         },
    79.         item: {
    80.           fontColor: '#90CAF9',
    81.           fontSize: '14px'
    82.         },
    83.         tick: {
    84.           lineColor: '#90CAF9'
    85.         }
    86.       },
    87.       selectionTool: {
    88.         mask: {
    89.           alpha: 0.5,
    90.           backgroundColor: "yellow",
    91.           borderColor: "red",
    92.           borderWidth: '2px'
    93.         }
    94.       },
    95.       series: [{
    96.           values: (function() {
    97.             let aV = [];
    98.             let len = 500;
    99.             let x = 0;
    100.             while (len--) {
    101.               x = (Math.random() * 10).toFixed(3) - 0;
    102.               aV.push([
    103.                 x,
    104.                 (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    105.               ]);
    106.             }
    107.             return aV;
    108.           })(),
    109.           backgroundColor: '#F48FB1',
    110.           text: 'Sin Wave One',
    111.           marker: {
    112.             size: 5,
    113.             alpha: .85,
    114.             backgroundColor: '#F48FB1'
    115.           }
    116.         },
    117.         {
    118.           values: (function() {
    119.             let aV = [];
    120.             let len = 500;
    121.             let x = 0;
    122.             while (len--) {
    123.               x = (Math.random() * 10).toFixed(3) - 0;
    124.               aV.push([
    125.                 x,
    126.                 (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    127.               ]);
    128.             }
    129.             return aV;
    130.           })(),
    131.           backgroundColor: '#F48FB1',
    132.           text: 'Sin Wave Two',
    133.           marker: {
    134.             size: 5,
    135.             alpha: .85,
    136.             backgroundColor: '#CE93D8'
    137.           }
    138.         }
    139.       ]
    140.     };
    141.  
    142.     // Load the selection-tool and render the chart once its loaded
    143.     zingchart.loadModules('selection-tool', function() {
    144.       zingchart.render({
    145.         id: 'myChart',
    146.         data: chartConfig,
    147.         height: '100%',
    148.         width: '100%',
    149.         modules: 'selection-tool'
    150.       });
    151.     });
    152.   </script>
    153. </body>
    154.  
    155. </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>
    11.   <div id="myChart" class="chart--container">
    12.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    13.   </div>
    14. </body>
    15.  
    16. </html>
    1. .zc-body {
    2.   background-color: #F7F7F7;
    3. }
    4.  
    5. .chart--container {
    6.   width: 100%;
    7.   height: 100%;
    8.   min-height: 530px;
    9. }
    10.  
    11. .zc-ref {
    12.   display: none;
    13. }
    1. let chartConfig = {
    2.   type: "scatter",
    3.   backgroundColor: '#F7F7F7',
    4.   title: {
    5.     text: 'Points Along A Sine Wave'
    6.   },
    7.   plot: {
    8.     selectionMode: "none", // turn off normal selection   
    9.     marker: {
    10.       borderWidth: 0
    11.     },
    12.     selectedMarker: {
    13.       size: '9px',
    14.       borderWidth: '1px',
    15.       borderColor: '#000',
    16.     },
    17.     hoverMarker: {
    18.       size: '7px'
    19.     },
    20.     tooltip: {
    21.       text: '%t: %v',
    22.       backgroundColor: '#FFF',
    23.       borderColor: '#000',
    24.       borderRadius: '4px',
    25.       borderWidth: '1px',
    26.       fontColor: '#000',
    27.       fontSize: '14px'
    28.     }
    29.   },
    30.   plotarea: {
    31.     margin: 'dynamic'
    32.   },
    33.   scaleX: {
    34.     visible: false
    35.   },
    36.   scaleY: {
    37.     minValue: -2,
    38.     maxValue: 2,
    39.     step: 1,
    40.     guide: {
    41.       visible: false
    42.     },
    43.     lineColor: '#90CAF9',
    44.     lineWidth: '2px',
    45.     refLine: {
    46.       lineColor: '#90CAF9',
    47.       lineWidth: '2px'
    48.     },
    49.     item: {
    50.       fontColor: '#90CAF9',
    51.       fontSize: '14px'
    52.     },
    53.     tick: {
    54.       lineColor: '#90CAF9'
    55.     }
    56.   },
    57.   selectionTool: {
    58.     mask: {
    59.       alpha: 0.5,
    60.       backgroundColor: "yellow",
    61.       borderColor: "red",
    62.       borderWidth: '2px'
    63.     }
    64.   },
    65.   series: [{
    66.       values: (function() {
    67.         let aV = [];
    68.         let len = 500;
    69.         let x = 0;
    70.         while (len--) {
    71.           x = (Math.random() * 10).toFixed(3) - 0;
    72.           aV.push([
    73.             x,
    74.             (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    75.           ]);
    76.         }
    77.         return aV;
    78.       })(),
    79.       backgroundColor: '#F48FB1',
    80.       text: 'Sin Wave One',
    81.       marker: {
    82.         size: 5,
    83.         alpha: .85,
    84.         backgroundColor: '#F48FB1'
    85.       }
    86.     },
    87.     {
    88.       values: (function() {
    89.         let aV = [];
    90.         let len = 500;
    91.         let x = 0;
    92.         while (len--) {
    93.           x = (Math.random() * 10).toFixed(3) - 0;
    94.           aV.push([
    95.             x,
    96.             (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    97.           ]);
    98.         }
    99.         return aV;
    100.       })(),
    101.       backgroundColor: '#F48FB1',
    102.       text: 'Sin Wave Two',
    103.       marker: {
    104.         size: 5,
    105.         alpha: .85,
    106.         backgroundColor: '#CE93D8'
    107.       }
    108.     }
    109.   ]
    110. };
    111.  
    112. // Load the selection-tool and render the chart once its loaded
    113. zingchart.loadModules('selection-tool', function() {
    114.   zingchart.render({
    115.     id: 'myChart',
    116.     data: chartConfig,
    117.     height: '100%',
    118.     width: '100%',
    119.     modules: 'selection-tool'
    120.   });
    121. });