PDA

View Full Version : Stacked Bar Chart label on each field?



bapt
29 Jan 2015, 8:36 AM
Hello, is it possible to add a label on each field for all rows of a Stacked Bar Chart (http://docs.sencha.com/extjs/4.2.1/#!/example/charts/StackedBar.html) like the Pie Chart (http://docs.sencha.com/extjs/4.2.1/#!/example/charts/Pie.html)? I have tried adding a label in "series" array but it only shows one label on the first field of a row. If it's not possible with ExtJS library, I could do it natively in SVG using JavaScript DOM APIs. Thanks.

joel.watson
31 Jan 2015, 8:27 AM
Hello, is it possible to add a label on each field for all rows of a Stacked Bar Chart (http://docs.sencha.com/extjs/4.2.1/#!/example/charts/StackedBar.html) like the Pie Chart (http://docs.sencha.com/extjs/4.2.1/#!/example/charts/Pie.html)? I have tried adding a label in "series" array but it only shows one label on the first field of a row. If it's not possible with ExtJS library, I could do it natively in SVG using JavaScript DOM APIs. Thanks.

Hi bapt--

Yes, it's definitely possible. You need to configure your label with all the fields that will be displayed. Please see the example Fiddle below.

I hope this helps--thanks!
Joel

hee

bapt
3 Feb 2015, 1:39 AM
Thank you, I didn't pay attention to this part of the label documentation, indeed the field can take a string or an array of strings. Now it almost works but some values are not displayed because the field is too small and the value seems too high, see my Fiddle https://fiddle.sencha.com/#fiddle/hic (it works if you divide value by 100 like in the line I've commented). I have noticed that the Fiddle is missing labels on 2 fields but when I'm working on localhost with ExtJS 4.2.1 GPL too, it's only missing a label on 1 field (Brand1 and not Brand2).

hic

By the way, I want to have the chart with 100% as maximum value in y axis, so I used a Model and the convert function. In the labels, I do not want to display the percentage but another value that I have in a JsonStore. In the label renderer, I used this code (in variableName_data, I stored the real value of variableName percentage):

storeItem.get(item.yField + "_data")
Maybe you know a better way to display another value from the Store?

Edit: in fact, I can do this without the label renderer by using directly the fields I want:

field: ['expediees_data', 'preparees_data', 'reste_data']

joel.watson
3 Feb 2015, 7:20 AM
Interesting, I'm not sure what's going on. When I modify the chart that I posted to return the raw value, all of the labels render, even if the text is too big to be contained by the segment. You might check your data to make sure that it is being converted correctly.

Thanks!
Joel

bapt
3 Feb 2015, 8:37 AM
I've checked my data and everything is ok, the percentage data is good and the real data that I want to display in the label is good too. I've tried your Fiddle and returned the raw value in labels like you said, this works. But if you try to return the raw value multiplied by 10 for example, the problem will appear in your chart too if you remove a filter: a label value will be missing. This is what happens on my Fiddle, the label values are greater (real data) than the axes values (percentage data) and it is normal in my case. Could it be a bug of the ExtJS library and is there a workaround? Thanks.

joel.watson
5 Feb 2015, 7:51 AM
Ok, I see what you're saying. Yes, this is a bug and looks like it has been resolved in 4.2.2+.

Thanks
Joel

bapt
5 Feb 2015, 10:20 AM
Thanks for confirming, I see updates 4.2.2 and 4.2.3 are not open source but commercial only. It would have been appreciated if bug fixes where available with GPL license too so everyone can have a better experience of Ext JS and Sencha Fiddle would not fail.