Questions related to chart cosmetics

[ithurlow]

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

 

Documentation referenced: http://docs.fusioncharts.com/charts/contents/ChartSS/Bar2D.html

 

 

Thank you for any suggestions.

[ithurlow]

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 October 9, 2014 by ithurlow

[Vishalika]

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.

 

Refer this documentation link: http://docs.fusioncharts.com/tutorial-attr-bar2d.html

 

Refer this link for Annotations: http://docs.fusioncharts.com/tutorial-advanced-charting-annotations.html

 

Explore the JSFiddle for configuring your charts: http://www.fusioncharts.com/developers/javascript-chart-fiddles/configuring-your-chart/

 

Hope this helps.

Edited October 10, 2014 by Vishalika

[ithurlow]

Thank you for the feedback. The upgrade solved almost all of my problems.

 

Here are a couple fiddles (forked from FC examples) that show the pie chart label issue:

No labels showing: http://jsfiddle.net/kv4j1dhh/

Cut off labels: http://jsfiddle.net/kv4j1dhh/1/

 

Thanks again.

[ithurlow]

I also found a similar bug where white labels disappear when they spill out from the end of a bar chart. Any idea how to deal with this issue?

 

Fiddle: http://jsfiddle.net/jocda03m/

[Vishalika]

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.

[ithurlow]

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.

[Vishalika]

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.

[ithurlow]

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 October 21, 2014 by ithurlow

[Vishalika]

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 link for Annotations: http://docs.fusioncharts.com/tutorial-configuring-your-chart-annotations.html

 

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

 

Hope this helps.

[surik_babu]

Hi 

 

How to changes the gradient colors in the stacked bar  3d bar.

 

Please help me how to changes  the gradient  colors or solid.

[Vishalika]

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.

[Swarnam]

Hi,

 

For the issue posted on 11 October 2014 - 04:10 AM, the issue has been fixed and resolved in our latest release,

 

Please do check out the fiddle at: http://jsfiddle.net/swarnam/kv4j1dhh/4/

 

Hope this helps.