[Chartjs]-Chart.js – How to update data

by

1👍

✅

This is simplistic but would do the trick. If you wanted to enable/disable it, you’d want to hang onto your interval so you can kill it… This works though! 🙂

const updateFreqency = 10000;

chartIt(updateFreqency);

async function chartIt(interval){
    const loadedData = await loadData();
    var myChart = new Chart(document.getElementById("tempChart").getContext('2d'), {
        type: 'line',
        backgroundColor: 'rgba(255, 251, 230, 0.5)',
        data: {
            labels: loadedData.timeStamp,
            datasets: [{
                label: 'Temperature',
                data: loadedData.chartData,
                backgroundColor: [
                    'rgba(255, 0, 132, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)'
                ],
                borderWidth: 1
            }]
        },
        
    })
    
    setInterval(async () => {
      const data = await loadData();
      myChart.data.datasets.forEach(d => d.data = data.chartData)
      myChart.labels = data.timeStamp
      myChart.update()
    }, interval)
}

async function loadData() {
    var chartData = [];
    var timeStamp = [];
    await $.getJSON('https://api.thingspeak.com/channels/214058/fields/1.json?minutes=20', function(data) {
        $.each(data.feeds, function(){
            var value = this.field1;
            var raw_time = this.created_at;
            
             if (value) {
                value = (value / 1000) * 1000;
                value = parseFloat(value.toFixed(2));
            }

            if (raw_time){
                var timewZ = raw_time.split("T").slice(1);
                              
            }
            chartData.push(value);
            timeStamp.push(timewZ);
        });
    });
    return {chartData, timeStamp};
    
  }
.chartWrapper{
    width: 500px;
    height: 500px;
    margin:auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="chartWrapper">
      <canvas id="tempChart"></canvas>
    </div>
</body>
<script src="script.js"></script>
</html>

0👍

basically you need access to chart so if you move its context/scope to be outside of the function then you can access it from another function….

something like….

ommited some of the code as well this is the core bits..

//moved out
var myChart;
async function chartIt(){
    const loadedData = await loadData();
    myChart = new Chart(document.getElementById("tempChart").getContext('2d'), {
        type: 'line',
        backgroundColor: 'rgba(255, 251, 230, 0.5)',
        data: {
            labels: loadedData.timeStamp,
            datasets: [{
                label: 'Temperature',
                data: loadedData.chartData,
                backgroundColor: [
                    'rgba(255, 0, 132, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)'
                ],
                borderWidth: 1
            }]
        },
        
    })
}

function myTimer() {
    var loadedData = await loadData();
    //have access here as it was move out of the function which created it.
    myChart.data.labels = loadedData.timeStamp;
    myChart.data.datasets = loadedData.chartData;
    myChart.update();
}

var myVar = setInterval(myTimer, 10000);

Leave a comment