ithurlow

Questions related to chart cosmetics

Recommended Posts

Hello, I've been using FusionCartsXT for a few months now, but I'm having some issues getting some charts to a designer's spec. If possible, I'd like some help with the following questions:

 

1. In a 2D line chart, is there a way to only show a border on the X and Y axis, but not the border on the two opposite sides?

 

|_ but not --|

 

2. Is there a way to force pie chart labels to never disappear off the side of the canvas? I currently have the following set:

 

"enableSmartLabels":"1",

"manageLabelOverflow": "1",

"useEllipsesWhenOverflow": "0"

 

This works in most instances, but if there is not room under a small slice, the label will still hang off (out of view) the right edge of the canvas. I'm currently hacking it to rotate the pie 180 degrees (so the small slices are all on the left side), but that won't work for all of my data sets. 

 

3. Related to #2, can I simply declare where I would like the pie labels to sit on the graph instead?

 

4. How can I make a very plain bar chart? I can't find where these option lie:

 

I would like no division lines, just labels

A visible X axis (line all the way across the bottom)

Larger font on the labels

Larger font on the bar value

Bar value left aligned

 


 

 

Thank you for any suggestions.

Share this post


Link to post
Share on other sites
I was able to figure out these options:

I would like no division lines, just labels

Larger font on the labels
Larger font on the bar value

"divlinecolor": "FFFFFF",

"baseFontSize": "16"
Edited by ithurlow

Share this post


Link to post
Share on other sites

Hi,

 

First of all I want to suggest you to upgrade to the newer version of FusionCharts v3.4.1. Since it will help you more with the design specification.

 

As per your questions:

 

1. In a 2D line chart, is there a way to only show a border on the X and Y axis, but not the border on the two opposite sides?

>> Trying setting the attribute “showXAxisLine” :”1”  and “showYAxisLine” :”1” in the chart element of your JSON file.

 

 

2. Is there a way to force pie chart labels to never disappear off the side of the canvas? I currently have the following set:
 
"enableSmartLabels":"1",
"manageLabelOverflow": "1",
"useEllipsesWhenOverflow": "0"
 
This works in most instances, but if there is not room under a small slice, the label will still hang off (out of view) the right edge of the canvas. I'm currently hacking it to rotate the pie 180 degrees (so the small slices are all on the left side), but that won't work for all of my data sets. 
>>This has not been observed in the latest version,even if you are facing issues related to it try sending me a scaled down sample so that I can help you out properly.
 
3. Related to #2, can I simply declare where I would like the pie labels to sit on the graph instead?
>> By default, it is placed in the chart via a line. And if you wan to place it as per your wish and requirement then FusionCharts offer a feature called Annotations, which helps you to dynamically place the pie labels also.
 
4. How can I make a very plain bar chart? I can't find where these option lie:
 
I would like no division lines, just labels
A visible X axis (line all the way across the bottom)
Larger font on the labels
Larger font on the bar value
Bar value left aligned
>> Glad to know that you resolved on your own, also if you try setting the attribute "numDivLine":"0" in the chart element of your XML/JSON file then also you can remove the div lines.
A visible X-axis can be done by setting “showXAxisLine” :”1” in the chart element of you XML/JSON file.
The bar values are always right aligned. If you want left alignment of values then you can place the data values using Annotations.
 
 
 
 
Hope this helps.
Edited by Vishalika

Share this post


Link to post
Share on other sites

Hi,

 

Glad to know that most of your issues are resolved.

 

For the JSFiddle issues as stated by you I can give you suggestions written below:

 

1) No labels showing: http://jsfiddle.net/kv4j1dhh/,  try setting the attribute  "manageLabelOverflow": "0" in the chart element of your JSON/XML file. Since there is an issue related with "valuebgcolor" and "valuebordercolor" attribute when  "manageLabelOverflow": "1". We are looking into it. Meanwhile, you can follow the suggestion.

 

2) Cut off labels: http://jsfiddle.net/kv4j1dhh/1/ , it is a limitation of our component. If you want to avoid the cut off label problem try setting the attribute  "manageLabelOverflow": "1" . Refer this link: http://jsfiddle.net/vishalika/kv4j1dhh/3/

 

3) Fiddle: http://jsfiddle.net/jocda03m/ , we are able to replicate this issue from our end. Will update you soon after fixing this.

 

Hope this helps.

Share this post


Link to post
Share on other sites

Hi,

 

Any update on this issue? It would also work if there is an API hook for when the label in a bar chart spills over the side. There must be a function that decides when the labels will break their "placevaluesinside" property, correct? I checked the API docs, but I didn't see anything there.

 

I also have another question:

 

When it comes to the labels, I can use "labelStep" to skip labels, but it doesn't seem like I can do the same for the value portion. For instance, is there a way to feed daily data into a chart, but only plot Sunday data?

 

Thanks again.

Share this post


Link to post
Share on other sites

Hi,

 

For the Bar chart issue, you can set the attribute  "valueBgColor": "#0075c2" in the chart element of your XML/JSON file.

 

Refer this fiddle: http://jsfiddle.net/vishalika/yuqff5nd/1/

 

Coming to your next question, you can use the attribute "showValue" in the set element of each data value to show/hide it as per your requirement.

 

To plot only Sunday data, set showValue as '0' for other days in a week.

 

Hope this helps.

Share this post


Link to post
Share on other sites

Hi,

 

For the Bar chart issue, you can set the attribute  "valueBgColor": "#0075c2" in the chart element of your XML/JSON file.

 

Refer this fiddle: http://jsfiddle.net/vishalika/yuqff5nd/1/

 

I did discover this hack, but unfortunately, it only works with bar charts that have all of the same color bar.  I'm currently using a color palette. It also puts a box around the value on hover of the bar.

 

Is there a way to change the color of the value for each bar value? Better yet, can I force it to never ignore my rule of where to put the value?

Edited by ithurlow

Share this post


Link to post
Share on other sites
Hi,

 

To change the color for each bar value, you can try the new feature called Annotations, in FusionCharts.

 

Annotations are user-defined objects or shapes drawn on a chart. Annotations are often required to make interpretation of the chart easy for the end user.

 

For your requirement, text annotations can be used as the data values.

 


 

Refer this JSFiddle sample: http://jsfiddle.net/vishalika/97aL107o/

 

Hope this helps.

Share this post


Link to post
Share on other sites

Hi,

 

Welcome to FusionCharts Forum.

 

For the gradient colors in Stacked Bar 3D, you can try setting the attributes "useplotgradientcolor":"1" to use gradient effect.

 

Also, for changing the palette use the attribute 'paletteColors'. For e.g., `"paletteColors": "#FF0000, #0372AB, #FF5904..."`. The chart will cycle through the list of specified colors and then render the data plot accordingly. 

 

The attribute 'use3DLighting':"0"/"1"  can also be used to use advanced gradients and shadow effects to create better looking 3D charts.

 

​Hope this helps.

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