Search code examples
javascriptflashfusioncharts

Convert flash based graph to javaScript based in fusioncharts


I was using fusioncharts 3.2.1 and I have created a graph which is using Flash, now I have upgraded fusioncharts to version 3.12.2 and I want to run it using JavaScript. I have made a minor change, I thought it would work but it's not showing any chart, its showing 'No data to display'.

What changes do I need to do?

Here is my previous code

var chart = new FusionCharts("<c:url value="/Charts/MSBar2D.swf"/>", "ChartId", width, height, "0", "0");
chart.setDataXML(chartData);
chart.render("chartdiv");

chartData :

<chart palette='2' shownames='1' showvalues='1' showSum='1' decimals='2' useRoundEdges='1' formatNumber='1'>
<categories>
    <set label='aaaaaaa'/>
    <set label='Bbbbb&#8217;s Hardware & Tools'/>
    <set label='Ccccc&#8217;s Bar &amp; Coffee Cafe'/>
    <set label='Imp&#8217;s Delite'/>
    <set label='qqqq'/>
</categories>
<dataset color='8EAC41' seriesName='12/13/2017'>
    <set value='0.0' />
    <set value='0.0' />
    <set value='0.0' />
    <set value='0.0' />
    <set value='0.0' />
</dataset>

Here is my new code :

var chart = new FusionCharts("msbar2D", "ChartId", width, height, "0", "0");
chart.setDataXML(chartData);
chart.render("chartdiv");

Solution

  • The XML data source format is not a valid one.

    Please check the code for reference - FusionCharts.ready(function() { var revenueChart = new FusionCharts({ type: 'msbar2d', renderAt: 'chart-container', width: '500', height: '300', dataFormat: 'xml', dataSource: '<chart palette="2" shownames="1" showvalues="1" showsum="1" decimals="2" useroundedges="1" formatnumber="1"><categories><category label="aaaaaaa" /><category label="Annie’s Bar &amp; Wine" /><category label="Annie&#8217;s Bakery &amp; Coffee Cafe" /><category label="Imp&#8217;s Delite" /><category label="qqqq" /></categories><dataset color="8EAC41" seriesname="12/13/2017"><set value="0.0" /><set value="0.0" /><set value="0.0" /><set value="0.0" /><set value="0.0" /></dataset></chart>' }) .render(); });

    Sample - http://jsfiddle.net/nh6yLn7u/ Hope this helps.