• 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',
          crosshairX: {
    
          },
          plot: {
            aspect: 'spline',
            rules: [{
                rule: '%v < 20',
                lineColor: 'red',
                backgroundColor: 'red'
              },
              {
                rule: '%v >= 20 && %v <= 40',
                lineColor: 'orange',
                backgroundColor: 'orange'
              },
              {
                rule: '%v >= 40 && %v <= 50',
                lineColor: 'orange',
                backgroundColor: 'yellow'
              },
              {
                rule: '%v >= 50 && %v <= 60',
                lineColor: 'blue',
                backgroundColor: 'green'
              },
              {
                rule: '%v >= 60 && %v <= 80',
                lineColor: 'blue',
                backgroundColor: 'blue'
              },
              {
                rule: '%v > 80',
                lineColor: 'purple',
                backgroundColor: 'purple'
              }
            ],
            marker: {
              size: 3,
              rules: [{
                  rule: '%v < 20',
                  backgroundColor: 'red'
                },
                {
                  rule: '%v >= 20 && %v <= 50',
                  backgroundColor: 'orange'
                },
                {
                  rule: '%v >= 50 && %v <= 80',
                  backgroundColor: 'blue'
                },
                {
                  rule: '%v > 80',
                  backgroundColor: 'purple'
                }
              ]
            }
          },
          scaleX: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            item: {
              fontFamily: 'Georgia'
            }
          },
          scaleY: {
            values: '0:100:20',
            guide: {
              lineStyle: 'dashdot'
            },
            item: {
              fontFamily: 'Georgia'
            }
          },
          series: [{
            values: [
              [1, 24],
              [1.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.TOUCHZOOM = 'pinch';
    
        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',
      crosshairX: {
    
      },
      plot: {
        aspect: 'spline',
        rules: [{
            rule: '%v < 20',
            lineColor: 'red',
            backgroundColor: 'red'
          },
          {
            rule: '%v >= 20 && %v <= 40',
            lineColor: 'orange',
            backgroundColor: 'orange'
          },
          {
            rule: '%v >= 40 && %v <= 50',
            lineColor: 'orange',
            backgroundColor: 'yellow'
          },
          {
            rule: '%v >= 50 && %v <= 60',
            lineColor: 'blue',
            backgroundColor: 'green'
          },
          {
            rule: '%v >= 60 && %v <= 80',
            lineColor: 'blue',
            backgroundColor: 'blue'
          },
          {
            rule: '%v > 80',
            lineColor: 'purple',
            backgroundColor: 'purple'
          }
        ],
        marker: {
          size: 3,
          rules: [{
              rule: '%v < 20',
              backgroundColor: 'red'
            },
            {
              rule: '%v >= 20 && %v <= 50',
              backgroundColor: 'orange'
            },
            {
              rule: '%v >= 50 && %v <= 80',
              backgroundColor: 'blue'
            },
            {
              rule: '%v > 80',
              backgroundColor: 'purple'
            }
          ]
        }
      },
      scaleX: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        item: {
          fontFamily: 'Georgia'
        }
      },
      scaleY: {
        values: '0:100:20',
        guide: {
          lineStyle: 'dashdot'
        },
        item: {
          fontFamily: 'Georgia'
        }
      },
      series: [{
        values: [
          [1, 24],
          [1.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.TOUCHZOOM = 'pinch';
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: '100%'
    });