Adjusting Pie chart with labels to display on mobile devices

[Ron]

Hi,

We are using a pie chart in our mobile app. While the chart itself looks great, once we add labels to it the result does not fit to the mobile screen. This is obvious since we have long labels.

So we tried to set the chartArea width to be smaller, hoping that by this the pie itself will be smaller and more space will be available to the series labels. However as we found out, changing the width resulted with the labels being truncated according to the allocated space. We looked for an attribute to set the overflow of the labels so it will not be hidden but did not find such. We also tried to change the rendered svg overflow from hidden to visible but again it did not work and the labels remain truncated.

An example of our trial is available in the following dojo: http://dojo.telerik.com/OTOlu/2

Even though you can see it in "Web", the problem will be better understood when setting the dojo platform to "iOS 7".

Can you advise us how we can get the labels completely visible in this case?

 

Thanks,

 

Ron.

 

[Iliana Dyankova]

Hi Ron,

Kendo UI Pie Chart will not resize automatically to accommodate for the labels size. What I would suggest in order to avoid the labels cutting is to set series.padding dynamically (via the chart.options): 

// get reference to the chart widget
var chart = $("#chart").data("kendoChart");
// set series.padding via the chart options
chart.options.series[0].padding = 100
// redraw the chart
chart.redraw();

or adjust the distance to the labels: 

// get reference to the chart widget
var chart = $("#chart").data("kendoChart");
// set series.labels.distance via the chart options
chart.options.series[0].labels.distance = 10
// redraw the chart
chart.redraw();

Also, you may consider splitting the labels text into multiple lines (using \n in the template).

Regards,
Iliana Nikolova
Telerik

 

 

[Ron]

Thanks Iliana,

We investigated the chart following your suggestions and decided not to use the series labels when targeting mobile devices. In all the trials using them really created usability issues with the chart.

The 'solution' we found was using legend beneath the chart. This is more suitable for mobile devices. However we now have the following issue:

Our app displays text in right-to-left order.

The legend colored shape is places to the left of the text. How can we place it to be on the other side? 

For example, in a sample dojo described below - the first legend text is "Asia Long Label" and we have a green square to the left side of this text. How can we set this green square to be on the right side instead?

 

See example:
 http://dojo.telerik.com/OTOlu/4

[Iliana Dyankova]

Hi Ron,

Currently RTL support is available in Kendo UI Web only and is not supported for the widgets. What I would suggest in order to achieve the expected result is using legend.item.visual (online demo).  

Regards,
Iliana Nikolova
Telerik

 

 

[Ron]

Iliana thanks.

 

This is getting us very close. Using some of the samples from the documentation, we came with the following - the marker is displayed to the right of the text, as needed, but the series names are not picked up, they all show as "undefined" - this is strange as this is basically the code used in plenty of your examples, we just reordered the layout:

 

item: {


                    visual: function (e) {

                           var color = e.options.markers.background;
                           var labelColor = e.options.labels.color;
                           var rect = new kendo.geometry.Rect([0, 0], [100, 50]);
                           var layout = new kendo.drawing.Layout(rect, {
                                spacing: 5,
                                alignItems: "center"
                           });


                           var marker = new kendo.drawing.Path({
                              fill: {
                                     color: color
                              }
                           }).moveTo(10, 0).lineTo(10, 10).lineTo(0, 10).lineTo(0, 0).close();


                           var label = new kendo.drawing.Text(e.series.name, [0, 0], {
                                 fill: {
                                      color: labelColor
                                 }
                           });


                           layout.append(label, marker);
                           layout.reflow()

                           return layout;
                       }


                  } // item  ​

[Ron]

You can see the undefined issue with the following Dojo: http://dojo.telerik.com/OTOlu/11

 

(Had issues creating it earlier).

[Iliana Dyankova]

Hi Ron,

Thank you for the runnable example. This issue is caused by in Kendo UI Pie chart is only one series. To achieve the expected you should manually go through the points in this series. For your convenience here is the modified example which demonstrates a possible implementation.

Regards,
Iliana Nikolova
Telerik

 

 

[Ron]

Hi Iliana,

We now have the following issue - using this layout the category labels are not positioned well. Please have a look at the following dojo:  http://dojo.telerik.com/UkUqA

Is there a way to position the category labels centered above the bar, as in the attached illustrating image?

Thanks,

Ron.

[Ron]

Oops, sorry, wrong thread, please ignore, I will post it again in the correct place.

 

Should be in:

 

http://www.telerik.com/forums/is-there-an-option-for-a-chart-that-looks-like-a-centered-stacked-bar​

[Ron]

Thanks Iliana,

This post actually belongs in this thread ;) 

 We now successfully print the series names and managed to draw the square to the right side of the text. We are almost there :-)

We try to have it all right aligned. We managed to do so by setting justifyContent to "end" as can be seen in the following dojo (based on kendo example): http://dojo.telerik.com/OtuXe

However when we try to use it also with our code it does not have any effect. Can you please have a look at the following dojo and let us know what is it we are missing? We simply try to have the legend right aligned:http://dojo.telerik.com/eWaBe

Thanks,

Ron.

[Iliana Dyankova]

Hi Ron,

In order to achieve this you could draw an additional path which keeps the width of the longest item. For your I modified the dojo.

Regards,
Iliana Nikolova
Telerik

 

 

[Ron]

Thanks Iliana!

It looks great :-)

One last question as we try to make this chart perfect. Using the labels template (before the item visual implementation) we could easily print in the label both the category and its percentage by using template as in:
    template: "#= dataItem.category # - #= kendo.format('{0:P}', percentage) #"

Now that we use the item visual - can we still make use of the template? We did not manage to use it in the last dojo you sent us. We know that we can add calculation in the visual function to calculate the total and each item percentage but wonder if there is a simple way to do it with the template.

Regards

Ron.

[Iliana Dyankova]

Hi Ron,

The visual option will override the template - you should manually calculate the percentages in the visual function.

Regards,
Iliana Nikolova
Telerik

 

 

[Ron]

Thanks,

 

We appreciate all the help you offered on this subject.

 

Ron.