Html Characters In Legend And Hover Text

[MartinS]

I have spent most of this afternoon trying to get my chart to show & and / in the legend text, and everytime I draw the chart, i cannot get it to display as I expect.

For the ampersand, as an example, I have a chart title which conatins an &, and also the legend text contains one too.

My solution was, prior to calling FusionCharts.RenderChartHTML, I do the following:

// if ampersand not added by code...
if (!xmlChartString.Contains("%25"))
{
   // replace ampersand with html character...
   xmlChartString = xmlChartString.Replace("%", "%25");
}

// if ampersand not added by code...
if (!xmlChartString.Contains("%26"))
{
   // replace ampersand with html character...
   xmlChartString = xmlChartString.Replace("&", "%26");
}

 

Example title text of 'Some text 5&6 Summer' displays correctly as 'Some text 5&6 Summer'

In the Xml that is rendered, the & has been converted to 5%266, which translates to 5&6 as expected.

 

Example series name text is 'P&L expense (New)', which displays in both the legend and the hover text as 'P%26L expense (New)'. The underlying xml is showing 'P%2526L+expense+(New)'.

 

I also have an example where my the series name text is 'Gains/losses', yet that displays as 'Gains%2flosses' in the legend and hover text, and 'Gains%252flosses' in the xml.

 

Can you tell me how I can ensure that the text is consistent in all aspects of the chart. This has become an urgent issue now and would be good to find a resolution quickly.

 

Many thanks

 

Martin

Edited July 14, 2011 by MartinS

[Guest Angshu]

Hi,

 

Thanks for your post.

 

If you are using renderChartHTML(), you would need to encode the special characters.

 

In case you are using renderChart(), you would not need to encode the special characters, provided you are using FusionCharts v 3.2.

 

If the problem persists, please send us a scaled down sample to look into the issue.

 

Awaiting for your response.

[MartinS]

Hi

 

Yes, as I stated above, we are using renderChartHTML to generate the chart Xml. I assume I am already encoding the special characters?

 

What is the difference when switching to renderChart?

 

Currently the output from RenderChartHTML is loaded into a literal control and displayed - will this still work with renderChart?

 

Here are the parameters i am using in RenderChartHTML:

 

fullPathSwf = "/CustomControls/ResultsGraphPanel/Charts/MSColumn2D.swf",

string.Empty,

xmlChartString = see below,

"MyFusion_Chart",

"650",

"350",

false,

true,

true)

 

This is the code it generates:

