Drawing line chart in chart.js and draw dots only when value changes - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

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

Description

Drawing line chart in chart.js and draw dots only when value changes

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(){/*  w w w . ja  v  a 2 s .c  o  m*/
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July", "January", "February", "March", "April", "May", "June", "July", "January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
      label: "My Second dataset",
      fillColor: "rgba(151,187,205,0.2)",
      strokeColor: "rgba(151,187,205,1)",
      pointColor: "rgba(151,187,205,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(151,187,205,1)",
      data: [0, 0, 0, 0, 0, 10, 10, 10, 10, 10, 19, 86, 27, 90, 28, 48, 40, 19, 86, 27, 90]
    }
  ]
};
var myChart = new Chart(ctx).Line(data);
for (var i = 1; i <= data.datasets[0].data.length - 1; i++)
  if (data.datasets[0].data[i - 1] === data.datasets[0].data[i])
    myChart.datasets[0].points[i].display = false;
    }

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

Related Tutorials