Responsive issue in KendoGraph

3 posts, 0 answers
  1. developer
    developer avatar
    58 posts
    Member since:
    Nov 2015

    Posted 07 Jan Link to this post

    I'm using Kendo Pie Chart to render a pie chart in the DOM.Below is the code that has been used..

         function showOnPie(data) {
                    var total = [];
                    var count = 0;
                    for (var i = 0, tot = data.roundGraph.length; i < tot; i++) {
                        count += data.roundGraph[i].total;
                    }
                    for (var j = 0, totem = data.roundGraph.length; j < totem; j++) {
                        total.push([data.roundGraph[j].name, (data.roundGraph[j].total / count) * 100, data.roundGraph[j].id])
                    }
                    $scope.pieChartOptions = {
                        title: {
                            position: "bottom",
                            text: "Share of Internet Population Growth, 2007 - 2012"
                        },
                        legend: {
                            visible: false
                        },
                        chartArea: {
                            background: ""
                        },
                        seriesDefaults: {
                            labels: {
                                visible: true,
                                background: "transparent",
                                template: "#= category #: \n #= value#%"
                            }
                        },
                        series: [
                            {
                                type: "pie",
                                startAngle: 150,
                                data: [
                                    {
                                        category: "Asia",
                                        value: 53.8,
                                        color: "#9de219"
                                    }, {
                                        category: "Europe",
                                        value: 16.1,
                                        color: "#90cc38"
                                    }, {
                                        category: "Latin America",
                                        value: 11.3,
                                        color: "#068c35"
                                    }, {
                                        category: "Africa",
                                        value: 9.6,
                                        color: "#006634"
                                    }, {
                                        category: "Middle East",
                                        value: 5.2,
                                        color: "#004d38"
                                    }, {
                                        category: "North America",
                                        value: 3.6,
                                        color: "#033939"
                                    }
                                ]
                            }
                        ],
                        tooltip: {
                            visible: true,
                            format: "{0}%"
                        }
                    };
                }

     

    The chart is loading fine but is not responsive in different browser window.

    As a solution I tried to refresh the chart on change in window size by doing

        $(window).resize(function () {
                    showOnPie($scope.chartdATA);
                });

    but didn't find a perfect solution for the responsiveness.

    Same goes for the bar chart where the x and y axis are hidden when the browser is minimized.Can anybody sufggest a fix for this issue.All the code has been done in AngularJs.

  2. developer
    developer avatar
    58 posts
    Member since:
    Nov 2015

    Posted 08 Jan Link to this post

    Please find this example as a referecne.

    http://dojo.telerik.com/EXAGa

     When browser window minimizes its not coming as responsive.

  3. Kendo UI is VS 2017 Ready
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 11 Jan Link to this post

    Hello,

    Kendo UI Chart won't automicatically resize when browser window is resized - you need to call kendo.resize. For more details check this help article.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top