<!-- START Code Block for Chart FusionChart_Chart -->
<object  id="FusionChart_Chart" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="350" width="650" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" >
<param name="movie" value="/CustomControls/ResultsGraphPanel/Charts/MSColumn2D.swf">
<param name="FlashVars" value="&registerWithJS=1&chartHeight=350&DOMId=FusionChart_Chart&dataXML=<chart animation='1' bgAlpha='0,0' showBorder='0' useRoundEdges='1' setAdaptiveYMin='1' numberScaleValue='1000,1000,1000' numberScaleUnit='K,M,B' caption='LGPT 2010 Base (23) 5%266 0.5' xAxisName='' yAxisName='' anchorAlpha='01' anchorBgAlpha='01' showValues='0' showLegend='1' legendBorderAlpha='0' legendBgAlpha='0' legendPosition='Bottom' legendShadow='0' labelDisplay='Wrap' decimals='2'  forceDecimals='1'  exportEnabled='1'  exportAtClient='1'  exportHandler='fcExporter'  exportFileName='15072011_LGPT2010Base235605_Chart' toolTipBgColor='FFFFFF'toolTipBorderColor='FFFFFF'><categories><category label='2011'/><category label='2012'/><category label='2013'/><category label='2014'/><category label='2015'/><category label='2016'/><category label='2017'/><category label='2018'/><category label='2019'/><category label='2020'/></categories><dataset seriesName='Net+benefit+expense++(IAS19+2008)' alpha='100' includeInLegend='1' color='5074D1' showValues='0' ><set value='-1966.42' tooltext='Net+benefit+expense++(IAS19+2008), -1966.42' link='j-SetClickedGraphDataId-ctl00_MainContent_hidClickedGraphDataStore,ctl00_MainContent_btnDrillDownHandler,0,0' /><set value='-2159.43' tooltext='Net+benefit+expense++(IAS19+2008), -2159.43' link='j-SetClickedGraphDataId-ctl00_MainContent_hidClickedGraphDataStore,ctl00_MainContent_btnDrillDownHandler,0,1' /><set value='-1099.64' tooltext='Net+benefit+expense++(IAS19+2008), -1099.64' link='j-SetClickedGraphDataId-ctl00_MainContent_hidClickedGraphDataStore,ctl00_MainContent_btnDrillDownHandler,0,2' /><set value='-1192.66' tooltext='Net+benefit+expense++(IAS19+2008), -1192.66' link='j-SetClickedGraphDataId-ctl00_MainContent_hidClickedGraphDataStore,ctl00_MainContent_btnDrillDownHandler,0,3' /><set value='-1296.61' tooltext='Net+benefit+expense++(IAS19+2008), -1296.61' link='j-SetClickedGraphDataId-ctl00_MainContent_hidClickedGraphDataStore,ctl00_MainContent_btnDrillDownHandler,0,4' /><set value='-1412.54' tooltext='Net+benefit+expense++(IAS19+2008), -1412.54' link='j-SetClickedGraphDataId-ctl00_MainContent_hidClickedGraphDataStore,ctl00_MainContent_btnDrillDownHandler,0,5' /><set value='-1541.56' tooltext='Net+benefit+expense++(IAS19+2008), -1541.56' link='j-SetClickedGraphDataId-ctl00_MainContent_hidClickedGraphDataStore,ctl00_MainContent_btnDrillDownHandler,0,6' /><set value='-1684.92' tooltext='Net+benefit+expense++(IAS19+2008), -1684.92' link='j-SetClickedGraphDataId-ctl00_MainContent_hidClickedGraphDataStore,ctl00_MainContent_btnDrillDownHandler,0,7' /><set value='-1843.95' tooltext='Net+benefit+expense++(IAS19+2008), -1843.95' link='j-SetClickedGraphDataId-ctl00_MainContent_hidClickedGraphDataStore,ctl00_MainContent_btnDrillDownHandler,0,8' /><set value='-2020.09' tooltext='Net+benefit+expense++(IAS19+2008), -2020.09' link='j-SetClickedGraphDataId-ctl00_MainContent_hidClickedGraphDataStore,ctl00_MainContent_btnDrillDownHandler,0,9' /></dataset><styles><definition><style name='myCaptionFont' type='font' font='Arial' size='16' color='000000' /><style name='myXAxisTitlesFont' type='font' font='Arial' size='13' color='000000' bold='0' /><style name='myYAxisTitlesFont' type='font' font='Arial' size='13' color='000000' bold='0' /><style name='myYAxisValuesFont' type='font' font='Arial' color='000000' bold='0' /><style name='myDataLabelsFont' type='font' font='Arial' color='000000' bold='0' /><style name='myDataValuesFont' type='font' font='Arial' color='000000' bold='0' /><style name='myToolTipFont' type='font' font='Arial' color='000000' bold='0' /></definition><application><apply toObject='CAPTION' styles='myCaptionFont' /><apply toObject='XAXISNAME' styles='myXAxisTitlesFont' /><apply toObject='YAXISNAME' styles='myYAxisTitlesFont' /><apply toObject='YAXISVALUES' styles='myYAxisValuesFont' /><apply toObject='DATALABELS' styles='myDataLabelsFont' /><apply toObject='DATAVALUES' styles='myDataValuesFont' /><apply toObject='TOOLTIP' styles='myToolTipFont' /></application></styles></chart>〈=EN&scaleMode=noScale&chartWidth=650&debugMode=0">
<param name="wMode" value="transparent">
<param name="allowScriptAccess" value="always">
<param name="quality" value="best">
<param name="scaleMode" value="noScale">
<embed  src="/CustomControls/ResultsGraphPanel/Charts/MSColumn2D.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" width="650" type="application/x-shockwave-flash" wMode="transparent" id="FusionChart_Chart" scaleMode="noScale" quality="best" flashvars="&registerWithJS=1&chartHeight=350&DOMId=FusionChart_Chart&dataXML=<chart animation='1' bgAlpha='0,0' showBorder='0' useRoundEdges='1' setAdaptiveYMin='1' numberScaleValue='1000,1000,1000' numberScaleUnit='K,M,B' caption='LGPT 2010 Base (23) 5%266 0.5' xAxisName='' yAxisName='' anchorAlpha='01' anchorBgAlpha='01' showValues='0' showLegend='1' legendBorderAlpha='0' legendBgAlpha='0' legendPosition='Bottom' legendShadow='0' labelDisplay='Wrap' decimals='2'  forceDecimals='1'  exportEnabled='1'  exportAtClient='1'  exportHandler='fcExporter'  exportFileName='15072011_LGPT2010Base235605_Chart' toolTipBgColor='FFFFFF'toolTipBorderColor='FFFFFF'><categories><category label='2011'/><category label='2012'/><category label='2013'/><category label='2014'/><category label='2015'/><category label='2016'/><category label='2017'/><category label='2018'/><category label='2019'/><category label='2020'/></categories><dataset seriesName='Net+benefit+expense++(IAS19+2008)' alpha='100' includeInLegend='1' color='5074D1' showValues='0' ><set value='-1966.42' tooltext='Net+benefit+expense++(IAS19+2008), -1966.42' link='j-SetClickedGraphDataId-ctl00_MainContent_hidClickedGraphDataStore,ctl00_MainContent_btnDrillDownHandler,0,0' /><set value='-2159.43' tooltext='Net+benefit+expense++(IAS19+2008), -2159.43' link='j-SetClickedGraphDataId-ctl00_MainContent_hidClickedGraphDataStore,ctl00_MainContent_btnDrillDownHandler,0,1' /><set value='-1099.64' tooltext='Net+benefit+expense++(IAS19+2008), -1099.64' link='j-SetClickedGraphDataId-ctl00_MainContent_hidClickedGraphDataStore,ctl00_MainContent_btnDrillDownHandler,0,2' /><set value='-1192.66' tooltext='Net+benefit+expense++(IAS19+2008), -1192.66' link='j-SetClickedGraphDataId-ctl00_MainContent_hidClickedGraphDataStore,ctl00_MainContent_btnDrillDownHandler,0,3' /><set value='-1296.61' tooltext='Net+benefit+expense++(IAS19+2008), -1296.61' link='j-SetClickedGraphDataId-ctl00_MainContent_hidClickedGraphDataStore,ctl00_MainContent_btnDrillDownHandler,0,4' /><set value='-1412.54' tooltext='Net+benefit+expense++(IAS19+2008), -1412.54' link='j-SetClickedGraphDataId-ctl00_MainContent_hidClickedGraphDataStore,ctl00_MainContent_btnDrillDownHandler,0,5' /><set value='-1541.56' tooltext='Net+benefit+expense++(IAS19+2008), -1541.56' link='j-SetClickedGraphDataId-ctl00_MainContent_hidClickedGraphDataStore,ctl00_MainContent_btnDrillDownHandler,0,6' /><set value='-1684.92' tooltext='Net+benefit+expense++(IAS19+2008), -1684.92' link='j-SetClickedGraphDataId-ctl00_MainContent_hidClickedGraphDataStore,ctl00_MainContent_btnDrillDownHandler,0,7' /><set value='-1843.95' tooltext='Net+benefit+expense++(IAS19+2008), -1843.95' link='j-SetClickedGraphDataId-ctl00_MainContent_hidClickedGraphDataStore,ctl00_MainContent_btnDrillDownHandler,0,8' /><set value='-2020.09' tooltext='Net+benefit+expense++(IAS19+2008), -2020.09' link='j-SetClickedGraphDataId-ctl00_MainContent_hidClickedGraphDataStore,ctl00_MainContent_btnDrillDownHandler,0,9' /></dataset><styles><definition><style name='myCaptionFont' type='font' font='Arial' size='16' color='000000' /><style name='myXAxisTitlesFont' type='font' font='Arial' size='13' color='000000' bold='0' /><style name='myYAxisTitlesFont' type='font' font='Arial' size='13' color='000000' bold='0' /><style name='myYAxisValuesFont' type='font' font='Arial' color='000000' bold='0' /><style name='myDataLabelsFont' type='font' font='Arial' color='000000' bold='0' /><style name='myDataValuesFont' type='font' font='Arial' color='000000' bold='0' /><style name='myToolTipFont' type='font' font='Arial' color='000000' bold='0' /></definition><application><apply toObject='CAPTION' styles='myCaptionFont' /><apply toObject='XAXISNAME' styles='myXAxisTitlesFont' /><apply toObject='YAXISNAME' styles='myYAxisTitlesFont' /><apply toObject='YAXISVALUES' styles='myYAxisValuesFont' /><apply toObject='DATALABELS' styles='myDataLabelsFont' /><apply toObject='DATAVALUES' styles='myDataValuesFont' /><apply toObject='TOOLTIP' styles='myToolTipFont' /></application></styles></chart>〈=EN&scaleMode=noScale&chartWidth=650&debugMode=0" allowScriptAccess="always" height="350" />
</object>
<!-- END Code Block for Chart FusionChart_Chart -->

 

