• 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 myConfig11 = {
    17.       "type": "scatter",
    18.       "plot": {
    19.         "value-box": {
    20.           "rules": [{
    21.               "rule": "%v >= 90",
    22.               "font-color": "green"
    23.             },
    24.             {
    25.               "rule": "%v >10 && %v < 90",
    26.               "visible": false
    27.             },
    28.             {
    29.               "rule": "%v <= 10",
    30.               "font-color": "red"
    31.             }
    32.           ]
    33.         }
    34.       },
    35.       "series": [{
    36.           "values": [
    37.             [1, 9],
    38.             [2, 15],
    39.             [3, 21],
    40.             [4, 30],
    41.             [5, 40],
    42.             [6, 59],
    43.             [7, 60],
    44.             [8, 75],
    45.             [9, 81],
    46.             [10, 99]
    47.           ],
    48.           "text": "Kale",
    49.           "marker": {
    50.             "type": "square"
    51.           }
    52.         },
    53.         {
    54.           "values": [
    55.             [0.9, 3],
    56.             [2.1, 13],
    57.             [3.5, 25],
    58.             [4.9, 35],
    59.             [5.3, 41],
    60.             [6.5, 57],
    61.             [7.1, 61],
    62.             [8.7, 70],
    63.             [9.2, 82],
    64.             [9.9, 95]
    65.           ],
    66.           "text": "Blueberries",
    67.           "marker": {
    68.             "type": "circle"
    69.           }
    70.         },
    71.         {
    72.           "values": [
    73.             [0.1, 9],
    74.             [1.8, 21],
    75.             [1.9, 29],
    76.             [4.1, 33],
    77.             [4.5, 39],
    78.             [6.9, 51],
    79.             [7.4, 64],
    80.             [8.9, 70],
    81.             [9, 75],
    82.             [9.3, 93]
    83.           ],
    84.           "text": "Tomatoes",
    85.           "marker": {
    86.             "type": "triangle"
    87.           }
    88.         },
    89.         {
    90.           "values": [
    91.             [0.3, 11],
    92.             [0.9, 15],
    93.             [1.1, 24],
    94.             [2.3, 29],
    95.             [2.9, 30],
    96.             [3.3, 35],
    97.             [5.6, 67],
    98.             [6.9, 70],
    99.             [7.3, 71],
    100.             [8.9, 90]
    101.           ],
    102.           "text": "Pineapples",
    103.           "marker": {
    104.             "type": "diamond"
    105.           }
    106.         },
    107.         {
    108.           "values": [
    109.             [0.5, 5],
    110.             [1.9, 5],
    111.             [2.5, 10],
    112.             [3.1, 30],
    113.             [6.5, 45],
    114.             [6.9, 74],
    115.             [7.2, 50],
    116.             [7.8, 56],
    117.             [8, 61],
    118.             [8.5, 71]
    119.           ],
    120.           "text": "Mushrooms",
    121.           "marker": {
    122.             "type": "gear5"
    123.           }
    124.         },
    125.       ]
    126.     };
    127.  
    128.     zingchart.render({
    129.       id: 'myChart',
    130.       data: myConfig11,
    131.       height: 400,
    132.       width: "100%"
    133.     });
    134.   </script>
    135. </body>
    136.  
    137. </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 myConfig11 = {
    2.   "type": "scatter",
    3.   "plot": {
    4.     "value-box": {
    5.       "rules": [{
    6.           "rule": "%v >= 90",
    7.           "font-color": "green"
    8.         },
    9.         {
    10.           "rule": "%v >10 && %v < 90",
    11.           "visible": false
    12.         },
    13.         {
    14.           "rule": "%v <= 10",
    15.           "font-color": "red"
    16.         }
    17.       ]
    18.     }
    19.   },
    20.   "series": [{
    21.       "values": [
    22.         [1, 9],
    23.         [2, 15],
    24.         [3, 21],
    25.         [4, 30],
    26.         [5, 40],
    27.         [6, 59],
    28.         [7, 60],
    29.         [8, 75],
    30.         [9, 81],
    31.         [10, 99]
    32.       ],
    33.       "text": "Kale",
    34.       "marker": {
    35.         "type": "square"
    36.       }
    37.     },
    38.     {
    39.       "values": [
    40.         [0.9, 3],
    41.         [2.1, 13],
    42.         [3.5, 25],
    43.         [4.9, 35],
    44.         [5.3, 41],
    45.         [6.5, 57],
    46.         [7.1, 61],
    47.         [8.7, 70],
    48.         [9.2, 82],
    49.         [9.9, 95]
    50.       ],
    51.       "text": "Blueberries",
    52.       "marker": {
    53.         "type": "circle"
    54.       }
    55.     },
    56.     {
    57.       "values": [
    58.         [0.1, 9],
    59.         [1.8, 21],
    60.         [1.9, 29],
    61.         [4.1, 33],
    62.         [4.5, 39],
    63.         [6.9, 51],
    64.         [7.4, 64],
    65.         [8.9, 70],
    66.         [9, 75],
    67.         [9.3, 93]
    68.       ],
    69.       "text": "Tomatoes",
    70.       "marker": {
    71.         "type": "triangle"
    72.       }
    73.     },
    74.     {
    75.       "values": [
    76.         [0.3, 11],
    77.         [0.9, 15],
    78.         [1.1, 24],
    79.         [2.3, 29],
    80.         [2.9, 30],
    81.         [3.3, 35],
    82.         [5.6, 67],
    83.         [6.9, 70],
    84.         [7.3, 71],
    85.         [8.9, 90]
    86.       ],
    87.       "text": "Pineapples",
    88.       "marker": {
    89.         "type": "diamond"
    90.       }
    91.     },
    92.     {
    93.       "values": [
    94.         [0.5, 5],
    95.         [1.9, 5],
    96.         [2.5, 10],
    97.         [3.1, 30],
    98.         [6.5, 45],
    99.         [6.9, 74],
    100.         [7.2, 50],
    101.         [7.8, 56],
    102.         [8, 61],
    103.         [8.5, 71]
    104.       ],
    105.       "text": "Mushrooms",
    106.       "marker": {
    107.         "type": "gear5"
    108.       }
    109.     },
    110.   ]
    111. };
    112.  
    113. zingchart.render({
    114.   id: 'myChart',
    115.   data: myConfig11,
    116.   height: 400,
    117.   width: "100%"
    118. });