ww1711

Certainly! I'm curious as to whether or not there is a chart, like in your example, but that has the ability to render the values in a table WITHIN the chart control as opposed to doing it separately outside of the chart object in an HTML table. It doesn't appear such a chart exists... This is fine, though. I am fine with having to render the table separately, as long as the cell-width's line-up underneath the columns without fail 100% of the time so that the user thinks it's all one control. As shown in the initial screenshot I attached, the columns appear to be sitting on top of the table cells. I'm ok with having fixed-width instead of a fluid, percentage-based design, if that's what is needed to get this to work; I have 500px horizontally to work with. The fiddle you sent almost accomplishes this need, but, as you can see, the table spans far outside the boundary of the chart and no longer appears to be related to the chart from a UX standpoint. Thanks again!

Thanks for the effort. I'm aware of the ability to stack columns, and the ability to render a separate table with the results. I was wondering if there existed the ability to this all in one control and my assumption based on your fiddle is that this is not possible. I will find another way to make it work. Thanks!

Hello, I'm looking to create a column chart that looks similar to what's shown in the attachment. Can you please provide some guidance on the steps I may be able to take to reproduce such a result? Thanks!

UPDATE: The issue is still present even with the increase in chart height. The lower-most points render correctly, but now points that are a few points higher in value, render the tooltip below, and outside, the chart container.

Hello Sashibhusan, I increased my chart height by 5 pixels (from 35 to 40) and the tooltip now renders as expected; for low points, the tooltip shows above the point, as opposed to below it. Just for testing of the solution, I decreased the height back down to 35 pixels, and adjusted the z-index of the div the chart is housed within; no changes. Here is the chart data: <chart palette='2' caption='' bgAlpha='100' setAdaptiveYMin='1' highColor='00CC33' lowColor='FF0000' showOpenAnchor='0' showCloseAnchor='0' showHighLowValue='1' showOpenValue='1' showCloseValue='1' decimals='1' showToolTip='1' bgColor='FFFFFF'><dataset><set value='86.7000000000' toolText='86.7 - Mar 2013'/><set value='84.0000000000' toolText='84.0 - Apr 2013'/><set value='94.0000000000' toolText='94.0 - May 2013'/><set value='89.9000000000' toolText='89.9 - Jun 2013'/><set value='80.8000000000' toolText='80.8 - Jul 2013'/><set value='93.5000000000' toolText='93.5 - Aug 2013'/><set value='94.5000000000' toolText='94.5 - Sep 2013'/><set value='94.3000000000' toolText='94.3 - Oct 2013'/><set value='83.8000000000' toolText='83.8 - Nov 2013'/><set value='83.8000000000' toolText='83.8 - Dec 2013'/><set value='99.1000000000' toolText='99.1 - Jan 2014'/><set value='89.8000000000' toolText='89.8 - Feb 2014'/></dataset></chart> Dimensions: 285w x 35h As I said, I "fixed" the problem by increasing the height, so this is no longer a real issue on my page, but a solution would be perfect so this can be avoided where chart size calls to be smaller. Thanks

Hello, I'm having an issue with the ToolTip popping up outside of the chart canvas (rendered with JS). Please see the screenshot attached. Any thoughts on how to make the ToolTip show within the constraints of the chart canvas? Thanks

After not looking into this for a while, I came back to it a little earlier today. It's solved. I had a reference to jquery.js in the head tag. I removed it, and now the charts render in js. I'm not sure why this is an issue, but it was. I hope this helps someone else in the future.

Hi, I'm wondering it it is possible to render a stacked 3D bar chart with a thinner chart floor. Please see images attached. I'd like to render the chart with a thin floor (1, maybe 2 px) rather than the thick floor that renders by default. This: Instead of this: Thanks!

Yes, all of the files are in the correct place as I stated in my post. This issue is present in any variation that I attempt. It's not working for any of the FusionWidgets either (that do not have a forceYAxisValueDecimals setting present). Any other ideas?

