• 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></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16.     var myConfig = {
    17.       "type": "scatter",
    18.       "plot": {
    19.         "tooltip": {
    20.           "text": "On %t, node %node-index is positioned at %kt (X) and %vt (Y)."
    21.         }
    22.       },
    23.       "scale-x": {
    24.         "values": "0:100:25"
    25.       },
    26.       "scale-y": {
    27.         "values": "0:100:25"
    28.       },
    29.       "series": [{
    30.           "values": [
    31.             [23.1, 30.3],
    32.             [25.1, 34.3],
    33.             [30.2, 34.2],
    34.             [34.2, 50.5],
    35.             [59.5, 60.5],
    36.             [64.1, 64.2],
    37.             [70.3, 80.9],
    38.             [75.4, 83.4],
    39.             [80.3, 84.3],
    40.             [85.3, 87.5],
    41.             [90.1, 91.2],
    42.             [91.3, 95.3],
    43.             [95.5, 96.5],
    44.             [96.1, 90.5],
    45.             [99.1, 99.1]
    46.           ],
    47.           "text": "Blue"
    48.         },
    49.         {
    50.           "values": [
    51.             [21.5, 23.5],
    52.             [30.2, 29.3],
    53.             [31.9, 39.9],
    54.             [35.5, 33.3],
    55.             [39.1, 39.1],
    56.             [53.2, 54.3],
    57.             [57.1, 60.1],
    58.             [61.6, 61.7],
    59.             [69.5, 70.9],
    60.             [71.7, 63.7],
    61.             [80.3, 89.4],
    62.             [85.1, 83.1],
    63.             [89.3, 84.9],
    64.             [92.4, 90.8],
    65.             [93.5, 98.7]
    66.           ],
    67.           "text": "Red"
    68.         }
    69.       ]
    70.     };
    71.  
    72.     zingchart.render({
    73.       id: 'myChart',
    74.       data: myConfig,
    75.       height: 400,
    76.       width: "100%"
    77.     });
    78.   </script>
    79. </body>
    80.  
    81. </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='myChart'></div>
    13. </body>
    14.  
    15. </html>
    1.  
    1. var myConfig = {
    2.   "type": "scatter",
    3.   "plot": {
    4.     "tooltip": {
    5.       "text": "On %t, node %node-index is positioned at %kt (X) and %vt (Y)."
    6.     }
    7.   },
    8.   "scale-x": {
    9.     "values": "0:100:25"
    10.   },
    11.   "scale-y": {
    12.     "values": "0:100:25"
    13.   },
    14.   "series": [{
    15.       "values": [
    16.         [23.1, 30.3],
    17.         [25.1, 34.3],
    18.         [30.2, 34.2],
    19.         [34.2, 50.5],
    20.         [59.5, 60.5],
    21.         [64.1, 64.2],
    22.         [70.3, 80.9],
    23.         [75.4, 83.4],
    24.         [80.3, 84.3],
    25.         [85.3, 87.5],
    26.         [90.1, 91.2],
    27.         [91.3, 95.3],
    28.         [95.5, 96.5],
    29.         [96.1, 90.5],
    30.         [99.1, 99.1]
    31.       ],
    32.       "text": "Blue"
    33.     },
    34.     {
    35.       "values": [
    36.         [21.5, 23.5],
    37.         [30.2, 29.3],
    38.         [31.9, 39.9],
    39.         [35.5, 33.3],
    40.         [39.1, 39.1],
    41.         [53.2, 54.3],
    42.         [57.1, 60.1],
    43.         [61.6, 61.7],
    44.         [69.5, 70.9],
    45.         [71.7, 63.7],
    46.         [80.3, 89.4],
    47.         [85.1, 83.1],
    48.         [89.3, 84.9],
    49.         [92.4, 90.8],
    50.         [93.5, 98.7]
    51.       ],
    52.       "text": "Red"
    53.     }
    54.   ]
    55. };
    56.  
    57. zingchart.render({
    58.   id: 'myChart',
    59.   data: myConfig,
    60.   height: 400,
    61.   width: "100%"
    62. });