Firefox is not responding when loading 800+ data sets in Bar Chart with Charts.Js

Mobile Technologies Mobile Computing 2 years ago

0 1 0 0 0 tuteeHUB earn credit +10 pts

5 Star Rating 1 Rating
_x000D_ _x000D_ I am using Asp.net MVC and my data comes as List. Data is populated using foreach loop in the View file to load the bar chart. Length of my data is around 800. When bar chart is start rendering browser becomes unresponsive. I am sure that this issue is because of huge data. It renders after 40-50 seconds. Is there any way to render bar chart speedy using chart.js?

Posted on 16 Aug 2022, this text provides information on Mobile Computing related to Mobile Technologies. Please note that while accuracy is prioritized, the data presented might not be entirely correct or up-to-date. This information is offered for general knowledge and informational purposes only, and should not be considered as a substitute for professional advice.

Take Quiz To Earn Credits!

Turn Your Knowledge into Earnings.

tuteehub_quiz

Answers (1)

Post Answer
profilepic.png
manpreet Tuteehub forum best answer Best Answer 2 years ago
_x000D_ Make sure that it's actually Chart.js / Firefox that is causing the problem (try it out on other browsers, put a stopwatch right before you call new Chart... and stop it in onAnimationComplete) While the following steps suggestion should logically reduce the number of calculations, I couldn't see much difference (the chart rendering completes in 0.5 seconds on both IE and Firefox with animation turned off and 7-8 seconds with animation turned on for 800 datasets with 10 points each) If you are aware of your data range (or if you can calculate this efficiently on the server side), you could override the scale and set your own scale ... scaleOverride: true, scaleSteps: 10, // or whatever suits your dataset better scaleStepWidth: 1, // or whatever suits your dataset better scaleStartValue: 0, // or whatever suits your dataset better ... It might also be a good idea to turn off tooltips if you haven't done so (with 800 data sets, any tooltip you have is not going to be that useful) ... showTooltips: false, ...

No matter what stage you're at in your education or career, TuteeHub will help you reach the next level that you're aiming for. Simply,Choose a subject/topic and get started in self-paced practice sessions to improve your knowledge and scores.

Important Mobile Technologies Links