Meeth46
Posts: 1
Joined: Tue Jul 05, 2022 12:25 pm

How to poll data using Ajax request?

I am trying to poll my data in HighCharts. The graph in this link is what I am trying to achieve. I am using Ajax request to retrieve my data. Here is my code:

Code: Select all

setInterval(RefreshGraph, 3000);

...

...

function RefreshGraph() {
            var options = {
                chart: {
                    type: 'spline'
                },
                title: {
                    text: 'Text'
                },
                xAxis: {
                    title: {
                        text: 'TIMEFRAME'
                    },
                    categories: ['-4m', '-3m', '-2m', '-1m', 'Now']
                },
                yAxis: {
                    title: {

                        text: 'NUMBER'
                    },
                },
                tooltip: {
                    crosshairs: true,
                    shared: true
                },
                plotOptions: {
                    spline: {
                        marker: {
                            radius: 4,
                            lineColor: '#666666',
                            lineWidth: 2
                        }
                    }
                },
                series: [{}]
            };

        Highcharts.ajax({
            url: "/Home/GetData",
            success: function (data) {
                var formattedData = FormatData(data);
                //Graph 1
                options.series[0] = formattedData[0];
                //Graph 2
                options.series[1] = formattedData[1];

                Highcharts.chart("container", options);
            }
        });
    }

However, the entire graph gets redrawn with my above code. How can I enable live polling for the above code?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to poll data using Ajax request?

Hello,

Welcome to our forum and thank you for contacting us with your question.

Your entire graph gets redrawn because you are calling the RefreshGraph function every 3 seconds, which redraws the whole chart from scratch.

To avoid that, you can rewrite your code to match the official demo you provided in the link in your post. Enable data.enablePolling, set the dataURL and the refresh rate.

Please also take a look at the other demo, where it's implemented.
DEMO: https://jsfiddle.net/BlackLabel/os7frxne/
API Reference: https://api.highcharts.com/highcharts/d ... blePolling

Do not hesitate to contact us in there future,
Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”