Chart is taking about 2 seconds to create with no data

[Travis Miller]

I am loading multiple charts on a page. A simple line graph with no data is taking about 2 seconds to render to the screen. The 2 calls that are taking awhile are:

appendTo();
refresh();

If I use one of the demos and apply my code, it renders much faster, from 2 seconds down to about 0.6 seconds. What factors affect how quickly the chart can be rendered to a page and displayed?

It could be browser-related as it seems to render about twice as fast in Firefox as Microsoft Edge. Google Chrome is only slightly faster than Microsoft Edge. That makes sense as both are using the same underlying engine.

I am trying to optimize the rendering as much as possible to reduce the time that the user waits for the graphs to be displayed.

[Durga Gopalakrishnan]

Hi Travis,

Greetings from Syncfusion.

We have ensured your reported scenario with and without data for chart series. Time taken for rendering the chart without data is 50 milliseconds and with data is 28milliseconds. We have used chart load and loaded event to find the difference in chart rendering. We have attached both samples for your reference.

Data : https://stackblitz.com/edit/hus8tj

Empty Data : https://stackblitz.com/edit/hus8tj-4scuwx

If you are still facing problem, please try to replicate an issue in above sample or share us issue reproduced sample to validate this case further. Please let us know if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Travis Miller]

Hi Durga,

Thanks for checking on this for me. I will provide the code that is used to create the chart in case there is some combination of parameters that is causing the problem. See below. I use lots of your charts and usually they render very fast with or without data. That's why I asked the question about this situation.

function sfCreateStationDetailGraph(data, i, id) {
    //console.log(new Date().toISOString());
    if (sfStationDetailGraphs[i] !== null) {
        sfStationDetailGraphs[i].destroy();
        sfStationDetailGraphs[i].refresh();
    }
    if (data !== null) {
        sfStationDetailGraphs[i] = new ej.charts.Chart({
            //Initializing Primary X Axis
            primaryXAxis: {
                valueType: 'DateTime',
                intervalType: 'Hours',
                interval: 6,
                //intervalType: 'Days',
                labelFormat: 'M/d h:mm a',
                // labelIntersectAction: 'Rotate90'
                zoomFactor: 1, zoomPosition: 0.0,
                crosshairTooltip: { enable: true }
            },
            chartArea: {
                border: { width: 0 }
            },
            background: 'rgba(0,0,0,0)',
            axes: [
                {
                    rowIndex: 0,
                    name: 'yPrimary',
                    minimum: data.min,
                    maximum: data.max,
                    labelFormat: '{value}',
                    lineStyle: { width: 0 },
                    majorTickLines: { width: 0 },
                    minorTickLines: { width: 0 },
                    title: data.dataType,
                    //Axis title text style
                    titleStyle: {
                        size: '16px', color: '#000000',
                        fontFamily: 'Segoe UI', fontWeight: 'bold'
                    }
                }
            ],
            //Initializing Chart Series
            series: [
                {
                    type: 'Line',
                    dataSource: data.points,
                    xName: 'time', width: 2, marker: {
                        visible: false
                    },
                    legendShape: 'Rectangle',
                    yName: 'value', name: data.dataType + ' (' + data.units + ')',
                    yAxisName: 'yPrimary'
                }
            ],
            legendSettings: {
                visible: true,
                toggleVisibility: false
            },
            zoomSettings:
            {
                enableMouseWheelZooming: true,
                enablePinchZooming: true,
                enableSelectionZooming: true,
                enablePan: true,
                mode: 'X'
            },
            // Set line/area colors
            palettes: [data.color],
            //Initializing Chart title
            title: data.name,
            //Initializing User Interaction Tooltip
            tooltip: {
                enable: true, shared: true
            },
            crosshair: { enable: true, lineType: 'Vertical' },
            width: '95%',
            height: '100%'
        });
        sfStationDetailGraphs[i].appendTo('#' + id);
        //sfStationDetailGraphs[i].refresh();

        //console.log(new Date().toISOString());
    }
}

[Swetha Babu]

Hi Travis,

We have created a simple Javascript application to replicate the reported scenario using the provided code snippet. But, we are unable to replicate the same. Please find the below tested sample link for your reference.

Sample link: https://stackblitz.com/edit/nslvox?file=index.html,index.js

If the reported scenario still persists, please modify the above sample link to replicate the reported scenario. It will be helpful for us to analyze further and assist you better.

Regards,

Swetha

[Travis Miller]

Thanks for the update and help. It looks like it has something to do with running in development environment. When I installed the project on the production server, the problem seems to have gone away.

[Swetha Babu]

Hi Travis,

We are happy to hear that the reported scenario gets resolved. Please get back to us if you need further assistance.

Regards,

Swetha