Hello all at FC, I've looked into many topics regarding this issue and have tried implementing each solution and haven't gotten this to work yet. Here is my JS: FusionCharts.setCurrentRenderer("javascript"); FusionCharts.debugMode.outputTo(function () { console.log(arguments); }); var fc = new FusionCharts("../_FusionCharts/StackedColumn3D.swf", "NewBarometer1", "366", "200","0","1"); fc.setXMLData("<%= CreateXML("DueToday") %>"); fc.render("divBarometer"); Here is my XML: <chart palette='2' baseFontColor='000000' showCanvasBg='0' showValues='0' useRoundEdges='1' chartNoDataText='Coming Soon!' legendNumColumns='2' forceYAxisValueDecimals='1' forceYAxisValueDecimals='1' showYAxisValues='0' yAxisValueDecimals='0' decimals='0' exportEnabled='1' exportAtClient='0' exportAction='download' exportHandler='../CPD/FCExporter.aspx' exportFormats='JPG=Export as JPEG' exportFileName='DueTodayOverdue-10-21-2013_10-29-54_AM' subCaption='' exportDialogColor='e1f5ff' exportDialogBorderColor='0372ab' YAxisMinValue='0' bgColor='EFEFEF' bgAlpha='100' exportDialogFontColor='0372ab' exportDialogPBColor='0372ab'><categories><category label='Available'/><category label='Overdue'/><category label='Due Today'/></categories><dataset seriesName='Available'><set value='3011940' toolText='836:39:00'/><set /><set /></dataset><dataset seriesName='Workflow'><set /><set value='6977' toolText='1:56:17'/><set value='6734' toolText='1:52:14'/></dataset><styles><definition><style name='mySubCaptionFont' type='font' font='Tahoma' size='9' bold='0'/><style name='myShadow' type='shadow' color='0E4068' angle='45'/><style name='mySCShadow' type='shadow' color='000000' angle='45'/><style name='chartCaption' type='font' font='Arial' size='11' color='000000'/><style name='axisNLabels' type='font' font='Arial' size='10' color='000000'/></definition><application><apply toObject='Caption' styles='myShadow'/><apply toObject='Caption' styles='chartCaption'/><apply toObject='DataLabels' styles='axisNLabels'/><apply toObject='SubCaption' styles='mySubCaptionFont'/></application></styles></chart> I've attempted rendering this in IE9 and Google Chrome (up-to-date as of 2013/10/21). When the chart renders in Flash, everything looks fine. When I attempt to render in JavaScript, I get the "Loading Chart. Please Wait" and nothing happens. It looks as if the FusionCharts.js code is falling on itself at: (h is undefined) d[g] = b.attr(h.attributes); My .swf and the 4 required .js files are all in the same place. Can you help with any possible solutions, please? Thank you!

Works perfectly. Thanks!

Thank you, Angshu. I will look into the solution and postback (no pun intended) with any comments/concerns. Thanks!

