Draw Line Chart Using Chart.js - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Line Chart

Description

Draw Line Chart Using Chart.js

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>line chart with ChartJS</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from ww  w  .  j a va 2  s.c o  m
var data = {
  labels: ["A", "B", "C", "D", "E", "F"],
  datasets: [{
    label: "My First dataset",
    fillColor: "rgba(220,220,220,0.2)",
    strokeColor: "rgba(220,220,220,1)",
    pointColor: "rgba(220,220,220,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(220,220,220,1)",
    data: [-2, -1, -1, -2, 1, 2]
  }]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, {
  scaleOverride: true,
  scaleSteps: 6,
  scaleStepWidth: 1,
  scaleStartValue: -3,
  scaleLabel: function(valueObj) {
    if (valueObj.value === '0')
       return 'Mean'
    else if (Number(valueObj.value) > 0)
      return '+' + valueObj.value + 's';
    else
      return valueObj.value + 's';
  }
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="myChart" height="300" width="800"></canvas>  
   </body>
</html>

Related Tutorials