CODEWITHSUNDEEP
twitter-bootstrap-3kendo-dataviz
Paul
Paul

Reputation: 3283

Kendo chart not resizing within Twitter Bootstrap

Please see here

When the browser is resized, the Google Map and the grid are correctly resized. I want the Google map to always take up 100% of the page height.

I want the grid to take 70% and the chart to take up the rest.

However, the chart is not being resized vertically. Its as if there is a hard coded height somewhere

This is not the same kind of problem that other people have had where the chart does not resize at all, because if you make the browser wider and narrower the chart does resize horizontally

I call the code below when the window is loaded and when the window is resized

 $(window).resize(function() {
            resizeGrid();

            var chart = $("#kendoChart").data("kendoChart");
            //to check the chart exist or not if exist then redraw it..
            if (chart) {
                chart.redraw();
            }

        });

Also when the window is loaded

 $(document).ready(function() { 
            

            var chart = $("#kendoChart").data("kendoChart");
            //to check the chart exist or not if exist then redraw it..
            if (chart) {
                chart.redraw();
            }
}

I have tried changing the height of the associated CSS class to varying percentages and nothing changes the height of the chart

As you can see from the markup below, I have no hard coded height here

<div id="chartContainer" class="chartContainer" >
                @(Html.Kendo().Chart<IMeterProfileData>()
                      .Name("kendoChart")
                      .PlotArea(plotArea =>
                          plotArea.Margin(0)
                      )
                      .Legend(legend => legend
                          .Visible(false)
                      )
                      .AutoBind(false)
                      .Series(series => { series.Column(model => model.Consumption, categoryExpression: model => model.PeriodDateTime).Name("Consumption"); })
                      .CategoryAxis(axis => axis
                          .Date()
                          .BaseUnit(ChartAxisBaseUnit.Minutes).BaseUnitStep(30)
                          .Labels(label => label.Step(48).Rotation(-90).Format("dd/MM/yyyy"))
                          .Axis.MajorGridLines.Visible = false
                      )
                      .ValueAxis(axis => axis.Numeric()
                          .Labels(labels => labels.Format("{0:N0}"))
                          .Line(line => line.Visible(false))
                          .Title("Consumption kWh")
                      )
                      .Tooltip(tooltip => tooltip
                          .Visible(true)
                          .Format("{0:N0}")
                      ).ChartArea(area => area.Border(1, "#cdcdcd", ChartDashType.Solid)
                      )    )
            </div>

Has anyone ever come across this?

Paul

Upvotes: 0

Views: 1319

Answers (1)

Emil
Emil

Reputation: 7256

To quote the developers,

"The size of the Chart can be set initially either in the configuration or by specifying the size on the parent element. For example:

$("#chart").kendoChart({
    chartArea: {
        width: 200,
        height: 200
    },
    ....

If you wish to change the size dynamically, you should also repaint the Chart by using the refresh or redraw methods after the change."

I'm unsure whether this supports percentage heights, only trying will tell. You'll probably have to calculate the height in JS whenever the page size changes if you want a dynamic page that fits the window.

Upvotes: 2

Related Questions