8

enter image description here

I have a Kendo ui chart which displays a column chart from a dynamic data source. But occassionally, the chart opens half the size of the available space. When I click on some links or change the date, it resizes itself. Any idea why its causing it?

In the datasource change event, its showing the container div's width as 0 when it shows this behaviour. I can give more details if needed

I tried the refresh method as given in one of the answers but its not of help

sony
  • 1,453
  • 3
  • 35
  • 79
  • 1
    Please make a JSfiddel or a JSbin of this problem. Also make sure that the container that the cart is in has its width set to 100%. – Jonathan Buchanan Jul 22 '14 at 16:00
  • 1
    please share more information or create jsfiddle so we can see... generally $("#chart").data("kendoChart").redraw() works fine but share your code.. – Devendra Soni Jul 24 '14 at 13:16

7 Answers7

9

This happens generally when you open a chart in a animated window before it is finished expanding.

My suggestion is to redraw the chart when you are sure everything is loaded and fully opened.

$("#myChart").data("kendoChart").redraw();

If you have not disabled animations you may want to do that before this and re-enable them after.

$("#myChart").data("kendoChart").options.transitions = false;
Jonathan Buchanan
  • 848
  • 4
  • 6
5

When you have got all the necessary data in the controller you can call a Javascript CallBack function in which you can set the transition to false and then redraw the chart and set transition to true, also you can hide the chart by default and make it visible on Javascript CallBack function

Nitin Mall
  • 462
  • 2
  • 5
2

Try this

var chart=$("#chart").data("kendoChart");
//to check the chart exist or not if exist then redraw it..
if(chart)
{
chart.redraw();
}

Thanks

Devendra Soni
  • 1,924
  • 12
  • 16
2

This is what I using for my charts:

if($("#areaChart").data("kendoChart")) {
    $("#areaChart svg").width(Number($('.k-content').width()));
    $("#areaChart svg").height(Number($('.k-content').height()));

    $("#areaChart").data("kendoChart").refresh();
}

Taken from here

Have you checked the resize() Method?

Community
  • 1
  • 1
chris
  • 4,827
  • 6
  • 35
  • 53
  • 1
    You don't want to use the .refresh() method as it will call the read transport of the chart again and then redraw. .redraw() will just re-display the current data in the dataSource of the chart. – Jonathan Buchanan Jul 24 '14 at 20:19
0

I fixed it by adding a small delay after calling the CreateChart() function as below:

CreateChart(this.id, this.id + " this week", "week", null);
    sleep(1000);

its working fine now

sony
  • 1,453
  • 3
  • 35
  • 79
0

$("#divSensingData").kendoChart({ chartArea: { width: 900, height: 500 },

user8442883
  • 1
0

i did face same problem after resize kendo chart.

$(window).resize(function () { $("#chart").data("kendoChart").refresh(); });

it's working

Md.Shajadur Rahman
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 04 '22 at 12:12