Cannot set dimensions for a resizable donut chart

Question

I'm using kendo-ui to draw a donut chart like in this example but I want it to resize when the container div resizes.

Not trouble if you don't set size or sizeHole since it ill automatic scale to fit the div.

Now I want my donut to be thin (outter radius slight greater than inner radius).

If I try to set the size to 25 pixels the donut now don't fills all my div and wort only the sizeHole resizes.

                seriesDefaults: {
                    type: "donut",
                    size: 25,
                    ...

If I try to set the sizehole to 250 it ill no more resizes

                seriesDefaults: {
                    type: "donut",
                    sizeHole: 250,
                    ...

If I try to set both attibutes ill affect each other and at the donut don't resizes at all

What I really need is to fix the donut dimensions to some % of the container, lets say size to 50% and sizeHole to 5% and let user drag/rezise the browser and keep the size/sizeHole/Container size aspect ratio.

I tried something using

    $(window).resize(Resize(element));
    ...

    function Resize(element) {

        var minContainerSize = element[0].clientHeight;
        if (minContainerSize > element[0].clientWidth || minContainerSize == 0)
            minContainerSize = element[0].clientwidth;

        return function () {
            var chart = element.data("kendoChart");
            var pieSeries = chart.options.seriesDefaults;
            pieSeries.size = minContainerSize * 0.13;
            //pieSeries.holeSize = minContainerSize * 0.299;

            chart.refresh();
        }
    };

But it not worked out since I ill need to get the container size AFTER the resize event ends to get the new container size.

I can try to implement something like this after resize solution

but code is turning in a mess fast.

There's any nice (unknow for me) property to simple set the donut "thickness" in as percentual or proportional to the whole size (in a way it keeps resizing) or any workaroud not involving setTimeout?

score 1 · Accepted Answer · answered Jul 28 '14 at 16:58

1

I think you should be using holeSize not sizeHole.

http://www.telerik.com/forums/donut-chart-set-inner-and-outer-radius

answered Jul 28 '14 at 16:58

Rajesh TV

71
6

Good try I found that reference one month ago. Anyway that's not exactly what I want since still got problems to resize. I ended up creating a resize event for my page and propagating that for each graph where I can implement specialized resize event and keeping aspect ratios ans other stuff for pies, bars, lines, etc. Ill mark as response because that reference can help others – jean Jul 28 '14 at 21:04
Thanks Jean. I think KendoUI must do this for us out of the box. A constant holeSize just breaks responsiveness. – Rajesh TV Aug 05 '14 at 17:04

Cannot set dimensions for a resizable donut chart

1 Answers1