J/s Charts - Bars Don't Show On Pageload

[bbarstow]

Had set up a bunch of Flash based charts, and want to be able to use them as JavaScript charts. So I set the renderer before using FusionCharts.render(...)

 

FusionCharts.setCurrentRenderer([color=maroon]'javascript'[/color]);

 

This seems to work just fine, with the exception that on all of the charts (site-wide) don't show the bars when loaded (all browsers). Adjusting the size of a single chart (I have a resize function set on charts that show inside of a jQuery dialog) magically fixes all of the charts.

 

I'll be happy to share any code specifics. Or the Visual Studio 2010 project. See the pictures to understand my post.

 

Any suggestions out there? (We have a 'FusionCharts XT - Website' license and are using the latest updates.)

 

J/S & Flash - Page Load

 

 

J/S & Flash - After [any] chart on the page is resized, all charts display correctly

 

[bbarstow]

I had to create a stripped down, sample test page.

 

Chart XML

<chart caption='Early Childhood Education in Neighborhoods'
      xAxisName='Year'
      yAxisName='% Recieving Early Childhood Education' yAxisMinValue='0' yAxisMaxValue='100'
      exportEnabled='1' exportAtClient='0' exportHandler='FCExporter.aspx'
      showAboutMenuItem='1' aboutMenuItemLabel='About The Skillman Foundation' aboutMenuItemLink='n-http://www.skillman.org/'
      showPlotBorder='1' useRoundEdges='1' showLegend='0' showSum='1' labelDisplay='WRAP'
      decimals='0' numberPrefix='' numberSuffix='%' formatNumber='1' formatNumberScale='0'
      paletteColors='4E6172, 668D3C'
      bgColor='EFE270' bgAlpha='100' showBorder='0' showAlternateHGridColor='0'
      canvasBgColor='FFFFFF' canvasBorderColor='4E6172'
      toolTipBgColor='D9CBAF' toolTipBorderColor='613318' showToolTipShadow='1'
      >

   <set label='2010' value='5.3'  />
   <set label='2011' value='14.6'  />
   <set label='2012' value=''  />
   <set label='2013' value=''  />
   <set label='2014' value=''  />
   <set label='2015' value=''  />
   <set label='2016' value=''  />

   <trendLines>
       <line startValue='51' color='668D3C'  displayvalue='2016{br}Goal' dashed='1' dashGap='3' dashLen='3' toolText='2016 Goal: High Quality early care for 51%+ children' showOnTop='1' thickness='2' valueOnRight='1' />
       <line startValue='25' color='4E6172'  displayvalue='2012{br}Benchmark' dashed='1' dashGap='3' dashLen='3' toolText='2012 Benchmark: 25% of children ages birth to 5 receive early care and education experiences' showOnTop='1' thickness='2' valueOnRight='1' />

       <line startValue='0' endValue='61.1' color='4E6172'  displayvalue='Trend' dashed='0' toolText='2010-2016 Trend' showOnTop='1' thickness='2' valueOnRight='1' />
   </trendLines>

   <styles>
       <definition>
           <style name='chartCaptionFont' type='font' font='Vernada' size='12' color='000000' bold='1' />
           <style name='chartSubCaptionFont' type='font' font='Vernada' size='11' color='000000' />
           <style name='dataLabelsFont' type='font' font='Vernada' size='11' color='000000' />
           <style name='valuesFont' type='font' font='Vernada' size='11' color='000000' />
           <style name='axisFont' type='font' font='Vernada' size='11' color='000000' bold='1' />
       </definition>
       <application>
           <apply toObject='Caption' styles='chartCaptionFont' />
           <apply toObject='SubCaption' styles='chartSubCaptionFont' />
           <apply toObject='DataLabels' styles='dataLabelsFont' />
           <apply toObject='ToolTip' styles='chartSubCaptionFont' />
           <apply toObject='DataValues' styles='valuesFont' />
           <apply toObject='xAxisName' styles='axisFont' />
           <apply toObject='yAxisName' styles='axisFont' />
           <apply toObject='yAxisValues' styles='valuesFont' />
       </application>
   </styles>
</chart>

 

 

 

J/S I've used:

$(function () {
	FusionCharts.setCurrentRenderer('javascript');

	FusionCharts.render("Swf/Column2D.swf", "chartDiv-Chart", 550, 500, "chartDiv", "Controls/Charts/Chart10-ExampleLinearRegression.xml");

	//Also has same problem as FusionCharts.render
	//		$('#chartDiv').insertFusionCharts({
	//			swfUrl: "Swf/Column2D.swf",
	//			dataSource: "Controls/Charts/Chart10-ExampleLinearRegression.xml",
	//			dataFormat: "xmlurl",
	//			width: 550,
	//			height: 500,
	//			id: "chartDiv-Chart"
	//		});
});

Edited September 26, 2012 by bbarstow

[Guest Bindhu]

Hi,

 

Can you please let us know the version of jQuery file that you are currently using?

 

Also, please let us know the version of FusionCharts suite(as is in the FusionCharts.js file) that you are currently using.

[Medros]

I have ran into this same issue.

 

Renderer: Javascript

Chart: Bar2D / Stacked2D

jQuery: 1.8.2

FusionCharts.js: 3.2.4-release.8565

HighCharts: 2.1.9

 

Once I resize the window the colors appear. Flash charts have no problem rendering the colors.

I am not defining the pallet colors and opted for no gradient color on the bars.

 

Any assistance would be appreciated.

 

M

[Guest Bindhu]

Hi,

 

Please refer to the link below,

http://forum.fusioncharts.com/topic/12300-datapoints-do-not-render-on-jquery-180/page__p__48538__hl__jquery+1.8__fromsearch__1#entry48538

 

Hope this helps!