Issue with drilldown

[Swap]

Hi,

I have added code for a bar chart drill down. The first time the chart loads, the drill down works as expected. The next time when I try to get data, the drilldown takes it as 2 clicks and displays 3rd level graph when clicking on 1st level graph.

Here is the code :

function loadChart(frm, data,duration) {

chart1 = new cfx.Chart();

chart1.setDataSource(data);

chart1.setGallery(cfx.Gallery.Bars);

$("#graph1").empty();

var divHolder = graph1;

chart1.create(divHolder);

$("#graph1").click(function(evt) {

doClick(evt, frm);

});

}

function doClick(evt, frm) {

// alert('in graph click');

if (evt.hitType == cfx.HitType.Point) {

var node = chart1.getSeries().getItem(evt.series).getText();

displayDrillDownGraph(frm, node, level);

}

} 

displayDrillDownGraph(frm, node, level){

var data = datafromajaxcall(); 

loadDrillDownChart(frm, data,duration); 

} 

function loadDrillDownChart(frm, data,duration) {

chart1 = new cfx.Chart();

chart1.setDataSource(data);

chart1.setGallery(cfx.Gallery.Bars);

$("#graph1").empty();

var divHolder = graph1;

chart1.create(divHolder);

$("#graph1").click(function(evt) {

doClick(evt, frm);

});

 }

The flow is : When the 1st level graph is clicked, the displaydrilldowngraph is called and data is retrieved in json format and loaddrilldownchart is called.Clicking on the 2nd level graph will call the displaydrilldowngraph but with a different set of parameters. The first time I am requesting the graph, the drilldown to 3rd level works as expected. The second time if I request the graph with the previous graph already displayed in the <div>, the click on 1st level graph displays 3rd level graph. The execution does go to display second level graph but automatically takes as a click on it and displays the 3rd level. I have tried to debug when it is taking as a click when its not even displaying the second level,but in vain.I suspect the $(#graph1).empty() is doing something, but I have no idea.

Any ideas, please help !!

Thanks

Swapna 

[JuanC]

I did a simple test as follows

Initial Code:

        chart1 = new cfx.Chart();

        chart1.create('myDiv');

        $("#myDiv").click(function(evt) {

             doClickEvent(evt);

        });

function doClickEvent(evt)

{

    $("#myDiv").empty();

    

    chart1 = new cfx.Chart();

    doRandom(1, 5, 20, 100, 20);

    chart1.create('myDiv');

}

The code for doRandom is not important but it makes sure the chart is populated with random data so that we can see if the chart is changed, in theory (or at least what I can get from jQuery's documentation for empty) the event handlers should be removed but clicking in the "second" chart will in fact call doClickEvent again (so the chart changes with each click).

I tried adding the following as the first line in doClickEvent

    $("#myDiv").off('click');

And it seemed to work,  honestly my jQuery experience is limited so I am not sure if this is the best way to remove the event handler or if unbind should be called instead.

Another possibility that could work depending on whether your drill down scenarios would be to use different divs for different drill down levels, and then hiding the divs as needed, this could also make it easier to provide a "back" functionality.

Hope this helps.

JuanC 

[Swap]

JuanC,

 Thank you for the reply. I have used unbind. I will check your suggestion too. I have another query. I need to request the graph for a certain interval. Ex: Get data from DB and repaint the graph for every 10 secs. How would I do it? Please suggest.

 

Thanks

Swapna 

   

[JuanC]

I would recommend that you focus first on downloading the data every X seconds without any chart interaction (e.g. try dumping some of the data values into the console or in a div) to make sure the non-chart related issues are taken care of. If you are using jQuery you should probably look into jquery.ajax.

Once you have this working, all you need to do would be to call setDataSource to repopulate your existing chart with the new data. 

JuanC