• 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.     let chartConfig = {
    17.       "type": "area",
    18.       "title": {
    19.         "text": "Rules"
    20.       },
    21.       "plot": {
    22.         "rules": [{
    23.             "rule": "%v <=35 && %v > 34",
    24.             "line-color": "purple",
    25.             "background-color": "purple"
    26.           },
    27.           {
    28.             "rule": "%v <=34 && %v > 31",
    29.             "line-color": "blue",
    30.             "background-color": "blue"
    31.           },
    32.           {
    33.             "rule": "%v <= 31 && %v > 30",
    34.             "line-color": "green",
    35.             "background-color": "green"
    36.           },
    37.           {
    38.             "rule": "%v <= 30 && %v > 25",
    39.             "line-color": "yellow",
    40.             "background-color": "yellow"
    41.           },
    42.           {
    43.             "rule": "%v <= 25 && %v > 14.5",
    44.             "line-color": "orange",
    45.             "background-color": "orange"
    46.           },
    47.           {
    48.             "rule": "%v <= 14.5",
    49.             "line-color": "red",
    50.             "background-color": "red"
    51.           }
    52.         ],
    53.         "marker": {
    54.           "rules": [{
    55.               "rule": "%v <=35 && %v > 34",
    56.               "background-color": "purple"
    57.             },
    58.             {
    59.               "rule": "%v <=34 && %v > 31",
    60.               "background-color": "blue"
    61.             },
    62.             {
    63.               "rule": "%v <= 31 && %v > 30",
    64.               "background-color": "green"
    65.             },
    66.             {
    67.               "rule": "%v <= 30 && %v > 25",
    68.               "background-color": "yellow"
    69.             },
    70.             {
    71.               "rule": "%v <= 25 && %v > 14.5",
    72.               "background-color": "orange"
    73.             },
    74.             {
    75.               "rule": "%v <= 14.5",
    76.               "background-color": "red"
    77.             }
    78.           ]
    79.         }
    80.       },
    81.       "series": [{
    82.         "values": [30, 34, 14, 15, 31, 35]
    83.       }]
    84.     };
    85.  
    86.     zingchart.render({
    87.       id: 'myChart',
    88.       data: chartConfig,
    89.       height: 400,
    90.       width: "100%"
    91.     });
    92.   </script>
    93. </body>
    94.  
    95. </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. let chartConfig = {
    2.   "type": "area",
    3.   "title": {
    4.     "text": "Rules"
    5.   },
    6.   "plot": {
    7.     "rules": [{
    8.         "rule": "%v <=35 && %v > 34",
    9.         "line-color": "purple",
    10.         "background-color": "purple"
    11.       },
    12.       {
    13.         "rule": "%v <=34 && %v > 31",
    14.         "line-color": "blue",
    15.         "background-color": "blue"
    16.       },
    17.       {
    18.         "rule": "%v <= 31 && %v > 30",
    19.         "line-color": "green",
    20.         "background-color": "green"
    21.       },
    22.       {
    23.         "rule": "%v <= 30 && %v > 25",
    24.         "line-color": "yellow",
    25.         "background-color": "yellow"
    26.       },
    27.       {
    28.         "rule": "%v <= 25 && %v > 14.5",
    29.         "line-color": "orange",
    30.         "background-color": "orange"
    31.       },
    32.       {
    33.         "rule": "%v <= 14.5",
    34.         "line-color": "red",
    35.         "background-color": "red"
    36.       }
    37.     ],
    38.     "marker": {
    39.       "rules": [{
    40.           "rule": "%v <=35 && %v > 34",
    41.           "background-color": "purple"
    42.         },
    43.         {
    44.           "rule": "%v <=34 && %v > 31",
    45.           "background-color": "blue"
    46.         },
    47.         {
    48.           "rule": "%v <= 31 && %v > 30",
    49.           "background-color": "green"
    50.         },
    51.         {
    52.           "rule": "%v <= 30 && %v > 25",
    53.           "background-color": "yellow"
    54.         },
    55.         {
    56.           "rule": "%v <= 25 && %v > 14.5",
    57.           "background-color": "orange"
    58.         },
    59.         {
    60.           "rule": "%v <= 14.5",
    61.           "background-color": "red"
    62.         }
    63.       ]
    64.     }
    65.   },
    66.   "series": [{
    67.     "values": [30, 34, 14, 15, 31, 35]
    68.   }]
    69. };
    70.  
    71. zingchart.render({
    72.   id: 'myChart',
    73.   data: chartConfig,
    74.   height: 400,
    75.   width: "100%"
    76. });