How can my Chart.js just update when data in SQL change?

Question

I build a web app in MVC using SignalR to update real-time data. I can display my chart with real-time data from SQL but it just updates by the time set in setInterval. But now I want my chart to just update when my data in SQL SERVER changes. I have tried many ways but it's not correct. Can you help me with the algorithm? Thank you. Here is my code :

<!--Chart-->
<script>
    var ctx = document.getElementById("percent-chart2");
    var colorarray = ['#00b5e9', '#fa4251', '#006400'];
    var pre_vals = 0;
    //
    var myVar = setInterval(GetValue, 1000);
    function GetValue() {
        var val1 = parseFloat(document.getElementById("tblValue").innerHTML);
        var val2 = parseFloat(document.getElementById("tblValue1").innerHTML);
        var vals = [val1, val2, 2000];
        return vals;
    }

    if (ctx) {
        ctx.height = 209;
        var myChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                datasets: [
                    {
                        label: "My First dataset",
                        //data: [GetValue, GetValue, GetValue],
                        data: GetValue(),
                        backgroundColor: [
                            '#00b5e9',
                            '#fa4251',
                            '#006400'
                        ],
                        hoverBackgroundColor: [
                            '#00b5e9',
                            '#fa4251',
                            '#006400'
                        ],
                        borderWidth: [
                            0, 0, 0
                        ],
                        hoverBorderColor: [
                            'transparent',
                            'transparent',
                            'transparent'
                        ]
                    }
                ],
                labels: [
                    'STATION 1',
                    'STATION 2',
                    'STATION 3'
                ]
            },
            options: {
                maintainAspectRatio: false,
                responsive: true,
                cutoutPercentage: 57,
                animation: {
                    animateScale: true,
                    animateRotate: true
                },
                legend: {
                    display: false,
                    position: 'bottom',
                    labels: {
                        fontSize: 14,
                        fontFamily: "Poppins,sans-serif"
                    }
                },
                tooltips: {
                    titleFontFamily: "Poppins",
                    xPadding: 15,
                    yPadding: 10,
                    caretPadding: 0,
                    bodyFontSize: 16,
                }
            }
        });
    }

    function UpdateChart(datachart, data, color) {
        datachart.data.datasets.pop();
        datachart.data.datasets.push({
            data: data,
            backgroundColor: color,
            hoverBackgroundColor: color
        });
        datachart.update();
    }

    setInterval(function () {
            const my_val = GetValue();
            //var updatedata = [my_val, my_val, 2000];
            var updatedata = my_val;
            UpdateChart(myChart, updatedata, colorarray);
        }, 10000);
      
</script>

Answer 1

The way I handle this is by adding a client call with the dataset after the database update has completed. This way you only update when that update is called.

Here is a rough example off the top of my head:

public void UpdateDB(int updatedData)
{
   //DB work to commit the updatedData
   ....

   //Query your dataset into an serialized updatedDataset
   ....

   //Call a method to create an array (updatedColors) of colors based on the the Count of updatedDataset  
   ....  

   //Send data to client(s)
   Clients.All.yourclientfunction(updatedDataset, updatedColors);
}