Javascript Render Chart Issue

[renukasagani]

Hi,

 

I am using FusionCharts_v_3.2.1 with java script render concept. I am able to render using below xml, but the chart properties are not working as flash properties.

 

Below are the issues phased with java script render:

1. legend marker should come as square, please find attached the image of the java script chart which is being rendered as vertical rectangle legend marker.

 

2.Data labels are not adjusting automatically , if category label length is high ,appearing only half of the name .

 

3.Number of div lines of chart also not working, I have adjusted to 5 but still it is coming as 10.

 

My code is :

 

<div id="chartContainer">FusionCharts will load here!</div>

 

<script type="text/javascript">

var myChartx = new FusionCharts( "http://localhost/test/FusionCharts_3.2.1/Charts/StackedColumn2D.swf","myNext", "600", "400", "0", "1" );

 

 

myChartx.setXMLData("<chart decimalPrecision='0' showValues='1' showNames='1' numberSuffix=' %' pieSliceDepth='20' formatNumberScale='0' exportEnabled='1' exportAtClient='0' exportAction='save' exportHandler='http://localhost/test/FusionCharts_3.2.1/ExportHandlers/PHP/FCExporter.php' exportFileName='133-4145-1289454166' overRideLimitCalc='1' showPlotBorder='1' plotBorderColor='000000' plotBorderThickness='2' plotGradientColor='' plotBorderAlpha='75' animation='0' placeValuesInside='1' exportShowMenuItem='0' yAxisMinValue='0' yAxisMaxValue='100' numDivLines='5'><categories> <category label='Private Buses' /> <category label='Govt Buses' /></categories><dataset seriesName='India' color='008800' > <set value='10' color='008800' showValue='10' /> <set value='20' color='008800' showValue='20' /> </dataset><dataset seriesName='US' color='CDFFCC' > <set value='30' color='CDFFCC' showValue='30' /> <set value='40' color='CDFFCC' showValue='40' /> </dataset> <styles><definition><style name='MyFirstFontStyle' type='font' face='Verdana' size='10' color='333333' bold='1' /> <style name='MyFirstAnimationStyle' type='animation' param='_yScale' start='0' duration='1' /> <style name='MyFirstShadow' type='Shadow' color='CCCCCC' /> </definition><application> <apply toObject='DataValues' styles='MyFirstFontStyle,MyFirstAnimationStyle' /> </application> </styles> </chart>");

 

myChartx.render("chartContainer");

 

myChartx._overrideJSChartConfiguration({

exporting:{

url: 'http://localhost/test/export/exporting-server/index.php',

type: 'image/svg+xml'

},

chart: {

marginTop: 30,

marginRight: 30

},

xAxis: {

labels: {

align: "right",

rotation: 0

}

},

yAxis: [{

yaxisminvalue: "0",

yaxismaxvalue: "100",

numDivLines: "5"

 

}]

 

 

 

 

});

</script>

 

 

Please review the code , and let me know the solution as soon as possible, Please consider my request with high priority.

 

Thanks,

Renuka

[renukasagani]

Hi,

 

I am using FusionCharts_v_3.2.1 with java script render concept. I am able to render using below xml, but the chart properties are not working as flash properties.

 

Below are the issues phased with java script render:

1. legend marker should come as square, please find attached the image of the java script chart which is being rendered as vertical rectangle legend marker.

 

2.Data labels are not adjusting automatically , if category label length is high ,appearing only half of the name .

 

3.Number of div lines of chart also not working, I have adjusted to 5 but still it is coming as 10.

 

My code is :

 

<div id="chartContainer">FusionCharts will load here!</div>

 

<script type="text/javascript">

var myChartx = new FusionCharts( "http://localhost/test/FusionCharts_3.2.1/Charts/StackedColumn2D.swf","myNext", "600", "400", "0", "1" );

 

 

myChartx.setXMLData("<chart decimalPrecision='0' showValues='1' showNames='1' numberSuffix=' %' pieSliceDepth='20' formatNumberScale='0' exportEnabled='1' exportAtClient='0' exportAction='save' exportHandler='http://localhost/test/FusionCharts_3.2.1/ExportHandlers/PHP/FCExporter.php' exportFileName='133-4145-1289454166' overRideLimitCalc='1' showPlotBorder='1' plotBorderColor='000000' plotBorderThickness='2' plotGradientColor='' plotBorderAlpha='75' animation='0' placeValuesInside='1' exportShowMenuItem='0' yAxisMinValue='0' yAxisMaxValue='100' numDivLines='5'><categories> <category label='Private Buses' /> <category label='Govt Buses' /></categories><dataset seriesName='India' color='008800' > <set value='10' color='008800' showValue='10' /> <set value='20' color='008800' showValue='20' /> </dataset><dataset seriesName='US' color='CDFFCC' > <set value='30' color='CDFFCC' showValue='30' /> <set value='40' color='CDFFCC' showValue='40' /> </dataset> <styles><definition><style name='MyFirstFontStyle' type='font' face='Verdana' size='10' color='333333' bold='1' /> <style name='MyFirstAnimationStyle' type='animation' param='_yScale' start='0' duration='1' /> <style name='MyFirstShadow' type='Shadow' color='CCCCCC' /> </definition><application> <apply toObject='DataValues' styles='MyFirstFontStyle,MyFirstAnimationStyle' /> </application> </styles> </chart>");

 

myChartx.render("chartContainer");

 

myChartx._overrideJSChartConfiguration({

exporting:{

url: 'http://localhost/test/export/exporting-server/index.php',

type: 'image/svg+xml'

},

chart: {

marginTop: 30,

marginRight: 30

},

xAxis: {

labels: {

align: "right",

rotation: 0

}

},

yAxis: [{

yaxisminvalue: "0",

yaxismaxvalue: "100",

numDivLines: "5"

 

}]

 

 

 

 

});

</script>

 

 

Please review the code , and let me know the solution as soon as possible, Please consider my request with high priority.

 

Thanks,

Renuka

 

waiting for your feedback

 

Thanks,

[DannyR]

tickInterval is what you want to use for the override. See my post here: http://forum.fusionc...tconfiguration/

 

I assume you mean to use 4 div lines (20% gap), not 5 div lines (16% gap). Also, the code you posted does not match the screenshot that you attached.