javascriptcanvaschartszingchart

Zing Chart waiting logo when loading Graph


I am plotting around 1 million points on zing Chart and they are able to load data perfectly. Only issue I face is when I reload chart or apply zoom in or zoom out charts get stuck for around 5 to 6 seconds. Is there any way we can view waiting logo of zing chart while data is being load or filter. this is my code.

zingchart.DEV.SORTTOKENS = 0;
zingchart.DEV.PLOTSTATS = 0;
zingchart.DEV.RESOURCES = 0;
zingchart.DEV.KEEPSOURCE = 0;
zingchart.DEV.COPYDATA = 0;
zingchart.DEV.MEDIARULES = 0;
zingchart.SYNTAX = 'dashed';

function chart_AngleTime(timeArray,angle_arr) {

    var configTimeAndAngle = {
        "type": "line",
        legend: {
            layout: "1x1", //row x column // items means in one two we added two items as in legends
            x: "35%",
            y: "6%",
        },
        "preview":{
            "live":true
        },
        plot: {
            mode: 'fast',
        },
        'scale-x': {
            zooming: true,
            labels: timeArray,
            item: {
            'font-size':10
            }
        },
        'scale-y': {
            'auto-fit': true,
            'min-value':0,
            'max-value':360,
            guide: {
                'line-style': "dotted"
            },
            item: {
            'font-size':10
            }
        },
        'crosshair-x': {
            text: 'Time : %kt (X) Freq : %vt (Y).',
            'line-style': 'dashed',
            'line-width': 2,
            'line-color': '#2196F3',
            marker: {
                type: 'triangle',
                size: 5,
                visible: true
            }
        },
        gui: {
            behaviors: [
            {
                id: 'DownloadPDF',
                enabled: 'none'
            },
            {
                id: 'ViewDataTable',
                enabled: 'none'
            },
            {
                id: 'ViewSource',
                enabled: 'none'
            },
            {
                id: 'CrosshairHide',
                enabled: 'all'
            }
            ]
        },
        "series": [
            {
                "values": angle_arr,
                'line-color': "#3366ff",
                'background-color': "#3366ff",
                text: "Angle"
            }
           
        ]
    };

    zingchart.QUOTEDVALUES = true;
    zingchart.render({
        id: "lineChart_at",
        height: "100%",
        width: "100%",
        output: "canvas",
        data: configTimeAndAngle
    });

} 

Solution

  • enter image description here Hello, not sure about what is wrong with your chart, but I setup a demo here and i can't see any issue with zooming blocking the page. However, it's possible it could be some weird interactivity with other page elements, we would be able to detect the issue using the JS profiler but only if we have access to the page.

    Currently, ZingChart doesn't allow us to view waiting logo after zoom or filtering. ZingChart logo only appears on the screen on initial load before a chart appears on the page.