CODEWITHSUNDEEP
javascriptchartschart.js
S C
S C

Reputation: 73

My chart won`t live update - done in Chart.js and Java Script

I am a beginner, I created a chart with chart.js that i want to live update when i enter a value and a date and click a button, but it doesnt work.I created a function that takes the kilos and date and sends them to a variable that is used in the chart, and the date is sent to an array because there will be more dates recorded

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3   /Chart.js">

  </script>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>

 <h2>Weight Tracker</h2>
 <input type="number" name="" value="" id="kg">
 <input type="date" name="" value="" id="dt">
 <button type="button" name="button" onclick="adauga()">Adauga</button>
 <canvas id="line-chart" width="200" height="100"></canvas>

<script>
var dt2 = [];
function adauga() {
 var kg = document.getElementById('kg').value;
  //alert(kg);
 var dt = document.getElementById('dt').value;

 dt2.push(dt);

  }

var data = [80,78,80,82,77,79,76,75];

new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
  labels: dt2,
  datasets: [{
      data: kg,
      label: "Asia",
      borderColor: "#8e5ea2",
      fill: false
    }
  ]
},
options: {
  title: {
    display: true,
    text: 'World population per region (in millions)'
  }
}
 });

function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
    dataset.data.push(data);
});
chart.update();
}

addData(Chart, dt2, kg);

I want the chart to live update when i click the button

Upvotes: 1

Views: 791

Answers (1)

timclutton
timclutton

Reputation: 13004

It looks like you've tried copying and pasting different code together without really understanding it:

  • function adauga adds the input values to the dt2 array, but then doesn't tell the chart to update.
  • function addData, which would successfully update the chart, is called only once and with the incorrect variables (Chart is the Chart.js global; kg is undefined as it's locally scoped to function adauga).

I've rewritten your code into the snippet below. See the code annotations for further details.

// assign the return value from Chart() to a variable which we use for updating.
let chart = new Chart(document.getElementById('line-chart'), {
  type: 'line',
  data: {
    datasets: [{
      data: [],
      label: 'Asia',
      borderColor: '#8e5ea2',
      fill: false
    }]
  },
  options: {
    scales: {
      xAxes: [{
        // configure the x-axis as a time axis (this causes Chart.js to place the
        // values in chronological order).
        type: 'time',
        time: {
          unit: 'day'
        }
      }]
    },
    title: {
      display: true,
      text: 'World population per region (in millions)'
    }
  }
});

// bind to the click event of the button element.
document.getElementById('adauga').addEventListener('click', function() {
  let dt = document.getElementById('dt').value,
    kg = parseInt(document.getElementById('kg').value); // Chart.js requires a number not a string!

  if (dt && (kg || kg == 0)) { // basic validity check.
    // add the datapoint using the object format.
    // see: https://www.chartjs.org/docs/latest/axes/cartesian/time.html#input-data
    chart.data.datasets[0].data.push({
      x: dt,
      y: kg
    });
    chart.update();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<input type="number" name="" value="" id="kg">
<input type="date" name="" value="" id="dt">
<button type="button" name="button" id="adauga">Adauga</button>
<canvas id="line-chart" width="200" height="100"></canvas>

Upvotes: 1

Related Questions