Sign in to follow this  
premk

Need A Shaded Area In The Charts

Recommended Posts

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

post-27697-0-83581800-1331564740_thumb.jpg

Share this post


Link to post
Share on other sites
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 :D

post-23884-0-92887600-1331613519_thumb.png

Edited by Bindhu

Share this post


Link to post
Share on other sites

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

 

 

Share this post


Link to post
Share on other sites
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 !

post-23884-0-40213900-1331700053_thumb.png

post-23884-0-26037100-1331700059_thumb.png

post-23884-0-61495200-1331700065_thumb.png

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
Sign in to follow this