Multi Line line chart with chart JS library

This article contains how to draw a multi line graph with chart JS library. 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 official website

&lt!DOCTYPE html&gt
&lthtml&gt
&lthead&gt
 &ltstyle&gt
  .container { width: 80%; margin: 20px auto; }
  .p { text-align: center; font-size: 1px; padding-top: 140px; }
 &lt/style&gt
&lt/head&gt
&ltbody&gt

&ltdiv class="container"&gt
  &ltdiv&gt
    &ltcanvas id="canvas"&gt&lt/canvas&gt
  &lt/div&gt
&lt/div&gt

&ltscript src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"&gt&lt/script&gt
&ltscript&gt
var lineChartData = {
    labels: ["Data 1", "Data 2", "Data 3", "Data 4", "Data 5", "Data 6","Data"],
    datasets: [{
        fillColor: "rgba(220,220,220,0)",
        strokeColor: "rgba(220,180,0,1)",
        pointColor: "rgba(220,180,0,1)",
        data: [10, 30, 80, 20, 40, 10, 60]
    }, {
        fillColor: "rgba(151,187,205,0)", 
      strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        data: [20, 10, 40, 30, 80, 30, 20]
    }]

}

Chart.defaults.global.animationSteps = 50;
Chart.defaults.global.tooltipYPadding = 16;
Chart.defaults.global.tooltipCornerRadius = 0;
Chart.defaults.global.tooltipTitleFontStyle = "normal";
Chart.defaults.global.tooltipFillColor = "rgba(0,160,0,0.8)";
//Chart.defaults.global.animationEasing = "easeOutBounce";
Chart.defaults.global.responsive = true;
Chart.defaults.global.scaleLineColor = "black";
Chart.defaults.global.scaleFontSize = 16;/**/

var ctx = document.getElementById("canvas").getContext("2d");
var LineChartDemo = new Chart(ctx).Line(lineChartData, {
    pointDotRadius: 1,
    bezierCurve: false,
    scaleShowVerticalLines: false,
    scaleGridLineColor: "black"
});
&lt/script&gt

&lt/body&gt
&lt/html&gt

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>