Fallback For Fusioncharts.rendercharthtml Not Working

[JMaj]

I'm use the code below to create a OS pie chart based on some Google data. It's creates the Pie Chart and displays it correctly. But I am not getting anything when Flash is disabled, I turned it off in chrome and just got the 'Missing Plugin' error.

 

Is there any Fall back for Non Flash users, primarily for the iPad for client demo and presentations.

 

 

Public Function ImpressionByBrowser
Dim DataQuery As DataQuery = New DataQuery(Query)
       Dim DataFeed As DataFeed = AnalyticService.Query(DataQuery)

       Dim xmlData As StringBuilder = New StringBuilder()
       xmlData.Append("<chart caption='Impressions by Operating System' xAxisName='Systems' yAxisName='Imperssions' showValues='0' formatNumberScale='0' showBorder='1'>")
       For Each entry As DataEntry In DataFeed.Entries
           If entry.Dimensions(0).Value = "(not set)" Then
               xmlData.Append("<set label='" & entry.Dimensions(0).Value & "' value='" & entry.Metrics(0).Value & "' />")
           End If
       Next

       xmlData.Append("</chart>")
Return FusionCharts.RenderChartHTML("./charts/Pie3D.swf", "", xmlData.ToString(), "OSesPieChart", "600", "300", False)

 

EDIT

I'm also embeding this on the aspx page.

<script type="text/javascript" src="./charts/FusionCharts.js"></script>
<script type="text/javascript" src="./charts/highcharts.js"></script>
<script type="text/javascript" src="./charts/jquery.min.js"></script>

 

 

And if the HTML5 or Image Fallback isn't included in the Free version that's fine, the company I work for is doing a test before we buy thing. We just wanna make sure that the code above will generate the same results for Flash, HTML5, and Image(not really important) when we do buy the license.

 

Thanks.

Edited July 18, 2011 by JMaj

[jlevesque]

I am having the same problem for a dashboard my team has created. I have purchased the SaaS license thinking javascript rendering was already built in and working, but it seems to only work when using RenderChart() and not RenderChartHTML. That is a problem for us since we are using ASP.NET MVC 3 and need AJAX functionality. In the documentation, Fusioncharts recommends RenderChartHTML for AJAX use. Oddly enough, Fusionchart's own documentation says RenderChartHTML is deprecated in favor of RenderChart <link>. It's left us confused for sure.

 

Any updates that would enable RenderChartHTML to degrade into javascript rendering? Or is there a workaround for ASP.NET MVC to use RenderChart and AJAX?

 

 

 

[Guest Angshu]

Hi,

 

Welcome to FusionCharts Forum!

 

There are some limitations of HTML embedding method. Let us get a comprehensive list of the limitations:

 

• It does not support JSON data format. So the only data format that you can pass to chart using this method is XML.
• It is not fully compatible with FusionCharts JavaScript framework, hence, many of advanced features (like Print Manager, LinkedCharts, Advanced Event management etc.) won't work.
• It does not support JavaScript (HTML5) chart fallback mechanism.

Hope this helps.

[JMaj]

Hi,

 

Welcome to FusionCharts Forum!

 

There are some limitations of HTML embedding method. Let us get a comprehensive list of the limitations:

 

• It does not support JSON data format. So the only data format that you can pass to chart using this method is XML.
• It is not fully compatible with FusionCharts JavaScript framework, hence, many of advanced features (like Print Manager, LinkedCharts, Advanced Event management etc.) won't work.
• It does not support JavaScript (HTML5) chart fallback mechanism.

Hope this helps.

 

 

Thanks Angshu.

 

My next question is how will I go about creating the HTML5 chart?

[JMaj]

Thanks Angshu.

 

My next question is how will I go about creating the HTML5 chart?

 

 

 

No edit button, but I found the Javascript documentaion. As long as I can write the js code server side I don't see an issue.

 

 

 

[JMaj]

No edit button, but I found the Javascript documentaion. As long as I can write the js code server side I don't see an issue.

 

 

 

 

 

 

Edit again

 

<div id="chartContainer">/div>


<script type="text/javascript"><!--
var myChart = new FusionCharts( './charts/Pie3D.swf','myChartId', '400', '300', '0', '1' );myChart.setXMLUrl('Data.xml');myChart.render('chartContainer');
myChart.setXMLData("<chart caption='Impressions by Operating System' xAxisName='Systems' yAxisName='Imperssions'showValues='0' showLabels='0' legendPosition='RIGHT' showLegend='1'  formatNumberScale='0' showBorder='1'><set label='iPhone' value='2738602' /><set label='Windows' value='1314438' /><set label='iPad' value='987632' /><set label='Android' value='974328' /><set label='iPod' value='927866' /><set label='Macintosh' value='398802' /><set label='Linux' value='16203' /><set label='Google TV' value='4929' /><set label='Vodafone' value='2592' /></chart>"); 
myChart.render('chartContainer');
</script>

 

