Visual differences between JS FusionChart and Flash FusionChart

[Remco Nieuwboer]

Hi,

 

I am trying to render some FusionCharts, using the JS, not the Flash version (because I want to export it as a picture and save it on the server and a long story).

The problem is that, using the same XML, I get different designs when it is to compare the flash version and the javascript version. I would like to have the design of the Flash version, but using the javascript version.

 

Some explanation:

1. I load the charts like this:

var objchart = new FusionCharts("MSColumn2D", containerId + "name", 900, 400, "0", "0");

objchart.setXMLData(xmlData);
objchart.render(containerId);

2. the chart what is loaded, looks like attachment 1.

3. I want the chart to be like in attachment 2 (please check yAxis labels and xAxis labels).

4. My xml file is like this:

<?xml version="1.0" encoding="utf-16"?>
<chart xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" caption="Verantwoordelijk" subcaption="" xAxisName="" yAxisName="" rotateYAxisName="0" yAxisMaxValue="5" yAxisValueDecimals="1" decimals="1" forceDecimals="1" numberSuffix="" useRoundEdges="0" bgColor="F8F8F8" numDivLines="3" showAlternateHGridColor="0" showAlternateVGridColor="0" divLineThickness="1" zeroPlaneThickness="1" showPlotBorder="0" plotGradientColor="" showBorder="0" canvasBorderAlpha="0" divLineColor="686868" canvaspadding="10" exportEnabled="1" exportHandler="../../../FCExporter.aspx" exportAtClient="0" exportFileName="158013196_SCORE_PER_COMPETENTIE_VERANTWOORDELIJK_PML_L">
  <categories>
    <category label="Maatschappelijk bewust" />
    <category label="Oplossingsgericht" />
    <category label="Constructief kritisch" />
    <category label="Risicobewust" />
  </categories>
  <dataset seriesName="Peers, medewerkers & leidinggevende" color="FF0000" showvalues="0">
    <set value="5" />
    <set value="5" />
    <set value="5" />
    <set value="5" />
  </dataset>
  <dataset seriesName="Managersgroep" color="7030A0" showvalues="0">
    <set value="3.9" />
    <set value="3.5" />
    <set value="3.7" />
    <set value="3.8" />
  </dataset>
  <styles>
    <definition>
      <style xsi:nil="true" />
      <style name="AxisFont" type="font" size="10" color="555555" bold="1" isHTML="1" />
      <style name="LabelsFont" type="font" font="Verdana" size="8" color="555555" bold="0" isHTML="1" />
    </definition>
    <application>
      <apply xsi:nil="true" />
      <apply toObject="xAxisName" styles="AxisFont" />
      <apply toObject="yAxisName" styles="AxisFont" />
      <apply toObject="SubCaption" styles="AxisFont" />
      <apply toObject="DataLabels" styles="LabelsFont" />
    </application>
  </styles>
</chart> 

5. I am using FusionCharts 3.3.1-sr2.19840.

6. I am using Chrome version 43.0.2357.130.

 

 

My questions are:

1. Why there are so big differences (please check for example the yAxis labels, missing xAxis labels)?

2. What should I change in order to have it as I want (as in the attachment 2)?

 

I am looking forward for your answer. 

Have a nice day!

[Moonmi Sonowal]

Hi,

 

Thanks for the post.

 

Could you please confirm if you div tag has been set display as none ?

 

If so,  please note that  when a DOM element is hidden using display:none - its width and height becomes unavailable. Our chart cannot be rendered accurately within a hidden DOM element. You can try setting the visibility to none.

 

Hope the information is helpful.