Show information on line chart - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

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

Description

Show information on line chart

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js Line Chart Example (Not Stacked)</title> 
   </head> 
   <body translate="no"> 
      <div id="canvas-holder" style="width: 600px;"> 
         <canvas id="chart-area" width="300" height="300"></canvas> 
      </div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script> 
      <script>
      var lables = [];/*w w  w  . j  av a2 s  . co  m*/
var s = [{
  example1 : {'01-Mar-17' : '0', '02-Mar-17' : '6'},
  example2 : {'01-Mar-17':'0', '02-Mar-17': '4'}
}];
var example1 = [];
var example2 = [];
$.each(s,function(i,item){
  $.each(item.example1,function(i,j){
    lables.push(i);
    example1.push(j);
  });
  $.each(item.example2,function(i,j){
    example2.push(j);
  });
});
var config = {
  type: 'line',
  data: {
    labels: lables,
    datasets: [{
      label: 'Example 1',
      fill: false,
      lineTension: 0.1,
      backgroundColor: '#00a3d0',
      borderColor: '#00a3d0',
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: '#00a3d0',
      pointBackgroundColor: "#fff",
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: '#00a3d0',
      pointHoverBorderColor: '#00a3d0',
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: example1,
      spanGaps: false,
    }, {
      label: 'Example 2',
      fill: false,
      lineTension: 0.1,
      backgroundColor: '#8a6d3b',
      borderColor: '#8a6d3b',
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: '#8a6d3b',
      pointBackgroundColor: "#fff",
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: '#8a6d3b',
      pointHoverBorderColor: '#8a6d3b',
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: example2,
      spanGaps: false,
    }]
  },
  options: {
    responsive: true,
    scales: {
      yAxes: [{
        stacked: false,
        ticks: {
          min: 0,
          stepSize: 5,
        }
      }]
    }
  }
};
window.onload = function() {
  var stackedLineChart = new Chart($("#chart-area"), config);
};
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials