hcm
Posts: 6
Joined: Thu Sep 29, 2022 2:56 am

Graph taking a while to show on page even with small data

Hi, when I open a graph page from my main page, the chart takes at least 20-30 seconds to load/appear, even with a small amount of data points. After that it works as intended. Here is the code for my graph page:

Code: Select all

    <div>
        <div id="c-container" class="chart" style="margin: auto; width: 50%;"></div>
    </div>
        
        var chartdata = []  // put these two outside of  function if error
        var volume = []     //
        var contrAdd = '{{contractAddress}}'

        function refresh_graph_data(data)
        {
            for (var i=0; i < data.length; i++)
            {
                chartdata.push([
                    data[i]["date_"], // the date
                    data[i]["open"], // open
                    data[i]["high"], // high
                    data[i]["low"], // low
                    data[i]["close"] // close
                ]);
                volume.push([
                    data[i]["date_"], // the date
                    data[i]["volume"] // the volume
                ]);
            }
        }

        function plotCharts(){
        Highcharts.setOptions({
            series: {
                boostThreshold: 1 // number of points in one series, when reaching this number, boost.js module will be used
            }
        })
        Highcharts.stockChart('c-container', {
            events: {
                redraw: false
            },
            navigation: {
                bindings: {
                    rect: {
                        annotationsOptions: {
                            animation: {
                                defer: 0
                            },
                            shapeOptions: {
                                fill: 'rgba(255, 0, 0, 0.8)'
                            }
                        }
                    }
                },
                annotationsOptions: {
                    typeOptions: {
                        line: {
                            stroke: 'rgba(255, 0, 0, 1)',
                            strokeWidth: 10
                        }
                    }
                }
            },
            yAxis: [{
                labels: {
                    align: 'left'
                },
                height: '80%'
            }, {
                labels: {
                    align: 'left'
                },
                top: '80%',
                height: '20%',
                offset: 0
            }],
            series: [{
                type: 'candlestick',
                id: 'price chart',
                name: 'Price',
                data: chartdata
            }, {
                type: 'column',
                id: 'volume chart',
                name: 'Volume',
                data: volume,
                yAxis: 1
            }]
        });


    }
    
        setInterval(ajaxCallFun, 10000)

        function ajaxCallFun(){
        $.ajax({
                url: "/refreshGraphRoute/"+contrAdd,
                dataType: 'json',
                success: function(data){
                refresh_graph_data(data);
                plotCharts();
                chartdata = [];
                volume = [];
        }
    })
}
Is there anything that can be added/changed to make the graph appear immediately?

Thanks
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Graph taking a while to show on page even with small data

Hello there,

Welcome to our forum and thank you for contacting us!

I have a few questions regarding your code:
- Why do you set the chart.events.redraw to false?
- Do you get any errors in the console?
- Maybe you are performing some heavy loop operations?

And most importantly, could you please reproduce your issue in an online editor, such as JSFiddle?

In the meantime, take a look at these Stock chart with JSON data examples:
https://jsfiddle.net/BlackLabel/w0dp2rj8/
https://jsfiddle.net/BlackLabel/u3hdqzbf/

Best regards!
Kamil Musiałowski
Highcharts Developer
hcm
Posts: 6
Joined: Thu Sep 29, 2022 2:56 am

Re: Graph taking a while to show on page even with small data

I set redraw to false because I was trying things out to make it work, but it doesn't affect my problem. I don't get any errors in the console, as I said the graph shows up after some time and works fine, it just takes too long to appear. I don't know if I can reproduce the same issue in JSFiddle because I'm calling a route from my Flask app which preprocesses data from an API and returns it as json.

Here's my attempt at converting this into JSFiddle with random json data, but now it doesn't work for some reason https://jsfiddle.net/7xb0tsev/4/

Thank you for taking the time to answer this.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Graph taking a while to show on page even with small data

Sounds like there might be an issue with the Flask, or preprocessing the data.

I would suggest you do the following. Take your chart config, do not change it at all, but replace the data with hardcoded, static data - without any API calls, etc.
Then you will be able to tell whether that's a Highcharts problem, or something that has to do with the other stuff that's going on before your data gets to the Highcharts.

Once you do that, and the problem still occurs, get it to work in JSFiddle and we will work together on a solution for that.

Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”