Simple fusioncharts in MonoTouch not working

Question

I'm trying to embed a column3d chart from fusioncharts in my MonoTouch project using UIWebView. I've added the necessary outlets and tested by using loadrequest to load a url and loadHtmlString to format a simple line of text. This works fine. I even tested that fusionchart works correctly on my browser using the below code and it does.

I have a folder named "charts" in my MonoTouch project that contains, Column3d.swf, jquery.min.js, FusionCharts.js, FusionCharts.HC.js and FusionCharts.HC.Charts.js.

In my

ViewDidLoad

string htmlString = "<html>
                     <head>
                     <script type=\"text/javascript\"src=\"Charts/jquery.min.js\">
                     </script>
                     <script type=\"text/javascript\" src=\"Charts/FusionCharts.js\">
                     </script>
                     <script type=\"text/javascript\" src=\"Charts/FusionCharts.HC.js\">
                     </script>
                     <script type=\"text/javascript\" src=\"Charts/FusionCharts.HC.Charts.js\">
                     </script>
                     </head>
                     <body>
                     <div id=\"chartContainer\">FusionCharts will load here!
                     </div>
                     <script type=\"text/javascript\"> var myChart = new FusionCharts( \"Charts/Column3D.swf\", \"myChartId\", \"400\", \"300\", \"0\", \"1\" );myChart.setXMLUrl(\"Charts/Data.xml\");
                    myChart.render(\"chartContainer\");
                     </script>
                     </body>
                     </html>";

this.webView.LoadHtmlString (htmlString, new NSUrl ("./Charts", true));

    /*string htmlString = "<html><head></head><body><span style=\"font-weight: bold;\">This</span> " +
 "<span style=\"text-decoration: underline;\">is</span> <span style=\"font-style: italic;\">some formatted</span> " +"<span style=\"font-weight: bold;text-decoration: underline;\">text!</span><br></body></html>";*/  //works

    //this.webView.LoadHtmlString (htmlString, null);  //works

Data.xml

<chart caption='Weekly Sales Summary'
xAxisName='Week' yAxisName='Amount' numberPrefix='$'> 
<set label='Week 1' value='14400' /> 
<set label='Week 2' value='19600' /> 
<set label='Week 3' value='24000' /> 
<set label='Week 4' value='15700' /> 
</chart>

Can someone explain how I can get this working? Thanks in advance.

EDIT: I also tried

    string htmlString = "<html><head> <title>Creating Pure JavaScript chart</title><script type=\"text/javascript\" src=\"charts/FusionCharts.js\"></script></head> <body><div id=\"chartContainer\">FusionCharts will load here!</div> <script type=\"text/javascript\">FusionCharts.setCurrentRenderer('javascript');var myChart = new FusionCharts( \"charts/Column3D.swf\", \"myChartId\", \"400\", \"300\", \"0\", \"1\" );myChart.setXMLData(\"<chart><set label='Data1' value='1' /></chart>\"); myChart.render(\"chartContainer\"); </script></body> </html>";

where i force the renderer to use javascript and set the chart parameters in the string to no avail. Anyone?

John D John D · Accepted Answer · 2012-05-07T09:51:37

I solved my issue and thought I would post it should someone run into a similar issue.

The first thing I did was to right click on each of my javscript files ie FusionCharts.js, FusionCharts.HC.js and FusionCharts.HC.Charts.js and set their build type to content.

I then told Monotouch the build path for the charts would be contained in the charts folder by declaring

string path = NSBundle.MainBundle.BundlePath + "/Charts/";

Since I declare i am going to look in the Charts folder for related files, I then had to amend my htmlString by removing the "charts" keyword reference from all the "src" as below (since we are already lo.

string htmlString = "<html>
                 <head>
                 <script type=\"text/javascript\" src=\"jquery.min.js\">
                 </script>
                 <script type=\"text/javascript\" src=\"/FusionCharts.js\">
                 </script>
                 <script type=\"text/javascript\" src=\"/FusionCharts.HC.js\">
                 </script>
                 <script type=\"text/javascript\" src=\"FusionCharts.HC.Charts.js\">
                 </script>
                 </head>
                 <body>
                 <div id=\"chartContainer\">FusionCharts will load here!
                 </div>
                 <script type=\"text/javascript\"> var myChart = new FusionCharts(\"Column3D.swf\", \"myChartId\", \"400\", \"300\", \"0\", \"1\"          );myChart.setXMLUrl(\"Charts/Data.xml\");
                myChart.render(\"chartContainer\");
                 </script>
                 </body>
                 </html>";

I then call the loadHtml string method as below with the second argument pointing to the path that contains the javascript files.

this.webView.LoadHtmlString(htmlString, new NSUrl(path, true));

Simple fusioncharts in MonoTouch not working

3 Answers