Jump to content


Javascript Render Chart Issue


  • Please log in to reply
2 replies to this topic

#1 renukasagani

renukasagani

    Forum Newbie

  • Members
  • 7 posts

Posted 12 November 2010 - 06:11 AM

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/tes...D.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/tes.../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/tes...erver/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

Attached Thumbnails

  • javascript render.JPG


#2 renukasagani

renukasagani

    Forum Newbie

  • Members
  • 7 posts

Posted 13 November 2010 - 10:45 AM

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/tes...D.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/tes.../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/tes...erver/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,

#3 DannyR

DannyR

    Advanced Member

  • Members
  • PipPipPipPip
  • 84 posts

Posted 18 November 2010 - 07:02 PM

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.
best,
-d.