Chart layout changed by itself when update series programmatically.

[Edwin Kwok]

In the attached program, when you load “Survey Local”  the charts on the left and right looks the same and this is how they should look.

 The problem is once you click on any “yes” or “no” button I programmatically update the chart by following codes near line 719

 var chart = $("#PieChart1").data("kendoChart");

                        chart.options.series[0].data = series;

                        chart.refresh();

 The chart did update but the layout changed too which should not happen and I had no idea why.

 Please Help.

 Thanks

Edwin

[Iliana Dyankova]

Hi Edwin,

The most likely reason for the problem is that the charts are initialized too early. In order to avoid this you could hook up the show event of the mobile view, which fires when a mobile View becomes visible and then create the two charts. For example: 

<div data-role="view" id="surveyLocal" data-title="Take Survey" data-show="myCharts" data-layout="mobile-view"
  data-transition="zoom">

<script>
function myCharts() {
   createPieChart("PieChart1", "This Location");
   createPieChart("PieChart2", "Target Location");
}
</script>

I hope this helps.

 

Regards,
Iliana Nikolova
the Telerik team