ggoforth

Is It Possible For Js Charts To Wrap Long Labels?

By ggoforth, in General usage

Recommended Posts

ggoforth   

ggoforth
Posted (edited)

We have a circumstance where we might have long labels for a given row in a chart. Ideally what we would like to happen would be able to specify how many characters to allow in the label with some setting in the chart object (we use JSON chart configs) and then show the full label on hover. currently, I can get flash charts to wrap long labels, but js charts seem to ignore the setting. My chart js code looks like:

 

{
chart: {
       	caption: '',
       	xaxisname: '',
       	yaxisname: '',
           numberprefix: '',
       	enableSmartLabels: 1,
       	manageLabelOverflow: 1
},
categories: [...], //row names
dataset: [...] 
}

 

If limiting the label to some predefined length isn't possible, I would at least like to get the flash and js charts to behave the same, as we would prefer to use JS charts but can't get them to handle labels properly. Attached are two screenshots, one of a flash chart, and the same chart rendered in with javascript. Any ideas on this? Any setting I'm unaware of to limit the label length, but show the full label on hover? In javascript charts the hover looks just like the visible label, and there are no line breaks, so even the tooltip is mostly unreadable. Thanks for any help!

 

EDIT:

 

It may also be worth noting that when I use maxLabelWidthPercent: '35' (or something similar in the chart object, I get a javascript error. The error is:

 

n is undefined

http://localhost/s/support/fc/FusionCharts.HC.js

Line 432

post-28038-0-26105200-1335395231_thumb.png

post-28038-0-32269300-1335395240_thumb.png

Edited by ggoforth

Share this post

Link to post
Share on other sites

Guest Sumedh   

Guest Sumedh
Posted

We have a circumstance where we might have long labels for a given row in a chart. Ideally what we would like to happen would be able to specify how many characters to allow in the label with some setting in the chart object (we use JSON chart configs) and then show the full label on hover. currently, I can get flash charts to wrap long labels, but js charts seem to ignore the setting. My chart js code looks like:

 

{
chart: {
       	caption: '',
       	xaxisname: '',
       	yaxisname: '',
           numberprefix: '',
       	enableSmartLabels: 1,
       	manageLabelOverflow: 1
},
categories: [...], //row names
dataset: [...] 
}

 

If limiting the label to some predefined length isn't possible, I would at least like to get the flash and js charts to behave the same, as we would prefer to use JS charts but can't get them to handle labels properly. Attached are two screenshots, one of a flash chart, and the same chart rendered in with javascript. Any ideas on this? Any setting I'm unaware of to limit the label length, but show the full label on hover? In javascript charts the hover looks just like the visible label, and there are no line breaks, so even the tooltip is mostly unreadable. Thanks for any help!

 

EDIT:

 

It may also be worth noting that when I use maxLabelWidthPercent: '35' (or something similar in the chart object, I get a javascript error. The error is:

 

n is undefined

http://localhost/s/s...ionCharts.HC.js

Line 432

 

 

 

Hi,

 

Sincere apologies for the delay.

 

I am not able to replicate the same issue. Chart is rendering fine in JavaScript mode as well as Flash mode.

 

maxLabelWidthPercent attribute is be is working fine with the chart.

 

Refer the following configuration:

 

Ref. Code:

{

"chart": {

"caption": "Business Results 2005 v 2006",

"xaxisname": "Month",

"yaxisname": "Revenue",

"showvalues": "0",

"numberprefix": "$",

"maxlabelwidthpercent": "80"

},

"categories": [

{

"category": [

{

"label": "1 Label Management using maxLabelWidthPercent FusionCharts XT"

},

..

 

Find attached screen-shots for your reference.

post-24802-0-20473400-1337842187_thumb.png

post-24802-0-26145800-1337842213_thumb.png

Share this post

Link to post
Share on other sites

Fr33z3m4n   

Fr33z3m4n
Posted

Hi,

 

i have the same issue with maxLabelWidthPercent.

 

I get following jsonCode to render my SVG Graph.

{"chart":{"caption":"Gemeinde: Bielefeld","subcaption":"Wahlbeteiligung: 9,9% | Ausgezählt: 23 / 23 | endgültiges Ergebnis","showvalues":"1","maxLabelWidthPercent":"58","useEllipsesWhenOverflow":"1","placeValuesInside":"0","useRoundEdges":"1","shownames":"1","formatNumber":"1","formatNumberScale":"0","showCanvasBg":"0","canvasBgAlpha":"0","canvasBgColor":"0","canvasBorderColor":"0","canvasBorderThickness":"0","bgAlpha":"0","bgRatio":"100,0","showBorder":"0","canvasLeftMargin":"0","canvasRightMargin":"0","canvasTopMargin":"0","canvasBottomMargin":"0","captionPadding":"5","valuePadding":"5","chartTopMargin ":"0","chartRightMargin":"0","chartLeftMargin":"0","xAxisNamePadding":"0","yAxisNamePadding":"0","labelPadding":"5","showLegend":"0","showYAxis":"0","showFCMenuItem":"0","adjustDiv":"0","use3DLighting":"1","numDivLines":"4","divLineIsDashed":"1","decimals":"1","yAxisValueDecimals":"1","forceDecimals":"1","decimalSeparator":",","thousandSeparator":".","inThousandSeparator":",","inDecimalSeparator":".","imageSave":"0","baseFontSize":"9","showAboutMenuItem":"0","plotSpacePercent":"30","defaultAnimation":"1","animation":"1","palette":"1","labelAnglePercent":"45","zeroPlaneThickness":"1","numberSuffix":"%"},"styles":{"definition":[{"name":"myHTMLFont","type":"font","bold":"0","isHTML":"1"},{"name":"Shadow","type":"Shadow","distance":"6","angle":"45"},{"name":"fbg","type":"font","bgColor":"ffffff","isHTML":"1"},{"name":"subcaptionFont","type":"font","bold":"0","isHTML":"1"}],"application":[{"toObject":"DATALABELS","styles":"myHTMLFont"},{"toObject":"TOOLTIP","styles":"myHTMLFont"},{"toObject":"DataPlot","styles":"Shadow"},{"toObject":"DATAVALUES","styles":"fbg"},{"toObject":"SUBCAPTION","styles":"subcaptionFont"}]},"data":[{"label":"Plattform Ezidischer Bielefelder (PEB)<br /><br />","value":"7.8","DisplayValue":"<b>7.8%</b> (7,8%)","color":"FF80FF","toolText":"Plattform Ezidischer Bielefelder (PEB)<br /><br /> (7.8%) (7,8%)"},{"label":"Türkische Kultur Union<br /><br />","value":"23.9","DisplayValue":"<b>23.9%</b> (23,9%)","color":"0080FF","toolText":"Türkische Kultur Union<br /><br /> (23.9%) (23,9%)"},{"label":"Bielefeld-Kulturstadt<br /><br />","value":"7.7","DisplayValue":"<b>7.7%</b> (7,7%)","color":"80FF80","toolText":"Bielefeld-Kulturstadt<br /><br /> (7.7%) (7,7%)"},{"label":"BIELEFELDER INTERKULTURELLES BÜNDNIS (BIB)<br /><br />","value":"11.7","DisplayValue":"<b>11.7%</b> (11,7%)","color":"FFFF80","toolText":"BIELEFELDER INTERKULTURELLES BÜNDNIS (BIB)<br /><br /> (11.7%) (11,7%)"},{"label":"Türkisches Bündnis Bielefeld<br /><br />","value":"28.8","DisplayValue":"<b>28.8%</b> (28,8%)","color":"800080","toolText":"Türkisches Bündnis Bielefeld<br /><br /> (28.8%) (28,8%)"},{"label":"Dr. Petrillo, Natalia<br /><br />","value":"4.2","DisplayValue":"<b>4.2%</b> (4,2%)","color":"FF8000","toolText":"Dr. Petrillo, Natalia<br /><br /> (4.2%) (4,2%)"},{"label":"El Nouby, Omar<br /><br />","value":"0.7","DisplayValue":"<b>0.7%</b> (0,7%)","color":"008000","toolText":"El Nouby, Omar<br /><br /> (0.7%) (0,7%)"},{"label":"Türkischer Elternverein Bielefeld<br /><br />","value":"1.8","DisplayValue":"<b>1.8%</b> (1,8%)","color":"FF0080","toolText":"Türkischer Elternverein Bielefeld<br /><br /> (1.8%) (1,8%)"},{"label":"Migranten Union (MU)<br /><br />","value":"2.5","DisplayValue":"<b>2.5%</b> (2,5%)","color":"8080FF","toolText":"Migranten Union (MU)<br /><br /> (2.5%) (2,5%)"},{"label":"Saber, Mohamed<br /><br />","value":"1.3","DisplayValue":"<b>1.3%</b> (1,3%)","color":"FFFF00","toolText":"Saber, Mohamed<br /><br /> (1.3%) (1,3%)"},{"label":"LGI - Liste für Gesundheit und Integration<br /><br />","value":"5.2","DisplayValue":"<b>5.2%</b> (5,2%)","color":"808000","toolText":"LGI - Liste für Gesundheit und Integration<br /><br /> (5.2%) (5,2%)"},{"label":"Griechische Initiative<br /><br />","value":"4.6","DisplayValue":"<b>4.6%</b> (4,6%)","color":"FF8080","toolText":"Griechische Initiative<br /><br /> (4.6%) (4,6%)"}]}}

 

 

it doesnt render at Mobile Phone with JS Warning:

Zeitstempel: 10.09.2012 11:24:59

Fehler: TypeError: v is undefined

Quelldatei: http://localhost/Praesentation/trunk/templates/wrs/js/FusionCharts.HC.js

Zeile: 413

 

FusionCharts.HC.js @version fusioncharts/3.2.4-release.8565

Share this post

Link to post
Share on other sites

Fr33z3m4n   

Fr33z3m4n
Posted

Hello,

 

i now found an Solution.

 

FusionCharts.HC.js

Line: 9495

After: V = c.verticalAxisValuesPadding,

Add: v = V,

 

I dont know, how is correctly, but my graph ist rendering with maxLabelWidthPercent and useEllipsesWhenOverflow.

 

Error Reporting:

 

Error: TypeError: v is undefined

Sourcecode: http://localhost/Pra...ionCharts.HC.js

Line: 9535 (red marked)

 

ka = g.placeVerticalAxis = function (e, c, j, f, d, x, h, g, k, A) {

var u = j[P],

n = u.smartLabel,

p, v, o, s, q = 0,

g = u.marginRightExtraSpace,

y = u.marginLeftExtraSpace,

C = {}, G = {}, z = {}, B = e.plotLines,

D = e.plotBands,

da = c.verticalAxisValuesPadding,

V = c.verticalAxisValuesPadding,

v = V,

N = c.verticalAxisNamePadding,

F = c.verticalAxisNameWidth,

K = c.rotateVerticalAxisName,

Q = e.offset ? e.offset : 0,

W = 0,

X = 0,

T = 0,

U = 0,

S = 0,

R = 0,

Mb = 0,

Y, J, ga, aa, u = 2,

Mb = h ? g + 8 : y + 4,

ka = function (a, e) {

var d, f;

if (a && a.label && I(a.label.text) !== void 0) {

ga = a.label;

if (ga.style && ga.style !== J) J = ga.style, n.setStyle(J);

p = n.getOriSize(a.label.text);

f = (d = p.width) ? d + 2 : 0;

if (a.isGrid) {

if (C[e] = {

width: d,

height: p.height,

label: ga

}, U <= f) U = f, c.lYLblIdx = e

} else a.isTrend && (h && ga.textAlign === ba || ga.textAlign === L ? (G[e] = {

width: d,

height: p.height,

label: ga

}, S = fa(S, f)) : (z[e] = {

width: d,

height: p.height,

label: ga

}, R = fa(R, f)))

}

}, oa = function (a, c) {

var m, f = c ? q : q + a;

return f > 0 ? (K ? (f < v.height && (v = n.getSmartText(e.title.text, d, f)), m = v.height) : (f < v.width && (v = n.getSmartText(e.title.text, f, d)), m = v.width), e.title.text = v.text, c ? f - m + a : f - m) : (e.title.text = t, 0)

}, na = function (a, e, c) {

for (var d in a) a[d].label.x = e, a[d].label.y = c

};

Share this post

Link to post
Share on other sites

Guest Sumedh   

Guest Sumedh
Posted

Hi,

 

This has been already identified as a bug.

 

Our developers are working on this.

 

We will update you on this shortly.

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
Go To Topic Listing General usage