dcwebcat

Different Data Value Font Colors

Recommended Posts

Hi -

 

Is it possible to have multiple font colors for the data values? I am using a 3D Column Chart. So one data vale of 1.00 would be black, the next data value of 2.50 would be white, etc.

 

Many thanks!!! :D

Share this post


Link to post
Share on other sites
Guest Sumedh

Hi,

 

Apologies for the inconvenience.

 

You can not apply multiple font color styles to DATAVALUES object directly.

 

However, you can use following work-around to achieve the same. But this will only work for JavaScript chart.

 

You would need to apply "displayValue" attribute for the each data value along with the font style.

 

Ref. Code:

"data": [

{

"label": "Label 1",

"displayvalue": "<font style=\"color:black;\"\">1.0</font>",

"value": "1.0",

},

 

Please find attached illustration and screen-shot for your reference.

 

Hope this helps!

DataValues_Style.zip

post-24802-0-30847000-1350388543_thumb.png

Share this post


Link to post
Share on other sites

Hi,

I wanted to do the same thing using XML instead of JSON.How can I do this?

 

 

Hi,

 

Apologies for the inconvenience.

 

You can not apply multiple font color styles to DATAVALUES object directly.

 

However, you can use following work-around to achieve the same. But this will only work for JavaScript chart.

 

You would need to apply "displayValue" attribute for the each data value along with the font style.

 

Ref. Code:

"data": [

{

"label": "Label 1",

"displayvalue": "<font style=\"color:black;\"\">1.0</font>",

"value": "1.0",

},

 

Please find attached illustration and screen-shot for your reference.

 

Hope this helps!

Share this post


Link to post
Share on other sites

Hey,

 

Yes, the same can be achieve by using the following XML.

 

<chart caption="Scale in Points" subcaption="Pointers for 2012" canvasbgcolor="808080" divlinealpha="0" palette="3" yaxisname="Souls">
<set label="Label 1" displayValue="<font style="color:00008B;"">1.0<font>"  value="1.0" />
<set label="Label 2" displayValue="<font style="color:FFFFFF;"">2.0<font>" value="2.0" />
<set label="Label 3" displayValue="<font style="color:000000;"">3.0<font>" value="3.0" />
<set label="Label 4" displayValue="<font style="color:FF008B;"">4.0<font>"  value="4.0" />
</chart>

 

Hope this helps.

Share this post


Link to post
Share on other sites

Hi,

 

I am trying to change the color of my displayValue using your example with no luck. Can you help?

 

I have the isHTML set to '1' and here is the xml that I am building. I am using a java class to build the dynamic xml.

 

<set label='Nov 12' color='e6f1f6,e6f1f6' valuePosition='ABOVE' value='103.2699966430664' hoverText='On November 2012 you spent $103.27' link='P-detailsWin,width=400, height=300, toolbar=no, scrollbars=yes, resizable=yes-/view/printer_friendly.action' /> <set label='Nov 12' color='aed2e2,aed2e2' valuePosition='ABOVE' value='694.780029296875' hoverText='On November 2012 you spent $694.78' displayValue='<font style="color:FF008B;"> Current Bill \n\t $694.78</font>' link='P-detailsWin,width=400, height=300, toolbar=no, scrollbars=yes, resizable=yes-/view/printer_friendly.action' />

 

 

JavaScript

var myChart =

new FusionCharts(

{ type: 'ScrollColumn2D.swf',

id : 'myChartId',

width: '420',

height: '270',

debugMode : true }

);

myChart.setXMLData("<%=xmlString%>");

myChart.render("chartContainer");

 

Hey,

 

Yes, the same can be achieve by using the following XML.

 

<chart caption="Scale in Points" subcaption="Pointers for 2012" canvasbgcolor="808080" divlinealpha="0" palette="3" yaxisname="Souls">
<set label="Label 1" displayValue="<font style="color:00008B;"">1.0<font>"  value="1.0" />
<set label="Label 2" displayValue="<font style="color:FFFFFF;"">2.0<font>" value="2.0" />
<set label="Label 3" displayValue="<font style="color:000000;"">3.0<font>" value="3.0" />
<set label="Label 4" displayValue="<font style="color:FF008B;"">4.0<font>"  value="4.0" />
</chart>

 

Hope this helps.

Share this post


Link to post
Share on other sites

Hi Victor,

 

Applying different font color through font tag for displayValue will not work with Flash charts. However, same can be achieved using JavaScript charts.

 

Please find the modified XML and screenshot attached.

 

Hope this helps.

Capture.PNG

Data(1).xml

Share this post


Link to post
Share on other sites

I can't get the below syntax to work and none of the examples download correctly .. 

<set label="Label 1" displayValue="<font style="color:00008B;"">1.0<font>"  value="1.0" />

I need to implement this in a colum2D chart .. to vary the font colors there are only 5 quote marks on the displayValue tag.. any help would be appreciated

Share this post


Link to post
Share on other sites

Hi,

displayValue attribute is used to display a custom text instead of the numerical value of data. If you want to set the font of that custom text you can use valueFont attribute at the chart level.

Share this post


Link to post
Share on other sites

Thanks for the reply .. I need to change the color of the displayed value on the chart .. Dark for light background charts, Light for dark background charts.  Doing at the chart level will not do that .. it will be effective for the whole chart 

this thread discusses a way to change the text color for a specific chart label .. but the syntax is incorrect .. it does not work .. using the font style parameter in the set section of the XML is the way I need to do it

 

Share this post


Link to post
Share on other sites

Hi,

Thanks for replying back.

Changing the value color for a particular data plot from the data level is not possible as of now, as valueFontColor attribute can be set only at the chart level which will change the value color for all the data plots.

However, if you want to achieve your requirement you can use text annotations and position it where you want to display the text using the color of your preference.

For details regarding text annotation please check this url - http://www.fusioncharts.com/dev/advanced-chart-configurations/annotations/creating-annotations/creating-text-annotations.html

Also for further reference please check this sample fiddle - http://jsfiddle.net/8r4946Lc/

Share this post


Link to post
Share on other sites

I understand its not available and the annotation option is pretty messy as each chart varies .. I would like to understand if the font tag option outlined in this thread works and if it does what the syntax would be to make it work.  I can implement that much easier than the annotation option

I would add that as an option in a future version .. it seems that adding a font color option to the set tag would be a valuable addition to the product and many developers would like that as an option when displaying values in a chart

again .. does this work and what would the syntax be?

<set label="Label 1" displayValue="<font style="color:00008B;"">1.0<font>" value="1.0" />

Share this post


Link to post
Share on other sites

Hi,

As of now, setting the font color for a particular data plot using displayValue attribute is not available with the latest version.

The requirement can be achieved only via annotations. 

Share this post


Link to post
Share on other sites

Actually this can be achieved as below with a hash in JS charts,

<set label="Label 1" displayValue="1.0" value="1.0"  labelFontColor="#00008B" /> 

or like this,

<set label="Label 1"  value="1.0"  labelFontColor="#00008B" /> 

@version 3.11.2

Edited by BartLK

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now