Re-size the Kendo chart while Minimize the window of browser?

Question

In our team project we are using the KendoUI controls here issue while minimize the window chart size not decreasing.How to increase/decrease the size of chart while maximize/minimize the window of browser.?

Muthu · Accepted Answer · 2013-04-29T11:33:54.640

Try this works to me:

<div id="example">
   <div id="chart"></div>
</div>

<script>  
    // Chart Data Source
    var exampleData = [
         { "FromDept": "ACT", "ToDept": "NSW", "Year": 2010, "Total": 101 },
         { "FromDept": "ACT", "ToDept": "NSW", "Year": 2011, "Total": 1001 },
         { "FromDept": "ACT", "ToDept": "NSW", "Year": 2012, "Total": 501 },
         { "FromDept": "ACT", "ToDept": "YNT", "Year": 2010, "Total": 501 }
    ];


    // Function to create Chart
    function createChart() {

        // Creating kendo chart using exampleData
        $("#chart").kendoChart({
            title: {
                text: "Sample"
            },
            dataSource:
            {
                data: exampleData,
            },
            legend: {
                position: "bottom"
            },
            chartArea: {
                background: ""
            },
            seriesDefaults: {
                type: "line"
            },
            series: [{
                field: "Total",
            }],
            valueAxis: {
                labels: {
                    format: "${0}"
                }
            },
            categoryAxis: {
                field: "Year"
            },
            tooltip: {
                visible: true,
                format: "{0}%"
            }
        });
    }

    // Resize the chart whenever window is resized
    $(window).resize(function () {
        $("#chart svg").width(Number($(window).width()));
        $("#chart svg").height(Number($(window).height()));
        $("#chart").data("kendoChart").refresh();
    });

    // Document ready function
    $(document).ready(function () {

        // Initialize the chart with a delay to make sure
        // the initial animation is visible
        createChart();

        // Initially
        $("#chart svg").width(Number($(window).width()));
        $("#chart svg").height(Number($(window).height()));
        $("#chart").data("kendoChart").refresh();

    });
</script>

Try this it works to me both height and width.. $(window).resize(function () { $("#chart svg").width(Number($(window).width())); $("#chart svg").height(Number($(window).height())); $("#chart").data("kendoChart").refresh(); }); — Muthu, Apr 29 '13 at 10:56
Make sure all necessary kendo files are included in your page. — Muthu, Apr 29 '13 at 11:17

score 6 · Answer 2 · answered Apr 26 '13 at 11:33

6

Try this...

$(window).resize(function () {
     $("#chart svg").width(Number($('.k-content').width()));
     $("#chart svg").height(Number($('.k-content').height()));
     $("#chart").data("kendoChart").refresh();
});

answered Apr 26 '13 at 11:33

Muthu

770
5
13

You cannot use percentage in the above snippet.. because jQuery height() and width() will give pixel value – Muthu Apr 29 '13 at 10:03

CodingWithSpike · Answer 3 · 2014-02-25T03:30:46.740

5

You can attach to the resize event of the window and when it changes, reset the width option on the chart.

window.onresize = function () {
    var newWidth = window.innerWidth * .9 // 90% of screen width

    var chart = $("#chart").data("kendoChart"); // get chart widget
    chart.options.chartArea.width = newWidth; // set new width
    chart.redraw(); // redraw the chart
};

edited Feb 25 '14 at 03:30

answered Apr 26 '13 at 12:36

CodingWithSpike

42,906
18
101
138

Hi ..I tried this one but no changes are applying.The chart width is same no changes are applied to the chart width. – user2314027 Apr 29 '13 at 04:58
It might be something with your page then. Here is the above code working in a jsFiddle example: http://jsfiddle.net/rally25rs/TPy2j/1/ – CodingWithSpike Apr 29 '13 at 13:31
I made a change to my code that now calls `.redraw()` instead of `.refresh()` because redraw just does the rendering whereas refresh re-reads the data out of the DataSource, so will be a little slower. – CodingWithSpike Feb 25 '14 at 03:31

score 0 · Answer 4 · answered Jun 14 '16 at 09:58

One more point. Also you may want to disable the animation before the redraw and enable it after

$(window).resize(function () {
    $("#chart").data("kendoChart").options.transitions = false;
    $("#chart").data("kendoChart").refresh();
    $("#chart").data("kendoChart").options.transitions = true;
});

Re-size the Kendo chart while Minimize the window of browser?

4 Answers4

Linked