• 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": "area",
    18.       "title": {
    19.         "text": "Exact Mode"
    20.       },
    21.       "crosshair-x": {
    22.         "exact": true, //false (default) or true
    23.         "plot-label": {
    24.           "text": "X: %kv<br>Y: %vv"
    25.         }
    26.       },
    27.       "plot": {
    28.         "tooltip": {
    29.           "visible": false
    30.         },
    31.         "rules": [{
    32.             "rule": "%v < 20",
    33.             "line-color": "red",
    34.             "background-color": "red"
    35.           },
    36.           {
    37.             "rule": "%v >= 20 && %v <= 40",
    38.             "line-color": "orange",
    39.             "background-color": "orange"
    40.           },
    41.           {
    42.             "rule": "%v >= 40 && %v <= 50",
    43.             "line-color": "orange",
    44.             "background-color": "yellow"
    45.           },
    46.           {
    47.             "rule": "%v >= 50 && %v <= 60",
    48.             "line-color": "blue",
    49.             "background-color": "green"
    50.           },
    51.           {
    52.             "rule": "%v >= 60 && %v <= 80",
    53.             "line-color": "blue",
    54.             "background-color": "blue"
    55.           },
    56.           {
    57.             "rule": "%v > 80",
    58.             "line-color": "purple",
    59.             "background-color": "purple"
    60.           }
    61.         ],
    62.         "marker": {
    63.           "rules": [{
    64.               "rule": "%v < 20",
    65.               "background-color": "red"
    66.             },
    67.             {
    68.               "rule": "%v >= 20 && %v <= 50",
    69.               "background-color": "orange"
    70.             },
    71.             {
    72.               "rule": "%v >= 50 && %v <= 80",
    73.               "background-color": "blue"
    74.             },
    75.             {
    76.               "rule": "%v > 80",
    77.               "background-color": "purple"
    78.             }
    79.           ]
    80.         }
    81.       },
    82.       "series": [{
    83.         "values": [
    84.           [1.1, 24],
    85.           [1, 9],
    86.           [1.3, 5],
    87.           [1.8, 21],
    88.           [1.9, 29],
    89.           [2, 15],
    90.           [2.1, 13],
    91.           [2.3, 29],
    92.           [2.5, 10],
    93.           [2.9, 41],
    94.           [3, 21],
    95.           [3.1, 30],
    96.           [3.3, 40],
    97.           [3.5, 44],
    98.           [4, 34],
    99.           [4.1, null],
    100.           [8.9, null],
    101.           [9, 60],
    102.           [9.1, 61],
    103.           [9.2, 50],
    104.           [9.3, 71],
    105.           [9.4, 64],
    106.           [9.8, 56],
    107.           [10, 75],
    108.           [10.1, 61],
    109.           [10.5, 71],
    110.           [10.7, 70],
    111.           [10.8, 70],
    112.           [10.9, 90],
    113.           [11, 81],
    114.           [11.2, 82],
    115.           [11.3, 93],
    116.           [11.5, 75],
    117.           [11.9, 95],
    118.           [12, 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": "area",
    3.   "title": {
    4.     "text": "Exact Mode"
    5.   },
    6.   "crosshair-x": {
    7.     "exact": true, //false (default) or true
    8.     "plot-label": {
    9.       "text": "X: %kv<br>Y: %vv"
    10.     }
    11.   },
    12.   "plot": {
    13.     "tooltip": {
    14.       "visible": false
    15.     },
    16.     "rules": [{
    17.         "rule": "%v < 20",
    18.         "line-color": "red",
    19.         "background-color": "red"
    20.       },
    21.       {
    22.         "rule": "%v >= 20 && %v <= 40",
    23.         "line-color": "orange",
    24.         "background-color": "orange"
    25.       },
    26.       {
    27.         "rule": "%v >= 40 && %v <= 50",
    28.         "line-color": "orange",
    29.         "background-color": "yellow"
    30.       },
    31.       {
    32.         "rule": "%v >= 50 && %v <= 60",
    33.         "line-color": "blue",
    34.         "background-color": "green"
    35.       },
    36.       {
    37.         "rule": "%v >= 60 && %v <= 80",
    38.         "line-color": "blue",
    39.         "background-color": "blue"
    40.       },
    41.       {
    42.         "rule": "%v > 80",
    43.         "line-color": "purple",
    44.         "background-color": "purple"
    45.       }
    46.     ],
    47.     "marker": {
    48.       "rules": [{
    49.           "rule": "%v < 20",
    50.           "background-color": "red"
    51.         },
    52.         {
    53.           "rule": "%v >= 20 && %v <= 50",
    54.           "background-color": "orange"
    55.         },
    56.         {
    57.           "rule": "%v >= 50 && %v <= 80",
    58.           "background-color": "blue"
    59.         },
    60.         {
    61.           "rule": "%v > 80",
    62.           "background-color": "purple"
    63.         }
    64.       ]
    65.     }
    66.   },
    67.   "series": [{
    68.     "values": [
    69.       [1.1, 24],
    70.       [1, 9],
    71.       [1.3, 5],
    72.       [1.8, 21],
    73.       [1.9, 29],
    74.       [2, 15],
    75.       [2.1, 13],
    76.       [2.3, 29],
    77.       [2.5, 10],
    78.       [2.9, 41],
    79.       [3, 21],
    80.       [3.1, 30],
    81.       [3.3, 40],
    82.       [3.5, 44],
    83.       [4, 34],
    84.       [4.1, null],
    85.       [8.9, null],
    86.       [9, 60],
    87.       [9.1, 61],
    88.       [9.2, 50],
    89.       [9.3, 71],
    90.       [9.4, 64],
    91.       [9.8, 56],
    92.       [10, 75],
    93.       [10.1, 61],
    94.       [10.5, 71],
    95.       [10.7, 70],
    96.       [10.8, 70],
    97.       [10.9, 90],
    98.       [11, 81],
    99.       [11.2, 82],
    100.       [11.3, 93],
    101.       [11.5, 75],
    102.       [11.9, 95],
    103.       [12, 99]
    104.     ]
    105.   }]
    106. };
    107.  
    108. zingchart.render({
    109.   id: 'myChart',
    110.   data: myConfig,
    111.   height: 400,
    112.   width: "100%"
    113. });