• 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": "bar",
    18.       "plot": {
    19.         "background-color": "#333399",
    20.         "tooltip": {
    21.           "rules": [{
    22.               "rule": "%v < 75",
    23.               "text": "%v is<br>less than 75.",
    24.               "background-color": "#666699"
    25.             },
    26.             {
    27.               "rule": "%v >= 75",
    28.               "text": "%v is<br>in the red.",
    29.               "font-weight": "bold",
    30.               "background-color": "#ff9999"
    31.             }
    32.           ],
    33.           "font-color": "black",
    34.           "font-family": "Georgia",
    35.           "font-size": 12,
    36.           "alpha": 0.5,
    37.           "border-color": "#333399",
    38.           "border-width": 1,
    39.           "padding": "20%",
    40.           "border-radius": "9px"
    41.         }
    42.       },
    43.       "scale-y": {
    44.         "guide": {
    45.           "visible": false
    46.         },
    47.         "markers": [{
    48.             "type": "area",
    49.             "range": [0, 75],
    50.             "background-color": "#666699",
    51.             "alpha": 0.3
    52.           },
    53.           {
    54.             "type": "area",
    55.             "range": [75, 100],
    56.             "background-color": "#ff9999",
    57.             "alpha": 0.3
    58.           }
    59.         ]
    60.       },
    61.       "series": [{
    62.         "values": [
    63.           35, 42, 67, 69, 25, 34, 67, 74, 30, 33,
    64.           34, 59, 25, 15, 28, 55, 59, 13, 14, 15,
    65.           20, 21, 56, 45, 34, 23, 76, 88, 99, 77,
    66.           78, 87, 76, 77, 81, 78, 85, 87, 87, 89,
    67.           77, 85, 76, 75, 76, 97, 87, 88, 86, 78, 96
    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": "bar",
    3.   "plot": {
    4.     "background-color": "#333399",
    5.     "tooltip": {
    6.       "rules": [{
    7.           "rule": "%v < 75",
    8.           "text": "%v is<br>less than 75.",
    9.           "background-color": "#666699"
    10.         },
    11.         {
    12.           "rule": "%v >= 75",
    13.           "text": "%v is<br>in the red.",
    14.           "font-weight": "bold",
    15.           "background-color": "#ff9999"
    16.         }
    17.       ],
    18.       "font-color": "black",
    19.       "font-family": "Georgia",
    20.       "font-size": 12,
    21.       "alpha": 0.5,
    22.       "border-color": "#333399",
    23.       "border-width": 1,
    24.       "padding": "20%",
    25.       "border-radius": "9px"
    26.     }
    27.   },
    28.   "scale-y": {
    29.     "guide": {
    30.       "visible": false
    31.     },
    32.     "markers": [{
    33.         "type": "area",
    34.         "range": [0, 75],
    35.         "background-color": "#666699",
    36.         "alpha": 0.3
    37.       },
    38.       {
    39.         "type": "area",
    40.         "range": [75, 100],
    41.         "background-color": "#ff9999",
    42.         "alpha": 0.3
    43.       }
    44.     ]
    45.   },
    46.   "series": [{
    47.     "values": [
    48.       35, 42, 67, 69, 25, 34, 67, 74, 30, 33,
    49.       34, 59, 25, 15, 28, 55, 59, 13, 14, 15,
    50.       20, 21, 56, 45, 34, 23, 76, 88, 99, 77,
    51.       78, 87, 76, 77, 81, 78, 85, 87, 87, 89,
    52.       77, 85, 76, 75, 76, 97, 87, 88, 86, 78, 96
    53.     ]
    54.   }]
    55. };
    56.  
    57. zingchart.render({
    58.   id: 'myChart',
    59.   data: myConfig,
    60.   height: 400,
    61.   width: "100%"
    62. });