Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

(kendoUI chart) Possible to reflow its size with a resizing window?

Here is the settings of the pie chart:

function createChart(chartDataSource) {
    $("#chart").kendoChart({
        theme:$(document).data("kendoSkin") || "black",
        title:{
            text:"Efficiency"
        },
        legend:{
            position:"bottom"
        },
        dataSource:chartDataSource,
        series:[
            {
                type:"pie",
                field:"val",
                categoryField:"status"
            }
        ],
        tooltip:{
            visible:true,
            template:"${category} - #= kendo.format('{0:P}', percentage)#"
        }
    });

CSS style:

#chart {
    width: 50%;
    height: 50%;
    }

I know that Highcharts has reflow boolean (reflow example in StackOverflow) did exactly what I want.

I am not sure whether kendoUI chart have the same reflow setting or I should play around with the CSS style. If go for CSS, how to make such setting?

Thanks

like image 938
sozhen Avatar asked Jul 06 '12 15:07

sozhen


1 Answers

Applying my idea in your linked post, just hook the window resize event and redraw the chart:

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

Working fiddle here.

like image 197
Mark Avatar answered Nov 15 '22 11:11

Mark