Need A Shaded Area In The Charts

[premk]

Hi,

 

I am looking out for a feature wherein I can shade a region in the chart to signify some importance (like, say the shaded region signifies some recession period), you can see what I mean through the attached image.

Can you let me know if that is possible and any samples to do it. Please find the attached image for more information.

Thanks

-Prem

[Guest Bindhu]

Hi Prem,

 

Thank you for the post

 

If you are using Scatter, Bubble or Zoom Line chart, then you can use vertical trend lines to apply shades.

These charts supports vertical trend lines, which run through the height of the chart. The vertical trend lines are otherwise similar to horizontal trend lines.

 

For more details on 'Attributes for Trend Lines & Zones', please refer to the link below,

http://docs.fusioncharts.com/charts/contents/AttDesc/Trend.html

 

If you are using any other chart type then the shading can be obtained by using the "canvasBgRatio" and the "canvasBgColor" attributes of the chart appropriately.

Ref. Code:

<chart canvasBgRatio="0,27.5,0.1,26.4,0,8.5,0,40" canvasBgColor="FF0000,FF0000,FFFFFF,FFFFFF,FF0000,FF0000,FFFFFF,FFFFFF" ...></chart>

 

For more details on 'Attributes for Chart Canvas', please refer to the link below,

http://docs.fusioncharts.com/charts/contents/AttDesc/Canvas.html

 

Please find attached screenshot of the chart rendered with the above settings.

 

Hope this helps

Edited March 13, 2012 by Bindhu

[premk]

Hi Bindu,

 

Thanks for your reply.

 

1) Can I make the Trend Line or Trend Zone to be painted in vertical direction (as I had shown in my attachment). I see all the Trend Line examples rendering the line horizontally. Can you provide me an example Fusion XML.

2) In the second approach, I am unable to understand on how to draw a strip(shaded area) on a particular point on a Chart like say year 2010 - 2012 or a series of months within a year. I would appreciate if you can send me a detailed XML and help me to understand it.

I tried my best to understand from canvasBgRatio="0,27.5,0.1,26.4,0,8.5,0,40" canvasBgColor="FF0000,FF0000,FFFFFF,FFFFFF,FF0000,FF0000,FFFFFF,FFFFFF", no luck.

 

Thanks a lot.

 

Regards,

Prem

 

 

[Guest Bindhu]

Hi Prem,

 

Thank you for the post.

 

1) Can I make the Trend Line or Trend Zone to be painted in vertical direction (as I had shown in my attachment). I see all the Trend Line examples rendering the line horizontally. Can you provide me an example Fusion XML.

>> Like I had mentioned in my earlier post, vertical trend lines are supported only by the Scatter, Bubble or Zoom Line chart.

Ref. Code:

<vTrendlines>
<line startIndex='5' endIndex='10'  displayValue='PR'/>
</vTrendlines>

 

For more details on 'Vertical Trend-lines and vertical Trend-zones', please refer to the link below,

http://docs.fusionch...S/ZoomLine.html

 

See section 'Vertical Trend-lines and vertical Trend-zones'.

 

2) In the second approach, I am unable to understand on how to draw a strip(shaded area) on a particular point on a Chart like say year 2010 - 2012 or a series of months within a year. I would appreciate if you can send me a detailed XML and help me to understand it.

>> No worries

 

The "canvasBgColor" attribute can be used to fill the canvas as gradient, you need to define two (or more) colors separated by comma. Use hex code of colors without specifying #.

The "canvasBgRatio" attribute is used to specify the ratio of each color in the gradient on a scale of 100. The total ratios specified as this attribute should sum up to 100. For example, if you want to plot an equidistant gradient for 2 colors, specify "canvasbgRatio" as "0,100".

 

Ref. Code:

<chart canvasBgColor='FFFFFF,FF5904' canvasBgRatio='10,90' ../>

 

With the above settings applied, chart as shown in "Capture1090.PNG" is obtained.

 

<chart canvasBgColor='FFFFFF,FF5904' canvasBgRatio='50,50' ../>

 

With the above settings applied, chart as shown in "Capture5050.PNG" is obtained.

 

<chart canvasBgColor='FFFFFF,FF5904' canvasBgRatio='70,30' ../>

 

With the above settings applied, chart as shown in "Capture7030.PNG" is obtained.

 

Hope this helps !