ww1711

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!

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 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

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 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!

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?

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 -->

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 -->

Hello - I'm looking for the XML string used to change the floor color of a 3D column chart... Thanks

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!

Hello? ...Bueller?

Hello, This may be a stretch, but I'll ask anyway: is it possible to render FusionWidgets (or fc) in a ReportViewer control on my aspx page? Thanks in advance!

Hello, What do I change in the configuration of my XML to disable the Export to PDF option in the right-click menu? Thanks!

Nevermind! I got it. exportFormats='JPG=Export as JPEG' All I wanted was JPG, so this will allow for that; if you'd like to add other formats, include the pipe "|" and add your next. Ex: exportFormats='JPG=Export as JPEG|PNG=Export as PNG' Hope someone finds this helpful!

Thanks for making my job much easier, Angie. I've been trying to figure this out for 25 minutes now!

Hello, I hope that my question can be answered in a way that will please me, and my stakeholders alike... I'm testing the export functionality in a way that I'm not sure was intended to, but I need to do it so here's my issue. I've got a page rendered with several charts on it and I want to export them all in one file. Ok, that's easy. Setup a batch export process and export them with the initiateExport() function, right? Well, that is right, but not for what I want... I want to be able to render these charts on one page within my PDF file, as opposed to a chart per page. I've set up a single page with ONE chart on it and I'm using FCExporter.vb as the exportHandler. I've gone through the code and made some change to alter the PDF that is output so that the chart is not taking up the entire page. Ok, still with me? NOW, I've got to do this with more than my one chart... My issue here is that the chart XML needs to have, say, fcBatchExporter1 as it's exportHandler, thereby taking away the .vb file! Is it possible to use a batch export routine without using the FusionChartsExportComponent.js file? But rather use the FCExporter.vb? If any more clarity is needed please comment and I will cleanup the request as much as possible. Thanks!

Hello again Angie, As stated previously, I'm not sure a screenshot will prove helpful. I'm asking how to hold onto the exported color/pixel combo strings for multiple charts upon export. I'd like to have 'x' amount of charts export and as the exported chart data is sent to the .aspx.vb export handler, I'd like to hold onto each color/pixel strings BEFORE any of the actual export processes goes through to writing the image. So, simply stated: 5 charts, export each of their color/pixel strings (I.e. 606060_100) to a function that will save all of them, so I can then work with the various strings to create my PDF/image files. Thanks again!

Ok, so I'm banging my head against my desk with this issue... What's the best way, in laymans terms, to do this? The ONLY thing I want to do is take the Request("stream") data from each chart after exporting has completed... I've tried using an aspx.vb exportHandler, I've tried creating a javascript function as stated above, and I can't seem to figure it out. Please help by providing a solution that will ONLY give me the "stream" (606060_100, etc...) data from each chart. From there, I can create the image to my liking. Thank you so much.

Great, thanks for the info. I will look into the solution and cross my fingers. Thanks!