MS Spline Area chart color problems

[AppRiver]

I'm using the Multi-Series Spline Area chart in several places, and initially had just two datasets each with their own color. I just realized that one one of the charts I could add a third dataset with a new color, but once I do this it seems to alter the colors of the other datasets!

 

 

 

See the attached image to get a better idea of what I mean. The image shows the same chart twice; once with 2 datasets and again with 3 datasets. Notice how much lighter the red and green areas are.

 

 

 

The only reason this is an issue is that I will be displaying 2 charts near each other with different numbers of datasets - and this "bug" makes it look like the colors do not match.

 

 

 

In case you want to do any tests, the colors used are:78bcbb, ed6161, and 862b2b

[Guest Rajroop]

Hello

 

 

 

Could you please add plotGradientColor='' to your <chart> element and try again?

 

 

 

You can also specify gradient of each data plot individually by using the plotFillRatio attribute, if you so wish.

 

(Ref: http://www.fusioncharts.com/pcdocs/Contents/ChartSS/SplineArea.html)

 

 

 

I hope this helps.

[AppRiver]

Thanks for the suggestions but neither of those seemed to help my issue. No matter what I do, adding a third <dataset>item alters the colors of the other two <dataset>'s. Below is my entire XML sheet, please help if you can!

 

 

<chart

 

anchorRadius="3"

 

areaBorderColor="AFAFAF"

 

bgColor="FFFFFF"

 

canvasBaseColor="FEFEFE"

 

canvasBgColor="FFFFFF"

 

canvasBorderColor="CCCCCC"

 

canvasBorderThickness="1"

 

chartBottomMargin="5"

 

chartLeftMargin="5"

 

chartRightMargin="8"

 

chartTopMargin="5"

 

divLineColor="999999"

 

hovercapbg="FFFFFF"

 

labelStep="1"

 

legendBorderColor="CCCCCC"

 

legendMarkerCircle="1"

 

legendPadding="0"

 

legendShadow="0"

 

lineThickness="1"

 

plotBorderAlpha="60"

 

plotBorderColor="CCCCCC"

 

plotBorderThickness="2"

 

plotFillAlpha="80"

 

plotFillRatio="0"

 

plotGradientColor="FFFFFF"

 

rotateNames="1"

 

slantLabels="1"

 

showAreaBorder="1"

 

showBorder="0"

 

showFCMenuItem="0"

 

showLegend="1"

 

showvalues="0"

 

useRoundEdges="1"

 

numDivLines="5"

 

numVDivLines="10"

 

vDivLineAlpha="20"

 

vDivLineDashGap="5"

 

vDivLineDashLen="2"

 

vDivLineIsDashed="1"

 

yAxisMaxValue="100"

 

yAxisMinValue="1000"

 

>

 

<styles>

 

<definition>

 

<style name="myShadow" type="shadow" angle="0" distance="0" blurX="8" blurY="8" />

 

</definition>

 

<application>

 

<apply toObject="Canvas" styles="myShadow" />

 

</application>

 

</styles>

 

 

 

<categories>

 

<category label="Jul '08" />

 

<category label="Aug '08" />

 

<category label="Sep '08" />

 

</categories>

 

 

 

<dataset SeriesName='Total Mail' color='78bcbb'>

 

<set value='579' />

 

<set value='711' />

 

<set value='675' />

 

</dataset>

 

 

 

<dataset SeriesName='Spam' color='ed6161'>

 

<set value='519' />

 

<set value='663' />

 

<set value='627' />

 

</dataset>

 

 

 

<dataset SeriesName='Virus' color='862b2b'>

 

<set value='219' />

 

<set value='363' />

 

<set value='327' />

 

</dataset>

 

</chart>

 

 

 

I tried to post the XML code, but the forum kept throwing .NET failure errors and the it would actually render my XML nodes as HTML tags on the forum. Please look into this! I'm already a bit frustrated with your product, plus the fact that support is on a forum, then add to it that I can't even report my issues properly without encountering errors.

 

 

 

I actually had to MANUALLY html encode all the ">" and "<" symbols because this forum cannot do it properly without bombing out! And no, using the [ code ] tags did not help.[/color]

Edited August 17, 2009 by Guest

[Guest Rajroop]

Hello,

Any inconvinience caused is deeply regreted.

The gradient color of the data sets are so mis-matched because the latest entry to the Multi-series Spine Chart defines the color gradient for the other data sets. This has been done in order to have a good visual effect.

In reference to your query, there is a work around for this.

If I'm not mistaken, then you have two charts: two data sets in one and three data sets in the other.

What you'll have to do is that input the third data set in the first chart, the one with two data sets, and add alpha='0' like so:

<dataset SeriesName='Virus' color='862b2b' alpha='0'>

By doing this, you'll basically be hiding the latest data set input in the first chart and thereby you can match the colors of the data sets of the two charts.

Attached is the XML of the two charts.

P.s. Please try IE while pasting your code on this forum. It has no problems in rendering XML nodes as HTML tags on the forum.

ChartNO1.txt

ChartNO2.txt

[AppRiver]

That's quite the workaround for the problem, but I suppose that would work. Thanks.

 

 

 

I was really just hoping for a way to just make it use the colors that I tell it to instead of determining what it best for me. Perhaps this would be a setting that could be added in a future version of the chart?

[Guest Rajroop]

Hello,

I completely understand your point.

Your suggestions are very important to us. We've made a note of it and put it on our wishlist.

Happy FusionCharting.

[Guest Angie]

Dear User,

 

We are delighted to announce that PowerCharts is now ready for your iPads and iPhones too. We have just released PowerCharts v3.2. Starting v3.2, PowerCharts has HighCharts embedded within it, and offers both Flash and JavaScript (HTML5) charting . The Flash charts are displayed on a majority of devices and the JavaScript charts on devices that do not support Flash, all of it without writing a line of code.

 

Automatic rendering of JavaScript charts on devices (like iPad and iPhone) where Flash player is not supported.

 

5 new chart types:

 

Heat Map Chart

 

Box and Whisker Chart

 

Step Line Chart

 

Error Line Chart

 

Error Scatter Chart

 

 

* Support for JSON data format.

 

* Support for LinkedCharts, where a single data source controls multiple charts.

 

* Interactive legends in charts allow selective showing/hiding of data series.

 

* Legends now support icons for each data series.

 

* Better management of labels on charts.

 

* Labels now have an auto rendering mode to prevent them from overlapping, the chart selects the best display mode depending on the length of the labels and the width of the chart.

 

* Long labels are truncated, with ellipses appended to the truncated end of each label, and a tooltip bearing the completed label text is displayed when the user hovers over a truncated label.

 

* Support for line breaks and wrapping in all text elements including: caption, sub caption, X-axis title, Y-axis title, Labels and tooltips.

 

* In Line charts, data values can now be positioned either above or below the dataplots. Automatic positioning of data values is also supported.

 

* In Step-line charts dataplots can be joined using vertical lines.

 

* Custom alignment of caption and sub caption using STYLES.

 

* Advanced print management using JavaScript.

 

* Additional options for efficient event handling using JavaScript.

 

* Support for dynamic update of chart properties using JavaScript(barring select scatter and drag charts).

 

* Charts now support % based sizes along with dynamic resizing (barring select scatter and drag charts).

 

 

Learn more about everything new in PowerCharts v3.2 at : http:/ www.fusioncharts.com/PowerCharts/

 

We would love to hear from you at: http://www.fusioncharts.com/contact/