Performance Issue while loading charts repeatedly on the same page

[satya400]

Hi FusionCharts team,

 

Thanks for a nice JS Charting engine. I am working on some sample code with the trial version and I noticed a performance issue.  Not sure whether this question can be posted in Bug reports or not.

 

Can you please review the following (I am using latest trail version and using java script charts):

 

 

 - Have 10 Pie charts being fed from JSON (Sample JSON files and the web site would be a static and no server side code)
 - Put a button

 - On Click of the button, dispose the charts and recreate the charts.

 

Observation:  When the page loads for the first time in Chrome, all graphs load with in 10 milliseconds. Now click on the button the charts get redrawn (disposed and recreated). But it takes roughly 100 milliseconds (after discounting the time for disposing the individual charts).  This is a 10 fold increase. All button clicks from that point on will take 100+ milliseconds to repaint the graphs.

 

I am not sure what would be the difference between first time page load in the browser and the recreation of graphs next time in the button event handler? Ideally both should take the same time with 10-20% difference due to CPU load etc because we have already discounted the time for disposing the charts. 

 

I tried with 'not disposing' and just refreshing the charts with same JSON files and still there is no improvement.

 

I am not sure whether I am doing any thing wrong OR is whether Fusion Charts has any issue after the page is loaded?

 

Can you please guide me?

 

Thanks

Satya

 

 

 

 

 

 

 

 

 

[Haritha]

Hi Satya,

 

Welcome to FusionCharts Forum.

 

We tried to create a sample with 10 Pie charts similar to your sample according to the description given above and found that it takes approximately 370 milliseconds for all the charts to get loaded for the first time. After disposing the charts and re-rendering them it is seen that the charts take 392 millseconds, approximately 20 milliseconds more than the previous case.

 

We have attached the sample here for your feedback.

Pie Json.zip

[satya400]

Thanks a lot Haritha, I appreciate the sample code and it helped me a lot in understanding where I went wrong. I missed to measure the end time after the 'drawcomplete' of all the charts because I did not pay attention to the asynchronous loading.

 

One question, if I measure the time taken by considering only the chart create/render statements, I could see some anamoly which I could not understand. I have slightly changed your pie.html and attached below. Can you please review and help me understanding what is happening?  By any chance, is the dispose method of the charts is also asynchronus and blocking the next chart creation till dispose is over?

 

Thanks

Satya

Pie_satya.zip

[Haritha]

Hi,

 

I have checked your code and it seems that you are obtaining the time before and after the code of chart creation and calculating the time difference accordingly. This might give you the time taken to execute the script but not the time taken to render/re-render FusionCharts.

 

For obtaining the time taken to render FusionCharts for the first time and also after disposing and re-rendering them, you need to make use of events of FusionCharts as demonstrated in the above sample.

 

For a list of events provided by FusionCharts JavaScript API, please refer : http://docs.fusioncharts.com/charts/contents/JavaScript/API/Events.html

 

Hope this helps.

[satya400]

Thanks a lot Haritha for the help.

 

Best Regards

Satya

[Guest Rishab]