kendoChart (type: bullet) and responsive width

[Miika]

(This was accidentally posted in the wrong forum section, so re-posting it here).


Hi there,

I have run into a bit of a problem with the kendoChart (bullet in this  particular case, but probably concerns the others too) with regard to  responsive design. The scenario I have is three columns, with two  containing textual data and the third one contains some charts. The  layout is constructed with Twitter Bootstrap.  I will set up the layout  below

<div class="row-fluid">
    <div class="span5">First text data</<div>
    <div class="span5">Second text data</div>
    <div class="span2"><div class="rq-kendoChart"  data-chartvalue1="2", data-chartvalue2="90"></div></div>
</div>

So, simple enough setup. My problem is that it appears to only be  possible to tell the chart to be a static pixel size (only accepts a number, which is then written out in the end result (svg) as  "<number>px;". Giving it a static size doesn't mesh very well with the fluid grid, so I was wondering if there is some option I have
missed where you can set a % width, or perhaps some other elegant  solutions to this problem?

I do have one way around it (event on window.resize, obtain the chart  object, hide it, set new size, show it, call chart.redraw) but it seems  very hacky and also not very efficient.

[T. Tsonev]

Hi,

Your current method of setting the container size and calling redraw is perfectly valid if not elegant.

We're addressing this for the Q3 release and all widgets will have a dedicated resize method.
This will be called automatically for widgets placed in Kendo UI container widgets.

Either way the chart layout needs to be recalculated by code otherwise it will scale like an image.

Regards,
T. Tsonev
Telerik

[Paul]

Hi there,

Regarding the above post - can I assume this has been added in the current releases? For example, I am using Twitter Bootstrap - if I put a chart inside a twitter bootstrap layout will it be responsive when the screen size changes?

We are looking at creating a user configurable interactive dashboard.

Thanks,

Paul

[T. Tsonev]

Hello,

Yes, all widgets in the current release supports dynamic resizing, but not all of them do this automatically. You might need to call kendo.resize on the affected container.
There's no special support for Bootstrap in this regard, general notes apply.

I hope this helps.

Regards,
T. Tsonev
Telerik