This code doesn't produce an HTML5 Chart, I create the js code from the codebehind and add it on the page. It only creates the flash chart no html5 chart.

[Guest Angshu]

Hi,

Thanks for your post.

Starting FusionCharts v3.2, FusionCharts also allows you to create JavaScript based charts (sometimes also referred to as HTML5/Canvas charts). This feature allows you to create charts in web browsers where Flash Player is not supported e.g. in iPhone/iPad. FusionCharts internally makes use of HighCharts library to generate JavaScript based charts.

For more details, please refer to the link: http://www.fusioncha...singPureJS.html

 

Hope this helps.

[JMaj]

Hi,

 

Thanks for your post.

 

Starting FusionCharts v3.2, FusionCharts also allows you to create JavaScript based charts (sometimes also referred to as HTML5/Canvas charts). This feature allows you to create charts in web browsers where Flash Player is not supported e.g. in iPhone/iPad. FusionCharts internally makes use of HighCharts library to generate JavaScript based charts.

 

For more details, please refer to the link: http://www.fusioncha...singPureJS.html

 

Hope this helps.

 

That's what I'm doing in the above code, but I'm not getting JavaScript based charts. The only difference is I'm not passing xml, I've creating it in a string. But that shouldn't matter right?

[Guest Angshu]

Hi,

 

Thanks for your response.

 

No matter whether you are using setXMLUrl() or setXMLData() method.

In case you wish to render only JavaScript based charts (and not use Flash at all), you just have to add a line of code as shown below:

FusionCharts.setCurrentRenderer('javascript').

This code will ask FusionCharts renderer to skip Flash rendering and create pure JavaScript based charts.

 

Please find the sample code below:

 

<html>
<head>      
<title>My First chart using FusionCharts - Using pure JavaScript</title>  
<script type="text/javascript" src="../FusionCharts/FusionCharts.js"></script>
</head>  
<body>    
<div id="chartContainer">FusionCharts will load here!</div>        
<script type="text/javascript">

FusionCharts.setCurrentRenderer('javascript');

var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId", "400", "300", "0", "1" );
myChart.setXMLData("<chart caption='Weekly Sales Summary' xAxisName='Week' " +
     "yAxisName='Sales' 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>");

 myChart.render("chartContainer");
  </script>   
 </body>
</html>

 

Hope this helps.

[JMaj]

Hi,

 

Thanks for your response.

 

No matter whether you are using setXMLUrl() or setXMLData() method.

In case you wish to render only JavaScript based charts (and not use Flash at all), you just have to add a line of code as shown below:

FusionCharts.setCurrentRenderer('javascript').

This code will ask FusionCharts renderer to skip Flash rendering and create pure JavaScript based charts.

 

Please find the sample code below:

 

<html>
<head>      
<title>My First chart using FusionCharts - Using pure JavaScript</title>  
<script type="text/javascript" src="../FusionCharts/FusionCharts.js"></script>
</head>  
<body>    
<div id="chartContainer">FusionCharts will load here!</div>        
<script type="text/javascript">

FusionCharts.setCurrentRenderer('javascript');

var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId", "400", "300", "0", "1" );
myChart.setXMLData("<chart caption='Weekly Sales Summary' xAxisName='Week' " +
     "yAxisName='Sales' 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>");

 myChart.render("chartContainer");
  </script>   
 </body>
</html>

 

Hope this helps.

 

 

Angshu, I appreciate your help. But I don't think your understanding me. I am trying to tell you that your HTML5 Fall back doesn't not work.

Here's what I want and mean:

1. I'm am trying to have both Flash and HTML5, the HTML5 one will be a fallback for users who don't have Flash.

2. The code doesn't generated any fallback, I have provided sample URLs for you to look at and see what I mean.

Your Chart Code

Here's a URL of the demo code you provided. It doesn't produce any results for me, I just get Invalid Data.

http://up.videodetec...shu/Charts.html

 

 

Mine Chart Code

Here's mine, it produces the Flash Charts but no HTML5 fallback. I've tested in chrome with Flash turned off and I've tested it on the iPad.

http://up.videodetec...ine/Charts.html

 

All I need to know is why isn't the Fallback working in my code, I've done everything correctly and it produce no charts when Flash is disabled. Or are the HTTML5 charts not working at all?

 

If you can answer all the points in my post that would be great. Thanks