If you need anything else, please shout.

 

Martin

 

Hi,

 

Thanks for your post.

 

If you are using renderChartHTML(), you would need to encode the special characters.

 

In case you are using renderChart(), you would not need to encode the special characters, provided you are using FusionCharts v 3.2.

 

If the problem persists, please send us a scaled down sample to look into the issue.

 

Awaiting for your response.

Edited July 15, 2011 by MartinS

[MartinS]

Not an ideal solution, but as I cannot wait for a response as the work is extremely urgent, I have implemented the following:

// get xml for chart...
string xmlFusion = FusionCharts.RenderChartHTML(
fullPathSwf = "/CustomControls/ResultsGraphPanel/Charts/MSColumn2D.swf",
string.Empty,
xmlChartString,
"MyFusion_Chart",
"650",
"350",
false,
true,
true);

// strip out any odd character implementations...
xmlFusion = xmlFusion.Replace("%2525", "%25");
xmlFusion = xmlFusion.Replace("%2526", "%26");
xmlFusion = xmlFusion.Replace("%252f", "%2f");

 

If I'm missing something that avoids me having to do this, then please let me know.

 

Martin

[Sanjukta]

Hi,

 

Please note that as of now, due to the use of <object> embed method ("RenderChartHTML" method) used by you, there are limitations in the use of certain characters (namely, percentage, ampersand, quot, apostrophe, less than and greater than sign) which breaks down/can break down the implementation.

 

