CODEWITHSUNDEEP
javascriptkendo-ui
user2314027
user2314027

Reputation: 63

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

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.?

Upvotes: 5

Views: 7986

Answers (4)

Hossein Narimani Rad
Hossein Narimani Rad

Reputation: 32501

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;
});

Upvotes: 0

CodingWithSpike
CodingWithSpike

Reputation: 43728

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
};

Upvotes: 5

Muthu
Muthu

Reputation: 780

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>

Upvotes: 8

Muthu
Muthu

Reputation: 780

Try this... 

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

Upvotes: 6

Related Questions