[Guest Angshu]

Hi,

 

Thanks for your response.

 

Could you please confirm the FusionCharts version you are using?

 

You can check your FusionCharts version by enabling the debug mode:

 

var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId", "400", "300", "1", "1" );

 

The code is working fine from our end, please find the screenshot attached for your reference.

 

Awaiting for your reply.

[JMaj]

Hi,

 

Thanks for your response.

 

Could you please confirm the FusionCharts version you are using?

 

You can check your FusionCharts version by enabling the debug mode:

 

var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId", "400", "300", "1", "1" );

 

The code is working fine from our end, please find the screenshot attached for your reference.

 

Awaiting for your reply.

 

 

I've enabled the debugger and I am using Fusion Charts 3.2.1. It's the one that was in the download files on the site.

 

 

[Guest Angshu]

Hi,

 

Thanks for your response.

 

If you call FusionCharts._fallbackJSChartWhenNoFlash() function at the top of the page, FusionCharts JavaScript class will check whether there is Flash Player supported or installed in the browser. If the probing fails, it automatically switches the render mode to JavaScript based charts.

 

Please find the sample code below:

 

<html>
 <head>        
   <title>My First chart using FusionCharts - Using JavaScript Fallback</title>    
   <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
 </head>   
 <body> 

<div id="chartContainer">FusionCharts will load here!</div>
<script type="text/javascript">

     FusionCharts._fallbackJSChartWhenNoFlash();

     var myChart = new FusionCharts( "FusionCharts/Column3D.swf", "myChartId", "400", "300", "0", "1" );
  	myChart.setXMLData("<chart caption='Weekly Sales Summary' xAxisName='Week' " +
     "yAxisName='Sales' 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>");
     myChart.render("chartContainer");

   </script>
</body>
</html>

 

Hope this helps.

[JMaj]

Hi,

 

Thanks for your response.

 

If you call FusionCharts._fallbackJSChartWhenNoFlash() function at the top of the page, FusionCharts JavaScript class will check whether there is Flash Player supported or installed in the browser. If the probing fails, it automatically switches the render mode to JavaScript based charts.

 

Please find the sample code below:

 

<html>
 <head>        
   <title>My First chart using FusionCharts - Using JavaScript Fallback</title>    
   <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
 </head>   
 <body> 

<div id="chartContainer">FusionCharts will load here!</div>
<script type="text/javascript">

     FusionCharts._fallbackJSChartWhenNoFlash();

     var myChart = new FusionCharts( "FusionCharts/Column3D.swf", "myChartId", "400", "300", "0", "1" );
  	myChart.setXMLData("<chart caption='Weekly Sales Summary' xAxisName='Week' " +
     "yAxisName='Sales' 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>");
     myChart.render("chartContainer");

   </script>
</body>
</html>

 

Hope this helps.

 

 

I've found the issue. With mine I needed a space before the showLabels. It appear like "showValues='0'showLabels='0'" instead of "showValues='0' showLabels='0'"

 

And your embed was missing the number prefix, when I added the dollar signed it worked.

 

Thanks for the assistance.

 

 

----

 

I do have one side question, we were looking at buying Fusion Maps as well. Are we able to Provide the country or city name? The examples I've provides some sort of country code or country prefix. No of them provide The exact name for example London or Spain.

 

 

[Guest Angshu]

Hi,

 

Glad to know that you have managed to resolve your problem.

 

Regarding FusionMaps, could you please send us a screenshot of your requirement ?

 

Awaiting for your response.

[shanecotee]

I'd like to add to this thread for anyone else who had the JavaScript fallback problem while using AJAX in ASP.NET with the FusionCharts RenderChart() method. We could get the JavaScript fallback to work with RenderChartHTML(), but that method wouldn't work for our AJAX requests, by design. Luckily, I found a fix.

 

 

When calling FusionCharts.RenderChart(), that method would call RenderChartALL() inside of FusionCharts.dll, or in FusionCharts.cs if you have the source code. Since we had the source code to work with, I added the following code to RenderChartALL() within FusionCharts.cs around line 78:

 

builder.Append("FusionCharts._fallbackJSChartWhenNoFlash();" + Environment.NewLine);

 

Now the JavaScript fallback seems to work perfectly within our ASP.NET MVC 3 application, whether it's rendering the chart in the initial page load or in response to an AJAX request.

 

Hope that helps someone.

 

Shane Cotee

Owner, Lead Developer

Prestige Web Development

http://www.prestigewd.com

[Guest Angshu]

Hi,

 

Welcome to FusionCharts Forum and thank you very much for your valuable feedback.

 

Happy FusionCharting!