DrawComplete event not working fine from the second call

[matjac1888]

Dear Team,

 

Could you please help me with the following issue?

 

Issue description

I have implemented a chart using JSON rendering. Infact the whole structure of the chart is rendered from the server side. This is done because of a 'period' dropdown in the requirement. Once this period is selected, the chart has to show yearly, monthly and weekly data(basically the X-axis has to change and the data has to be refreshed). I have also added an event listener on 'DrawComplete'. This is done to read the data once the chart is rendered completely. All these works fine when the chart is loaded for the first time.

 

Attached is a screen shot of the sample data from the server side.

 

The issue is that for the second time when I try to read data on the 'DrawComplete' event it gives the first rendered data. The third time it gives the second time rendered data. I hope you are getting it. For e.g. first time if the chart plotted {1,1,1,1} on the drawcomplete event I'm able to get it. Second time if it renders {2,2,2,2} I'm still getting {1,1,1,1} only.

 

Below given is my code. During the first execution the logging on the console happens in the order 'print1', 'print2', 'print3'. Second time onwards it prints in the order 'print2', 'print3', 'print1'. This means second time onwards the 'DrawComplete' event is called even before the drawing is completed with the data. 

 

I have already tried approaches of 'disposing' the chart if it already exists, removeEventListener etc. but nothing gives be the desired result. Could you please let me know if I'm doing something wrong? Let me know if you need any other details.

 

Code

function displayChart(periodType) {

$.ajax({

    url : '../servletMapping/methodMapping',

    data : {

              'periodType' : periodType

    },

    dataType : 'json',

    success : function(jsonDataFromServer) {

                                    console.log(jsonDataFromServer); //print1

                                    var trendChart = new FusionCharts("MSSpline", "chartId", "100%", "100%", "0");

                                    trendChart.setJSONData(jsonDataFromServer);

                                    trendChart.render('chartContainer');

                                    trendChart.addEventListener('DrawComplete', eventHandler);

                    }

         });

}

 

function eventHandler(event) {

                   var chartDOMId = event.sender.id;

                   console.log(chartDOMId);//print2

                   console.log(FusionCharts.getObjectReference(chartDOMId).getJSONData().dataset[0].data);//print3

}

 

Thanks and regards

Mathew

[Guest Sashibhusan]

Hi,

 

Could you please try once by reading the data from the "dataloaded" event, instead of "DrawComplete" event, and see if it works?

[matjac1888]

Hi Sashi,

 

I had already tried out other events that I thought would fit into the solution. Upon trying out the 'dataloaded' event again I found that the event gets called only once in the process (the second time onwards the handler is not invoked).

 

Thanks and regards

Mathew

[Guest Sashibhusan]

Hi Mathew,

 

Could you please mention the version of FusionCharts Suite XT you are using in your application?

 

If it is older than v3.3.1sr3, please try once by upgrading to latest FusionCharts Suite XT v3.3.1sr3 version and see if it fires the "dataloaded" event on each update of data.