ZingChart threshold level monitoring line graph

LIne chart (area) - with highlighting

This article contains how to draw a line graph with Zing Charts. It contains a static data set. You can assign dynamic values and colors using php or any other appropriate language

Click to view Reference
Click to view Documentation

  <div height="500px" width="50%">
   <div id="myChart" style="height:300px; width:100%"></div>
  </div>
  
  <script>
   var myConfig = {
    "type":"area",
    "plot":{ 
     "stacked":false, 
     "stack-type":"100%" 
    }, 
    "series":[
     { "values":[20,40,25,50,15,45,33,34,20,40,25,50,15,45,33,34],
      "line-color":"black"
     },
     { "values":[30,5,18,21,33,41,29,15]
     },
     { "values":[5,30,21,18,59,50,28,33],
      //backgroundColor: '#FFC107'
     }, 
     { "values":[ [0,100] , [15,100] ],
      //backgroundColor: 'red',
      "line-color":"grey",
      "line-width": 0.6,
      
     },
     { "values":[ [0,80] , [15,80] ],
      "line-color":"red",
      //backgroundColor: '#FFC107',
      backgroundColor: 'orange',
      shadowAlpha: 0.0,
      alpha: 0.0,
      "line-width": 0.6
     },
     { "values":[ [0,70] , [15,70] ],
      "line-color":"green",
      backgroundColor: "green",
      shadowAlpha: 0.0,
      alpha: 0.0, //??
      "line-width": 0.6
     },
     { "values":[ [0,0] , [15,0] ],
      "line-color":"green",
      shadowAlpha: 0.0,
      alpha: 0.0,
      "line-width": 0.6
     }
    ] 
   };
 
   zingchart.render({ 
    id : 'myChart', 
    data : myConfig, 
    height: "100%", 
    width: "100%" 
   });
  </script>