This is a migrated thread and some comments may be shown as answers.

kendoChart (type: bullet) and responsive width

3 Answers 92 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Miika
Top achievements
Rank 1
Miika asked on 23 Oct 2013, 12:28 PM
(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.

3 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 25 Oct 2013, 07:28 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Paul
Top achievements
Rank 1
answered on 15 Jul 2014, 03:23 PM
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
0
T. Tsonev
Telerik team
answered on 16 Jul 2014, 11:43 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
Miika
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Paul
Top achievements
Rank 1
Share this question
or