Here is a sample caption where things will work: Ex:

<chart ... caption='%25 %26 %26lt; %26gt; %26apos; %26quot;My Name Tom%26quot; %26apos; %26gt; %26lt; %26 %25' ... >

 

Please note that the first 5 characters are specially embedded and these need to be passed exactly in this way.

Documentation reference: http://www.fusioncha...unctuation.html

 

Let me also give you small notes on why %, &,<, >, ', " will not work in your mode of implementation which we call HTML Embedding method (http://www.fusioncha.../HtmlEmbed.html) and data is passed as Data String method (http://www.fusioncha...html#datastring).

 

In this method the data and other chart settings are passed value of as FlashVars as shown in the sample scaled down FlashVars below:

FlashVars="chartWidth=540&chartHeight=440&dataXML=<chart caption='My caption'><set value='100'/></chart>&debugMode=0"

 

This breaks down the FlashVars into these variables names and values:

[chartWidth] = 540
[chartHeight] = 440
[dataXML] = <chart caption='My caption'><set value='100'/></chart>
[debugMode] = 0

 

You would need to use %26 and not & or & because as you can see that the variables chartWidth, chartHeight, dataXML, debugMode are passed here in QueryString format where & acts as the separator of the variable name-value pairs. Hence, the presence of any & (& or & - which gets converted to & after passing) in the will break the XML as well as the the whole implementation as that & will be parsed by Flash Player as a separator of queryestring variables.

 

FlashVars="chartWidth=540&chartHeight=440&dataXML=<chart caption='My &caption'><set value='100'/></chart>&debugMode=0"

 

will be parsed as these QueryString variables names and values:

[chartWidth] = 540
[chartHeight] = 440
[dataXML] = <chart caption='My
[caption'><set value] = '100'/></chart>
[debugMode] = 0

 

You cannot use &/" as these are auto converted to ' or " and since the XML contains attributes values encapsulated by either ' or ", these values will break and then the resultant XML would be invalid.

 

FlashVars="chartWidth=540&chartHeight=440&dataXML=<chart caption='My & caption'><set value='100'/></chart>&debugMode=0"

 

This will form the XML as:

<chart caption='My 'caption'><set value='100'/></chart>

which is invalid as per XML validation.

 

If you put

FlashVars="chartWidth=540&chartHeight=440&dataXML=<chart caption='My " caption'><set value='100'/></chart>&debugMode=0"

 

This is likely to break the FlashVars attribute altogether:

FlashVars="chartWidth=540&chartHeight=440&dataXML=<chart caption='My "
caption'><set value='100'/></chart>&debugMode=0"

 

You cannot use < /> as these gets converted to < or > which will break the XML as these are invalid characters for XML.

 

In the "RenderChart" method, the special characters are internally handled and you do not need to explicitly URL encode them since FusionCharts v3.2.

 

Hope this clarifies your query.

[MartinS]

Thanks.

 

So are you saying that the approach I have taken is not the best one and I would be better using a different method? If so, I am a little confused as to how I should change my code to use RenderChart? I did try that, but it gave me different output, which I guess means that it will not work with a literal control? I'd like to know what changes I need to make to work with the RenderChart method?

 

Thanks again

Martin