zing Charts is making web page slow and laggy

Question

I am currently trying to plot around 200k data (Time and Frequency) on zing Chart. it does load the chart successfully but page gets very heavy and it lags a lot. Here is my code please guide me have I done any Mistake or how can I plot data without page getting laggy.

I am trying to draw 4 charts like this one same webpage different data (which is 200k+ values).

i get data from APi code ...

$.ajax({
    type: 'GET',
    cache: false,
    url:url,
    data: { startTime : '2022-07-25 10-40-12', endTime : '2022-08-22 17-41-14', tableName : tableName },
    success: function (data, textStatus, jqXHR) {
        drawTimeVSAngleChart(data[0], data[1],data[2]);
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log(errorThrown);
    }
});

after rec data i just call drawTimeVSAngleChart function

timeArray , cpuArray, memoryArray these are passed 

my code

function drawTimeVSAngleChart(timeArray , cpuArray, memoryArray){

    $('#lineChart').remove();
    $('#canvas_div').append(
        '<div id="lineChart" style="min-height: 400px; height: 500px; max-height: 500px; max-width: 100%;"></div>'

    );

    var configTimeAndAngle = {
        "type": "line",
        legend: {
            layout: "1x2", //row x column // items means in one two we added two items as in legends
            x: "35%",
            y: "6%",
        },
        "preview":{
            "live":true
        },
        'scale-x': {
            zooming: true,
            labels: timeArray,
            'max-items':8,
            'min-items':7,
            item: {
            'font-size':10
            }
        },
        'scale-y': {
            //zooming: true,
            //values: "50:350:50",
            guide: {
                'line-style': "dotted"
            },
            item: {
            'font-size':10
            }
        },
        tooltip: {
            text: 'Time : %kt (X) Freq : %vt (Y).',
            alpha: 0.9,
            backgroundColor: '#F44336',
            borderColor: '#B71C1C',
            borderRadius: 2,
            borderWidth: 1,
            padding: '5 10'
        },
        gui: {
            behaviors: [
            {
                id: 'DownloadPDF',
                enabled: 'none'
            },
            {
                id: 'ViewDataTable',
                enabled: 'none'
            },
            {
                id: 'ViewSource',
                enabled: 'none'
            },
            {
                id: 'ZingChart',
                enabled: 'none'
            },
            {
                id: 'CrosshairHide',
                enabled: 'all'
            }
            ]
        },
        "series": [{
            "values": cpuArray,
            'line-color': "#3366ff",
            'background-color': "#3366ff",
            text: "CPU Array"
            },
            {
            "values": memoryArray,
            'line-color': "#00cc99",
            'background-color': "#00cc99",
            text: "Memory Array"
            }
        ]
    };

    zingchart.render({
        id: 'lineChart',
        data: configTimeAndAngle,
        height: "100%",
        width: "100%"
    });


}

Answer 1

this solution is similar to @lasabahebwa solution but its actual solution which I was looking for. I am able to plot 1 million points without any issue. There is a issue from data been plotted. Issue is that when I load chart or apply filter chart takes around 9 seconds to load data. well my solution is
my solution is abit different because I am giving data in different format and time array is used. for details read question.

    $('#lineChart_f').remove();
    $('#canvas_div_f').append(
        '<div id="lineChart_f" style="min-height: 400px; height: 550px; max-height: 500px; max-width: 100%;"></div>'
    );


    var configTimeAndAngle = {
        "type": "line",
        noData:{
            text:"No data found",
            backgroundColor: "#20b2db"
        },
        legend: {
            layout: "1x2", //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':30,
            'max-value':70,
            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: 'ZingChart',
                enabled: 'none'
            },
            {
                id: 'CrosshairHide',
                enabled: 'all'
            }
            ]
        },
        "series": [{
            "values": frequency_array_ff,
            'line-color': "#3366ff",
            'background-color': "#3366ff",
            text: "Centeral Frequency"
            },
            {
            "values": frequency_array_fh,
            'line-color': "#00cc99",
            'background-color': "#00cc99",
            text: "Frequency Hopping"
            }
        ]
    };

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