[Chartjs]-How can i do so that my chartjs updates everytime data is inserted or by time interval?

by

1đź‘Ť

âś…

There are several ways you could implement this.

The easiest but probably “worst” solution would be to simply refresh the page every x seconds.
This solution will however make almost any interactivity on the page useless as inputs etc. will all reset each time the page refreshes.
Put the following in your <head> section.
content will define how many seconds between each refresh.

<META HTTP-EQUIV="refresh" CONTENT="5">

0đź‘Ť

There is a way to use setInterval which calls function to update chart(see example: https://jsbin.com/yitep/5/edit?html,js,output).

Or next solution would be to add a function which you will call on data insert. You can update chart by calling in your case myChart.update().
It somethimes can happen that you don’t have or can’t get chart instance, in this case you can use(that’s only way to get instance, you will need that if code is executed in another script): 

    Chart.helpers.each(Chart.instances, function (chart) {
        // your code
    }

Now when you have chart instance you can manipulate with data, use addData and removeData(check in docs how it works).

Problem is that it goes through all charts, so you need to check somehow what is target chart, you can do this with chart.chart.canvas.id. This command will give you canvas chart id, in your case myChart so you can do only changes on charts what you choose.

For getting chart options you can use chart api event chart.getDatasetMeta(0)(check docs: https://www.chartjs.org/docs/latest/developers/api.html).

Hope it helps, feel free to ask for more.

Leave a comment