CODEWITHSUNDEEP
javascriptjquerykendo-ui
jean
jean

Reputation: 4350

Cannot set dimensions for a resizable donut chart

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?

Upvotes: 0

Views: 911

Answers (1)

Rajesh TV
Rajesh TV

Reputation: 71

I think you should be using holeSize not sizeHole.

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

Upvotes: 1

Related Questions