Rorvis

Getting FusionChart to show in Canvas element

Recommended Posts

Hi folks,

 

In our ideal world, we would like to have FusionCharts show up in an HTML5 Canvas element of our page.  However, I understand that everything in the Canvas element must be drawn on the Context as an SVG.  Although FusionCharts is an SVG, it is wrapped in a Span element.  Additionally, to use the Canvas element, you must get a context.  You draw to this context.

 

Typical Canvas-related code:

 

var example = document.getElementById('example');  // canvas id = 'example'
var context = example.getContext('2d');  // Getting the Context for the Canvas

context.fillStyle = 'red';

context.fillRect(30, 30, 50, 50);

 

You can then draw on the Canvas using the Context as above.

 

Whereas, we usually render FC as follows:

var myChart = new FusionCharts( "FusionCharts/Column3D", 
 "myChartId", "400", "300", "0", "1" );
myChart.setXMLUrl("Data.xml");
myChart.render("example");  // But you cannot render to a Canvas element
 

Is it possible to get a FusionChart to show up as a pure SVG, or otherwise workaround this?  I have tried tricking the system, but no luck so far.  Ironically, the Javascript version of FusionCharts is referred to as both the Canvas and the HTML5 version, but I am having trouble getting it to work within those bounds.

 

Thanks,

Rory

(We own licensed versions of FusionCharts Suite XT)

 

 

 

Share this post


Link to post
Share on other sites

Hi Rory,

 

It is possible to obtain the chart data as pure SVG using the function "getSVGString()".

 

Ref.

FusionCharts("myChartId").ref.getSVGString()

 

Awaiting your feedback.

Share this post


Link to post
Share on other sites

Thank you Haritha, I was successful in getting the SVG code using your suggestion.  Thank you for the quick response.

 

I was able to then use that code to create a static version of my Chart in a Canvas.  It is missing the bars to the chart, and of course loses the interactivity, but this did answer my question.  I'll update if we run into further problems.  Right now, I suspect using FusionCharts in this way may not be the answer to our needs.

 

Thank you,

Rory

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now