Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
<body>  
  <div>
    <canvas id="chart" width="800" height="450"></canvas>
  </div>
  <button onClick="addDataButton()">Add Data</button>
</body>
</html>
 
let numberOfDataCounter = 0
const numberOfDataAtBeginning = 4
const weekdays = ["Su", "Mo", "Du", "We", "Th", "Fr", "Sa"]
​
​
let chartData = {
  label: [],
  data: []
}
​
while (numberOfDataAtBeginning>numberOfDataCounter) {
  addData()
}
​
function addData (){
  chartData.label.push(weekdays[numberOfDataCounter % 7])
  chartData.data.push(getRandomNumber())
  
  numberOfDataCounter++
}
​
function getRandomNumber(){
  let randomNumber = Math.floor(Math.random()*100)
  return randomNumber
}
​
let data = {
  labels: chartData.label,
  datasets: [{
    label: "Label",
    data: chartData.data
  }]
}
​
let chart = new Chart(document.getElementById("chart"), {
  type: 'line',
  data: data,  
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 100
        }
      }]
    }
  }
});
​
function addDataButton(){
  addData()
  chart.update()
}
​
​
​
​
​
​
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers