• 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.       "title": {
    19.         "text": "Scatter Plot"
    20.       },
    21.       "crosshair-x": {
    22.         "plot-label": {
    23.           "text": "X: %kv<br>Y: %vv",
    24.           "multiple": true,
    25.           "padding": "10%",
    26.           "border-radius": "5px"
    27.         },
    28.         "scale-label": {
    29.           "visible": false
    30.         }
    31.       },
    32.       "crosshair-y": {
    33.         "type": "multiple", //"single" (default) or "multiple"
    34.         "scale-label": {
    35.           "visible": false
    36.         }
    37.       },
    38.       "plot": {
    39.         "tooltip": {
    40.           "visible": false
    41.         },
    42.         "marker": {
    43.           "rules": [{
    44.               "rule": "%v < 20",
    45.               "background-color": "#003399"
    46.             },
    47.             {
    48.               "rule": "%v >= 20 && %v <= 40",
    49.               "background-color": "#3366cc"
    50.             },
    51.             {
    52.               "rule": "%v >= 40 && %v <= 60",
    53.               "background-color": "#009999"
    54.             },
    55.             {
    56.               "rule": "%v >= 60 && %v <= 80",
    57.               "background-color": "#00cc99"
    58.             },
    59.             {
    60.               "rule": "%v > 80",
    61.               "background-color": "#ccccff"
    62.             }
    63.           ]
    64.         }
    65.       },
    66.       "series": [{
    67.         "values": [
    68.           [0.1, 9],
    69.           [0.3, 11],
    70.           [0.5, 5],
    71.           [0.7, 3],
    72.           [0.8, 15],
    73.           [0.9, 15],
    74.           [1.1, 24],
    75.           [1, 9],
    76.           [1.3, 5],
    77.           [1.8, 21],
    78.           [1.9, 29],
    79.           [2, 15],
    80.           [2.1, 13],
    81.           [2.3, 29],
    82.           [2.5, 10],
    83.           [2.9, 30],
    84.           [3, 21],
    85.           [3.1, 30],
    86.           [3.3, 35],
    87.           [3.5, 25],
    88.           [4, 30],
    89.           [4.1, 33],
    90.           [4.5, 39],
    91.           [4.9, 35],
    92.           [5, 40],
    93.           [5.3, 41],
    94.           [5.6, 67],
    95.           [6, 59],
    96.           [6.1, 45],
    97.           [6.5, 57],
    98.           [6.7, 70],
    99.           [6.8, 74],
    100.           [6.9, 51],
    101.           [7, 60],
    102.           [7.1, 61],
    103.           [7.2, 50],
    104.           [7.3, 71],
    105.           [7.4, 64],
    106.           [7.8, 56],
    107.           [8, 75],
    108.           [8.1, 61],
    109.           [8.5, 71],
    110.           [8.7, 70],
    111.           [8.8, 70],
    112.           [8.9, 90],
    113.           [9, 81],
    114.           [9.2, 82],
    115.           [9.3, 93],
    116.           [9.5, 75],
    117.           [9.9, 95],
    118.           [10, 99]
    119.         ]
    120.       }]
    121.     };
    122.  
    123.     zingchart.render({
    124.       id: 'myChart',
    125.       data: myConfig,
    126.       height: 400,
    127.       width: "100%"
    128.     });
    129.   </script>
    130. </body>
    131.  
    132. </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.   "title": {
    4.     "text": "Scatter Plot"
    5.   },
    6.   "crosshair-x": {
    7.     "plot-label": {
    8.       "text": "X: %kv<br>Y: %vv",
    9.       "multiple": true,
    10.       "padding": "10%",
    11.       "border-radius": "5px"
    12.     },
    13.     "scale-label": {
    14.       "visible": false
    15.     }
    16.   },
    17.   "crosshair-y": {
    18.     "type": "multiple", //"single" (default) or "multiple"
    19.     "scale-label": {
    20.       "visible": false
    21.     }
    22.   },
    23.   "plot": {
    24.     "tooltip": {
    25.       "visible": false
    26.     },
    27.     "marker": {
    28.       "rules": [{
    29.           "rule": "%v < 20",
    30.           "background-color": "#003399"
    31.         },
    32.         {
    33.           "rule": "%v >= 20 && %v <= 40",
    34.           "background-color": "#3366cc"
    35.         },
    36.         {
    37.           "rule": "%v >= 40 && %v <= 60",
    38.           "background-color": "#009999"
    39.         },
    40.         {
    41.           "rule": "%v >= 60 && %v <= 80",
    42.           "background-color": "#00cc99"
    43.         },
    44.         {
    45.           "rule": "%v > 80",
    46.           "background-color": "#ccccff"
    47.         }
    48.       ]
    49.     }
    50.   },
    51.   "series": [{
    52.     "values": [
    53.       [0.1, 9],
    54.       [0.3, 11],
    55.       [0.5, 5],
    56.       [0.7, 3],
    57.       [0.8, 15],
    58.       [0.9, 15],
    59.       [1.1, 24],
    60.       [1, 9],
    61.       [1.3, 5],
    62.       [1.8, 21],
    63.       [1.9, 29],
    64.       [2, 15],
    65.       [2.1, 13],
    66.       [2.3, 29],
    67.       [2.5, 10],
    68.       [2.9, 30],
    69.       [3, 21],
    70.       [3.1, 30],
    71.       [3.3, 35],
    72.       [3.5, 25],
    73.       [4, 30],
    74.       [4.1, 33],
    75.       [4.5, 39],
    76.       [4.9, 35],
    77.       [5, 40],
    78.       [5.3, 41],
    79.       [5.6, 67],
    80.       [6, 59],
    81.       [6.1, 45],
    82.       [6.5, 57],
    83.       [6.7, 70],
    84.       [6.8, 74],
    85.       [6.9, 51],
    86.       [7, 60],
    87.       [7.1, 61],
    88.       [7.2, 50],
    89.       [7.3, 71],
    90.       [7.4, 64],
    91.       [7.8, 56],
    92.       [8, 75],
    93.       [8.1, 61],
    94.       [8.5, 71],
    95.       [8.7, 70],
    96.       [8.8, 70],
    97.       [8.9, 90],
    98.       [9, 81],
    99.       [9.2, 82],
    100.       [9.3, 93],
    101.       [9.5, 75],
    102.       [9.9, 95],
    103.       [10, 99]
    104.     ]
    105.   }]
    106. };
    107.  
    108. zingchart.render({
    109.   id: 'myChart',
    110.   data: myConfig,
    111.   height: 400,
    112.   width: "100%"
    113. });