Sign in to follow this  
Remco Nieuwboer

Visual differences between JS FusionChart and Flash FusionChart

Recommended Posts

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!

post-56581-0-17196600-1435319117_thumb.jpg

post-56581-0-50611700-1435319391_thumb.jpg

Share this post


Link to post
Share on other sites

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.

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
Sign in to follow this