chart.js line 2.0

by KURO KUMO

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>
<canvas id="accessChart" width="400" height="250"></canvas>
<input type="button" value="Add Data" onclick="adddata()">

JavaScript

var ctx = document.getElementById("accessChart").getContext("2d");
var x1 = 0,y1 = 0, x2 = 0, y2 = 300;

var gradientStroke = ctx.createLinearGradient(x1, y1, x2, y2);
gradientStroke.addColorStop(1, "rgba(239, 48, 0, 1)");
gradientStroke.addColorStop(0, "rgba(255, 160, 0, 1)");
var gradientFill = ctx.createLinearGradient(x1, y1, x2, y2);
gradientFill.addColorStop(1, "rgba(239, 48, 0, 0.6)");
gradientFill.addColorStop(0, "rgba(255, 160, 0, 0.6)");

var data = {
  labels: ["13:00", "13:01", "13:02", "13:03", "13:04", "13:05", "13:06"],
  datasets: [{
    label: "現在のアクセス数",
    fillColor: gradientFill,
    strokeColor: gradientStroke,
    data: [3, 4, 1, 25, 29, 2, 14]
  }]
};

var zero = 7;
function adddata(){

  var value = Math.floor((Math.random() * 100) + 1);;
  myLineChart.data.labels.push(zero);
  myLineChart.data.labels.splice(0, 1);
  myLineChart.data.datasets[0].data.splice(0, 1);
  console.log(myLineChart.data.datasets[0].data);
  myLineChart.data.datasets[0].data.push(value); 


  myLineChart.update();
  zero++;
}

setInterval(function(){
  adddata();
},1000);

var option = {
  animation: false,
  pointDot: false,
  showLines: true,
  scales: {
    yAxes: [{
      display: true,
      ticks: {
        beginAtZero:true,
      }
    }],
    xAxes: [{
      display: true,
    }]
  }
};
var myLineChart = Chart.Line(ctx,{
  data:data,
  options:option
});