That code block is what tries to load for scenario 2, i.e. RenderChartHTML For scenario 1, i.e. RenderChart here is what's trying to load to LIT1.Text: <!-- START Script Block for Chart Efficiency --> <div id='EfficiencyDiv' > Chart. </div> <script type="text/javascript"> var chart_Efficiency = new FusionCharts({"debugMode" : "0", "swfUrl" : "../_FusionCharts/Column3D.swf", "renderAt" : "EfficiencyDiv", "width" : "366", "wMode" : "opaque", "dataFormat" : "xml", "id" : "Efficiency", "registerWithJS" : "1", "height" : "250","dataSource" : "<chart palette='2' caption='Productivity' baseFontColor='000000' showCanvasBg='0' showValues='0' chartNoDataText='Coming Soon!' legendNumColumns='2' forceYAxisValueDecimals='1' forceYAxisValueDecimals='1' yAxisValueDecimals='0' decimals='0' exportEnabled='1' exportAtClient='0' exportAction='download' exportHandler='../CPD/FCExporter.aspx' exportFormats='JPG=Export as JPEG' exportFileName='Productivity-12-1-2011_9-13-59_AM' subCaption='KPI Production Time ÷ Production Time' exportDialogColor='e1f5ff' exportDialogBorderColor='0372ab' YAxisMinValue='69.0290232734735' exportDialogFontColor='0372ab' exportDialogPBColor='0372ab' ><set value='78.41' color='FF0000' toolText = ' 78.41% ' name='11/1' /><set value='72.66' color='FF0000' toolText = ' 72.66% ' name='11/2' /><set value='81.51' color='FF0000' toolText = ' 81.51% ' name='11/3' /><set value='75.48' color='FF0000' toolText = ' 75.48% ' name='11/4' /><set value='82.71' color='FF0000' toolText = ' 82.71% ' name='11/7' /><set value='85.92' color='FF0000' toolText = ' 85.92% ' name='11/8' /><set value='84.29' color='FF0000' toolText = ' 84.29% ' name='11/9' /><set value='81.94' color='FF0000' toolText = ' 81.94% ' name='11/10' /><set value='90.63' color='8EA184' toolText = ' 90.63% ' name='11/11' /><set value='91.05' color='586cc4' toolText = ' 91.05% ' name='11/14' /><set value='89.59' color='FF0000' toolText = ' 89.59% ' name='11/15' /><set value='81.98' color='FF0000' toolText = ' 81.98% ' name='11/16' /><set value='85.72' color='FF0000' toolText = ' 85.72% ' name='11/17' /><set value='93.14' color='CFCFCF' toolText = ' 93.14% ' name='11/18' /><set value='87.83' color='FF0000' toolText = ' 87.83% ' name='11/21' /><set value='91.09' color='586cc4' toolText = ' 91.09% ' name='11/22' /><set value='90.14' color='CFCFCF' toolText = ' 90.14% ' name='11/23' /><set value='91.21' color='8EA184' toolText = ' 91.21% ' name='11/25' /><set value='90.48' color='586cc4' toolText = ' 90.48% ' name='11/28' /><set value='89.80' color='FF0000' toolText = ' 89.80% ' name='11/29' /><set value='87.23' color='FF0000' toolText = ' 87.23% ' name='11/30' /><trendlines> <line startValue='90' color='993366' displayValue='90%' showOnTop='1' valueOnRight='1'/> </trendlines><styles><definition> <style name='mySubCaptionFont' type='font' font='Tahoma' size='9' bold='0'/> <style name='myShadow' type='shadow' color='5E1F4C' angle='45' /> <style name='mySCShadow' type='shadow' color='000000' angle='45' /> <style name='chartCaption' type='font' font='Arial' size='11' color='000000'/> <style name='axisNLabels' type='font' font='Arial' size='10' color='000000'/></definition><application> <apply toObject='Caption' styles='myShadow'/> <apply toObject='Caption' styles='chartCaption'/> <apply toObject='DataLabels' styles='axisNLabels'/> <apply toObject='SubCaption' styles='mySubCaptionFont'/> <apply toObject='SubCaption' styles='mySCShadow'/></application></styles></chart>"}).render();</script> <!-- END Script Block for Chart Efficiency -->

