• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style></style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          "type": "area",
          "title": {
            "text": "Exact Mode"
          },
          "crosshair-x": {
            "exact": true, //false (default) or true
            "plot-label": {
              "text": "X: %kv<br>Y: %vv"
            }
          },
          "plot": {
            "tooltip": {
              "visible": false
            },
            "rules": [{
                "rule": "%v < 20",
                "line-color": "red",
                "background-color": "red"
              },
              {
                "rule": "%v >= 20 && %v <= 40",
                "line-color": "orange",
                "background-color": "orange"
              },
              {
                "rule": "%v >= 40 && %v <= 50",
                "line-color": "orange",
                "background-color": "yellow"
              },
              {
                "rule": "%v >= 50 && %v <= 60",
                "line-color": "blue",
                "background-color": "green"
              },
              {
                "rule": "%v >= 60 && %v <= 80",
                "line-color": "blue",
                "background-color": "blue"
              },
              {
                "rule": "%v > 80",
                "line-color": "purple",
                "background-color": "purple"
              }
            ],
            "marker": {
              "rules": [{
                  "rule": "%v < 20",
                  "background-color": "red"
                },
                {
                  "rule": "%v >= 20 && %v <= 50",
                  "background-color": "orange"
                },
                {
                  "rule": "%v >= 50 && %v <= 80",
                  "background-color": "blue"
                },
                {
                  "rule": "%v > 80",
                  "background-color": "purple"
                }
              ]
            }
          },
          "series": [{
            "values": [
              [1.1, 24],
              [1, 9],
              [1.3, 5],
              [1.8, 21],
              [1.9, 29],
              [2, 15],
              [2.1, 13],
              [2.3, 29],
              [2.5, 10],
              [2.9, 41],
              [3, 21],
              [3.1, 30],
              [3.3, 40],
              [3.5, 44],
              [4, 34],
              [4.1, null],
              [8.9, null],
              [9, 60],
              [9.1, 61],
              [9.2, 50],
              [9.3, 71],
              [9.4, 64],
              [9.8, 56],
              [10, 75],
              [10.1, 61],
              [10.5, 71],
              [10.7, 70],
              [10.8, 70],
              [10.9, 90],
              [11, 81],
              [11.2, 82],
              [11.3, 93],
              [11.5, 75],
              [11.9, 95],
              [12, 99]
            ]
          }]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: 400,
          width: "100%"
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id='myChart'></div>
    </body>
    
    </html>
    
          
    var myConfig = {
      "type": "area",
      "title": {
        "text": "Exact Mode"
      },
      "crosshair-x": {
        "exact": true, //false (default) or true
        "plot-label": {
          "text": "X: %kv<br>Y: %vv"
        }
      },
      "plot": {
        "tooltip": {
          "visible": false
        },
        "rules": [{
            "rule": "%v < 20",
            "line-color": "red",
            "background-color": "red"
          },
          {
            "rule": "%v >= 20 && %v <= 40",
            "line-color": "orange",
            "background-color": "orange"
          },
          {
            "rule": "%v >= 40 && %v <= 50",
            "line-color": "orange",
            "background-color": "yellow"
          },
          {
            "rule": "%v >= 50 && %v <= 60",
            "line-color": "blue",
            "background-color": "green"
          },
          {
            "rule": "%v >= 60 && %v <= 80",
            "line-color": "blue",
            "background-color": "blue"
          },
          {
            "rule": "%v > 80",
            "line-color": "purple",
            "background-color": "purple"
          }
        ],
        "marker": {
          "rules": [{
              "rule": "%v < 20",
              "background-color": "red"
            },
            {
              "rule": "%v >= 20 && %v <= 50",
              "background-color": "orange"
            },
            {
              "rule": "%v >= 50 && %v <= 80",
              "background-color": "blue"
            },
            {
              "rule": "%v > 80",
              "background-color": "purple"
            }
          ]
        }
      },
      "series": [{
        "values": [
          [1.1, 24],
          [1, 9],
          [1.3, 5],
          [1.8, 21],
          [1.9, 29],
          [2, 15],
          [2.1, 13],
          [2.3, 29],
          [2.5, 10],
          [2.9, 41],
          [3, 21],
          [3.1, 30],
          [3.3, 40],
          [3.5, 44],
          [4, 34],
          [4.1, null],
          [8.9, null],
          [9, 60],
          [9.1, 61],
          [9.2, 50],
          [9.3, 71],
          [9.4, 64],
          [9.8, 56],
          [10, 75],
          [10.1, 61],
          [10.5, 71],
          [10.7, 70],
          [10.8, 70],
          [10.9, 90],
          [11, 81],
          [11.2, 82],
          [11.3, 93],
          [11.5, 75],
          [11.9, 95],
          [12, 99]
        ]
      }]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: "100%"
    });