Getting FusionChart to show in Canvas element

[Rorvis]

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)

 

 

 

[Haritha]

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.

[Rorvis]

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

[Haritha]

Hi Rory,

 

Glad that it helped. 

 

You may get back to us whenever you need help.

 

Happy FusionCharting!