Howdy, I'm trying to render a chart in an asp:UpdatePanel and I'm having an issue doing so. There are two methods that I've tried using: (LIT1 is an asp:Literal runat=server) Please keep in mind that I'm doing this in the .aspx not the code behind aspx.vb 1) LIT1.Text = InfoSoftGlobal.FusionCharts.RenderChart("../_FusionCharts/Column3D.swf","",strXML.ToString(),"Efficiency","350","250",False,False) 2) LIT1.Text = InfoSoftGlobal.FusionCharts.RenderChartHTML("../_FusionCharts/Column3D.swf","",strXML.ToString(),"Efficiency","350","250",False,False) Number one goes through the code and renders a blank div with "Chart." present (no swf file at all) Number two goes through the code and render the swf with a message stating "Invalid XML data" I know for a fact that the XML data is not invalid because it's the same string I use when rendering the chart normally (in a div with a javascript code block (ex: var MyChart....)) Can anyone shed some light on why this is happening? Here is what is trying to load into LIT1.Text: <!-- START Code Block for Chart Efficiency --> <object id="Efficiency" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="250" width="366" codebase="[url="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"]http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0[/url]" > <param name="movie" value="../_FusionCharts/Column3D.swf"> <param name="FlashVars" value="&registerWithJS=1&chartHeight=250&DOMId=Efficiency&dataXML=<chart palette='2' caption='Productivity' baseFontColor='000000' showCanvasBg='0' showValues='0' chartNoDataText='Coming Soon!' legendNumColumns='2' forceYAxisValueDecimals='1' forceYAxisValueDecimals='1' yAxisValueDecimals='0' decimals='0' exportEnabled='1' exportAtClient='0' exportAction='download' exportHandler='../CPD/FCExporter.aspx' exportFormats='JPG=Export as JPEG' exportFileName='Productivity-12-1-2011_9-02-59_AM' subCaption='KPI Production Time ÷ Production Time' exportDialogColor='e1f5ff' exportDialogBorderColor='0372ab' YAxisMinValue='62.4607721732812' exportDialogFontColor='0372ab' exportDialogPBColor='0372ab' ><set value='71.46' color='FF0000' toolText = ' 71.46% ' name='11/1' /><set value='71.13' color='FF0000' toolText = ' 71.13% ' name='11/2' /><set value='68.13' color='FF0000' toolText = ' 68.13% ' name='11/3' /><set value='66.35' color='FF0000' toolText = ' 66.35% ' name='11/4' /><set value='70.50' color='FF0000' toolText = ' 70.50% ' name='11/7' /><set value='68.24' color='FF0000' toolText = ' 68.24% ' name='11/8' /><set value='69.89' color='FF0000' toolText = ' 69.89% ' name='11/9' /><set value='69.39' color='FF0000' toolText = ' 69.39% ' name='11/10' /><set value='69.77' color='FF0000' toolText = ' 69.77% ' name='11/11' /><set value='68.38' color='FF0000' toolText = ' 68.38% ' name='11/14' /><set value='71.50' color='FF0000' toolText = ' 71.50% ' name='11/15' /><set value='68.81' color='FF0000' toolText = ' 68.81% ' name='11/16' /><set value='68.42' color='FF0000' toolText = ' 68.42% ' name='11/17' /><set value='65.75' color='FF0000' toolText = ' 65.75% ' name='11/18' /><set value='68.89' color='FF0000' toolText = ' 68.89% ' name='11/21' /><set value='72.31' color='FF0000' toolText = ' 72.31% ' name='11/22' /><set value='74.91' color='FF0000' toolText = ' 74.91% ' name='11/23' /><set value='73.32' color='FF0000' toolText = ' 73.32% ' name='11/25' /><set value='75.40' color='FF0000' toolText = ' 75.40% ' name='11/28' /><set value='70.70' color='FF0000' toolText = ' 70.70% ' name='11/29' /><set value='75.27' color='FF0000' toolText = ' 75.27% ' name='11/30' /><trendlines> <line startValue='90' color='993366' displayValue='90%' showOnTop='1' valueOnRight='1'/> </trendlines><styles><definition> <style name='mySubCaptionFont' type='font' font='Tahoma' size='9' bold='0'/> <style name='myShadow' type='shadow' color='5E1F4C' angle='45' /> <style name='mySCShadow' type='shadow' color='000000' angle='45' /> <style name='chartCaption' type='font' font='Arial' size='11' color='000000'/> <style name='axisNLabels' type='font' font='Arial' size='10' color='000000'/></definition><application> <apply toObject='Caption' styles='myShadow'/> <apply toObject='Caption' styles='chartCaption'/> <apply toObject='DataLabels' styles='axisNLabels'/> <apply toObject='SubCaption' styles='mySubCaptionFont'/> <apply toObject='SubCaption' styles='mySCShadow'/></application></styles></chart>〈=EN&scaleMode=noScale&chartWidth=366&debugMode=0"> <param name="wMode" value="opaque"> <param name="allowScriptAccess" value="always"> <param name="quality" value="best"> <param name="scaleMode" value="noScale"> <embed src="../_FusionCharts/Column3D.swf" pluginspage="[url="http://www.macromedia.com/go/getflashplayer"]http://www.macromedia.com/go/getflashplayer[/url]" width="366" type="application/x-shockwave-flash" wMode="opaque" id="Efficiency" scaleMode="noScale" quality="best" flashvars="&registerWithJS=1&chartHeight=250&DOMId=Efficiency&dataXML=<chart palette='2' caption='Productivity' baseFontColor='000000' showCanvasBg='0' showValues='0' chartNoDataText='Coming Soon!' legendNumColumns='2' forceYAxisValueDecimals='1' forceYAxisValueDecimals='1' yAxisValueDecimals='0' decimals='0' exportEnabled='1' exportAtClient='0' exportAction='download' exportHandler='../CPD/FCExporter.aspx' exportFormats='JPG=Export as JPEG' exportFileName='Productivity-12-1-2011_9-02-59_AM' subCaption='KPI Production Time ÷ Production Time' exportDialogColor='e1f5ff' exportDialogBorderColor='0372ab' YAxisMinValue='62.4607721732812' exportDialogFontColor='0372ab' exportDialogPBColor='0372ab' ><set value='71.46' color='FF0000' toolText = ' 71.46% ' name='11/1' /><set value='71.13' color='FF0000' toolText = ' 71.13% ' name='11/2' /><set value='68.13' color='FF0000' toolText = ' 68.13% ' name='11/3' /><set value='66.35' color='FF0000' toolText = ' 66.35% ' name='11/4' /><set value='70.50' color='FF0000' toolText = ' 70.50% ' name='11/7' /><set value='68.24' color='FF0000' toolText = ' 68.24% ' name='11/8' /><set value='69.89' color='FF0000' toolText = ' 69.89% ' name='11/9' /><set value='69.39' color='FF0000' toolText = ' 69.39% ' name='11/10' /><set value='69.77' color='FF0000' toolText = ' 69.77% ' name='11/11' /><set value='68.38' color='FF0000' toolText = ' 68.38% ' name='11/14' /><set value='71.50' color='FF0000' toolText = ' 71.50% ' name='11/15' /><set value='68.81' color='FF0000' toolText = ' 68.81% ' name='11/16' /><set value='68.42' color='FF0000' toolText = ' 68.42% ' name='11/17' /><set value='65.75' color='FF0000' toolText = ' 65.75% ' name='11/18' /><set value='68.89' color='FF0000' toolText = ' 68.89% ' name='11/21' /><set value='72.31' color='FF0000' toolText = ' 72.31% ' name='11/22' /><set value='74.91' color='FF0000' toolText = ' 74.91% ' name='11/23' /><set value='73.32' color='FF0000' toolText = ' 73.32% ' name='11/25' /><set value='75.40' color='FF0000' toolText = ' 75.40% ' name='11/28' /><set value='70.70' color='FF0000' toolText = ' 70.70% ' name='11/29' /><set value='75.27' color='FF0000' toolText = ' 75.27% ' name='11/30' /><trendlines> <line startValue='90' color='993366' displayValue='90%' showOnTop='1' valueOnRight='1'/> </trendlines><styles><definition> <style name='mySubCaptionFont' type='font' font='Tahoma' size='9' bold='0'/> <style name='myShadow' type='shadow' color='5E1F4C' angle='45' /> <style name='mySCShadow' type='shadow' color='000000' angle='45' /> <style name='chartCaption' type='font' font='Arial' size='11' color='000000'/> <style name='axisNLabels' type='font' font='Arial' size='10' color='000000'/></definition><application> <apply toObject='Caption' styles='myShadow'/> <apply toObject='Caption' styles='chartCaption'/> <apply toObject='DataLabels' styles='axisNLabels'/> <apply toObject='SubCaption' styles='mySubCaptionFont'/> <apply toObject='SubCaption' styles='mySCShadow'/></application></styles></chart>〈=EN&scaleMode=noScale&chartWidth=366&debugMode=0" allowScriptAccess="always" height="250" /> </object> <!-- END Code Block for Chart Efficiency -->

Thank you. I added palette='2' and achieved a grey floor which, oddly enough, is what I was looking for. Just a heads up for any one else with the same issue; you don't have to necessarily combine a palette assignment with a canvasBgColor as I used showCanvasBg='0' and achieved the same result. Thanks!