Heatmap load time issue

[waqaransari]

I have used heatmap in my project. I am facing some issue on it, i have the user activity over 15 to 20 min the is to big therefore the heatmap load time increases how to resolve it please help me.

[pa7]

@waqaransari do you mean the time to download the data, or the time to render the heatmap? ( after calling setData)

[waqaransari]

when i doing addData, it 's render too slow and take lot of time to show heatmap because the data is too much big. how to do it fast any solution do you have?

[pa7]

1. use setData instead of addData. addData will add the datapoints one by one and invalidates the dataset whenever it finds a new min/max
2. put the heatmap calculations & rendering off the main thread so it doesn't lock up your UI (there are better ways to do that, but one way would be to wrap the setData call in a setTimeout, ie

setTimeout(function() {
  heatmapInstance.setData(mydata);
}, 0);

[waqaransari]

thank you for your support wied, Can you please tell me, Can i save the heatmap data into database and can i decode and encode data with this library if possible please send me solution.

And how to encode or decode data and which format. is there any fast way to insert or retrieve data from database?

Regards & Thanks, Waqar Ansari.

[hygison]

If I store only the points in the database, and then bring back(We can do that fast with php, For me takes me less than 2 seconds to bring 100000 points inside the array). I would like to know how do I set all those points using the setData(). I am having problems with the max for the most red color, because I only store points, the values for all points are basically the same. How can I calculate the max for an array using your heatmap.js?

[rjozso]

You can calculate the max value of data points before using setData() function. It is going to create a result like using addData() function but this process is much faster. I used a logic like it was in the heatmap source:

• create an empty object to store point-value pairs
• loop through the data array
• if the key (concatenated x, y coordinate) does not exist in the array ==> store it
• if the key exists ==> increment value
• thereafter get max value from the array
• call setData() function with this max argument

    let pointValuePairs = {};
    let max = 1;

    // Store point-value pairs
    for (let i = 0; i < data.length; i++) {

        const {x, y, value} = data[i];
        const key = `${x}${y}`;

        if(!pointValuePairs[key])
	    // If this point does not exist in the 'pointValuePairs' object ==> store it
	    pointValuePairs[key] = value;
        else
	    // If this point already exists in the 'pointValuePairs' object ==> increment value
	    pointValuePairs[key] += value;
    }

    // Get the max of values from the 'pointValuePairs' object
    max = Math.max(...Object.values(pointValuePairs));
    // Create heatmap
    heatmap.setData({data, max});

[vishalkhandate19]

@pa7 The solution you told isn't working. I have around 700 data points and the heatmap is plotting after 10-13 seconds. Can you please tell me a solution in which the heatmap plotting will be done in parallel?