karthik_k2 Report post Posted January 10, 2012 Hi, My intention is to invoke a javascript function when i click on a data element of the fusion chart. So I included "link" : j-onClick() along with the label and value attributes of the data. The problem which I am getting now is that the javascript function that is supposed to be invoked after i click on the data element is getting invoked as soon as the chart is instantiated. Please help me fix this. Thanks in advance. Share this post Link to post Share on other sites
Guest Angshu Report post Posted January 10, 2012 Hi, Thanks for your post. Could you please send us a scaled down sample to test from our end? Awaiting for your response. Share this post Link to post Share on other sites
karthik_k2 Report post Posted January 10, 2012 Hi, Thanks for your post. Could you please send us a scaled down sample to test from our end? Awaiting for your response. Hi, Thanks for your quick response. I am afraid I cannot give you my code as it has so many dependencies. So i am posting the next best thing, an equivalent code. loadChart : function() { var that = this; FusionCharts.setCurrentRenderer('javascript'); var chart = FusionCharts .render({ id : "Column Chart", swfUrl : 'FusionCharts/MSColumn2D.swf', width : that.chartW, height : that.chartH, renderAt : that.getComponent(that.getWrapperId()).el.id }); chart.setJSONData({ "chart" : { "caption" : "Stubent's Monthly Expenditure", "animation" : "1", "xAxisName" : "Students", "yAxisName" : "Currency", "shownames" : "1", "formatnumberscale" : "0", "placeValuesInside" : "0", "legendposition" : "BOTTOM" }, "categories" : [ { "category" : [{"label" : "Alex"},{"label" : "Ram"},{"label" : "John"}] } ], "dataset" : [{ "seriesname" : "USD", "showvalues" : "1", "data" : [{"value" : 100, "link" : j-that.onClick()},{"value" : 125, "link" : j-that.onClick()},{"value" : 85, "link" : j-that.onClick()}] },{ "seriesname" : "INR", "showvalues" : "1", "data" : [{"value" : 123, "link" : j-that.onClick()},{"value" : 123, "link" : j-that.onClick()},{"value" : 856, "link" : j-that.onClick()}] },{ "seriesname" : "SGD", "showvalues" : "1", "data" : [{"value" : 785, "link" : j-that.onClick()},{"value" : 656, "link" : j-that.onClick()},{"value" : 741, "link" : j-that.onClick()}] }] }); /* * this.chartSVG = * FusionCharts('ColumnChart').ref.FCC.getSVG(); */ }, onClick : function(){ alert("data element"); //some code here } loadChart and onClick are the member functions of an object(configuration). I have used that.onClick() in the link part since onClick() has no Scope inside loadChart(). The width,height and renderer are pre-configured. Hope this will do. Please get back in case if you need more details. And one more thing, the commented lines at the end of the loadChart() function is to generate svg string of the chart. That piece of code was working fine earlier. After i upgraded to fusion charts version v3.2.2 it is not working. I have started a new topic on this too. Please help me with that too. Share this post Link to post Share on other sites
karthik_k2 Report post Posted January 18, 2012 Hi, The issue is fixed. I made that onClick() function global and it is working now. If there is any chance by which i can pass local function as a link please let me know. Hi, Thanks for your quick response. I am afraid I cannot give you my code as it has so many dependencies. So i am posting the next best thing, an equivalent code. loadChart : function() { var that = this; FusionCharts.setCurrentRenderer('javascript'); var chart = FusionCharts .render({ id : "Column Chart", swfUrl : 'FusionCharts/MSColumn2D.swf', width : that.chartW, height : that.chartH, renderAt : that.getComponent(that.getWrapperId()).el.id }); chart.setJSONData({ "chart" : { "caption" : "Stubent's Monthly Expenditure", "animation" : "1", "xAxisName" : "Students", "yAxisName" : "Currency", "shownames" : "1", "formatnumberscale" : "0", "placeValuesInside" : "0", "legendposition" : "BOTTOM" }, "categories" : [ { "category" : [{"label" : "Alex"},{"label" : "Ram"},{"label" : "John"}] } ], "dataset" : [{ "seriesname" : "USD", "showvalues" : "1", "data" : [{"value" : 100, "link" : j-that.onClick()},{"value" : 125, "link" : j-that.onClick()},{"value" : 85, "link" : j-that.onClick()}] },{ "seriesname" : "INR", "showvalues" : "1", "data" : [{"value" : 123, "link" : j-that.onClick()},{"value" : 123, "link" : j-that.onClick()},{"value" : 856, "link" : j-that.onClick()}] },{ "seriesname" : "SGD", "showvalues" : "1", "data" : [{"value" : 785, "link" : j-that.onClick()},{"value" : 656, "link" : j-that.onClick()},{"value" : 741, "link" : j-that.onClick()}] }] }); /* * this.chartSVG = * FusionCharts('ColumnChart').ref.FCC.getSVG(); */ }, onClick : function(){ alert("data element"); //some code here } loadChart and onClick are the member functions of an object(configuration). I have used that.onClick() in the link part since onClick() has no Scope inside loadChart(). The width,height and renderer are pre-configured. Hope this will do. Please get back in case if you need more details. And one more thing, the commented lines at the end of the loadChart() function is to generate svg string of the chart. That piece of code was working fine earlier. After i upgraded to fusion charts version v3.2.2 it is not working. I have started a new topic on this too. Please help me with that too. Share this post Link to post Share on other sites
Guest Angshu Report post Posted January 18, 2012 Hi, Glad to know that you have managed to resolve your issue. Happy FusionCharting!!! Share this post Link to post Share on other sites
karthik_k2 Report post Posted January 18, 2012 Hi, Glad to know that you have managed to resolve your issue. Happy FusionCharting!!! Thank you. But still I am not able to generate SVG string for the Charts. Please help me with that. Share this post Link to post Share on other sites
ragav Report post Posted July 6, 2012 Hi, Thanks for your response, But that is working while am click particular label only right. Exactly what i want , user can click any where in chart div at the time show one alert message. ie: for example in html page i have 4 div ,in that html page if i click 1st div i want to show one alert , same like other div 's. for testing only am asking java script alert. Because this is possible means i can use android functions like, " final MyJavaScriptInterface myJavaScriptInterface = new MyJavaScriptInterface(this); webview.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction"); ". Actually in android webview i can show four charts use DIV Or SPAN.Then If i click 1st chart that's navigate to Second page(android java). That's why am using MyJavaScriptInterface. this is working fine in android 2.2 because am using fusionchartXT v3.2.2 so charts not show in android 2.2 so div is empty so that's working.But not working in android 4.0 because chart can show in android 4.0. But not working div on click event because chart cover full div area . If i made some changes in html click event working. ie: Increase the div space and reduce the chart size,if i click remaining empty div space div on click event working. i want i can click any where in div area and call the function. Thanks in advance. i attached my html file and testing apk file. Regards Ragav.G ragav.html AndroidHTML_111021b.zip Share this post Link to post Share on other sites
karthik_k2 Report post Posted July 6, 2012 Hi Ragav, If raising click event anywhere in your div is what your need is, then I dont think FusionCharts support that. FusionCharts support click on the data element of the chart only. I can suggest you to make this happen using normal javascript itself. Please see the following code snippet. Lets say your div id is "id" var x = document.getElementById("id");x.style.cursor = 'pointer';x.onclick = function() { // your code...}; I hope this will work for you. Hi, Thanks for your response, But that is working while am click particular label only right. Exactly what i want , user can click any where in chart div at the time show one alert message. ie: for example in html page i have 4 div ,in that html page if i click 1st div i want to show one alert , same like other div 's. for testing only am asking java script alert. Because this is possible means i can use android functions like, " final MyJavaScriptInterface myJavaScriptInterface = new MyJavaScriptInterface(this); webview.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction"); ". Actually in android webview i can show four charts use DIV Or SPAN.Then If i click 1st chart that's navigate to Second page(android java). That's why am using MyJavaScriptInterface. this is working fine in android 2.2 because am using fusionchartXT v3.2.2 so charts not show in android 2.2 so div is empty so that's working.But not working in android 4.0 because chart can show in android 4.0. But not working div on click event because chart cover full div area . If i made some changes in html click event working. ie: Increase the div space and reduce the chart size,if i click remaining empty div space div on click event working. i want i can click any where in div area and call the function. Thanks in advance. i attached my html file and testing apk file. Regards Ragav.G Share this post Link to post Share on other sites
Guest Sumedh Report post Posted July 6, 2012 Hi Ragav, Please refer this post: http://forum.fusioncharts.com/topic/12054-javascript-on-click-event/page__pid__47498#entry47498 Share this post Link to post Share on other sites
