Charts appear "crushed" on IE 7 thru 9 on some user machines

[GLENN]

Attached are a couple of screen shots.

One shows a chart that appears crushed.  This was taking from IE7, however, I've experienced this problem on IE9.  This doesn't affect all our IE users, just some.

It's consistent on the affected machines.

Any help appreciated.

Thanks

[Iliana Dyankova]

Hi Glenn,

Could you please check if the Chart is rendered in IE Compatibility Mode? Please have in mind that in order to get Kendo UI Chart to work correctly in such browser mode you should add the following code snippet:

<meta http-equiv="X-UA-Compatible" content="IE=edge" >

Kind regards,
Iliana Nikolova
the Telerik team

[GLENN]

Hi

This is taken from an IE9 (W7 64-bit) browser.  The browser is running in IE9 standards document mode.

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

The problem was apparent before chrome frame was installed.

I'm just about to upgrade to IE10.  I'll see if that makes a difference.

Thanks

Glenn

[GLENN]

Upgraded to IE10, the problem has disappeared unless I go all the way back to IE7 mode.

Unfortunately, quite a few of our customers are still on XP and stuck at IE8, which a user also had problems with.

Thanks

Glenn

[Iliana Dyankova]

Hi Glenn,

I am not quite sure what causes the illustrated outcome - I am not able to reproduce it on my side. Is it possible to provide your Chart's configuration? This way I would be able to investigate what is going on and advice you further. Thank you in advance.
 
Regards,
Iliana Nikolova
the Telerik team

[Doug]

You are not alone.  The charts were rendering fine in IE and they just stopped rendering as some point on my machine.  Chrome was working just great, but then they also stopped rendering.  They appear crushed in IE, and nothing renders in Chrome.  Which is what brought me here to let you know it happens to me.
It is working fine in Firefox at this time.
I do get a random slice cannot be null error.  I'm not sure if this is connected somehow to rendering the chart.

Here is some code.  The MonthEndDate is a string in the model.  I have not had any luck using Kendo charts with datetime values.  As soon as I put the .Date() in the CategoryAxis it will partially render the chart.  I'm saying that I have 6 months, and it puts dots for the datapoints on the first 3 months, and renders the lines on the last 3 months.  Sorry I don't have a screenshot of that, as sometimes it doesn't ever render.  After troubleshooting for awhile I just use strings for my categories and labels.
@(Html.Kendo().Chart<MOS_DEModels.Models.MOS_DEModel.callAtsp_RPTInventoryMonthlyInvStatsGraph_Result>()
        .Name("chartInventoryMonthlyInvStatsGraph")
    .DataSource(dataSource => dataSource
             .Read(read => read.Action("InventoryMonthlyInvStatsGraphRead", "AjaxReadAction")) // Specify the action method and controller name
    )

    .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
    )
    .ChartArea(chartArea => chartArea
        .Background("transparent")
    )
    .Series(series =>
    {

        series.Line(model => model.TotalInv);
        series.Line(model => model.AvailableInv);
        series.Line(model => model.AvgDaysInInventory);
    })
    .CategoryAxis(axis => axis
        .Categories(model => model.MonthStartDate)
    )
    .ValueAxis(axis => axis
        .Numeric().Labels(labels => labels.Format("{0}"))
    )
            .Tooltip(tooltip => tooltip
                .Visible(true)
                    .Template("#= series.name # <br> #= category #: #= value #")
            )
    )

[Iliana Dyankova]

Hi Doug,

I am not quite sure what is the reason for the problem in your application. Is it possible to send a runnable project which reproduces the issue and which I can test locally? This way I would be able to check what is going wrong and provide concrete recommendations. Please provide such a project and I will check it right away. Thank you in advance for your time.
 
Regards,
Iliana Nikolova
the Telerik team

[Doug]

I can start a brand new project, and convert to Kendo UI Project.
And using a sample from your site I can see it fail.  Again, it used to render in Chrome, and now it doesn't.
I'm using IE8 version 8.0.7601. Chrome Version 25.0.1364.152 m
The only browser it will render in is Firefox version 19.0.2.

Doug

[Iliana Dyankova]

Hi Doug,

Thank you for the provided example and pictures. 

I believe the illustrated outcome is due to a bug in the current version of Kendo UI - the Chart is not able to calculate its size. The good news is that our developers are working on it and will do their best to provide a fix as soon as possible. Please accept my apologies for the inconvenience caused.

Meanwhile, as a possible workaround you can specify explicit height to the Chart via the HtmlAttributes(). For example:

@(Html.Kendo().Chart()
  //....
  .HtmlAttributes(new { style = "height: 400px;" })
)

Regards,

Iliana Nikolova
the Telerik team

[Doug]

Thank you very much.  That worked for IE and Chrome.
I hope it works for Glenn too.

Doug

[GLENN]

Thanks Doug/Iliana 

I'll give this a go and see that happens.

[Peggy]

Hi, I just upgraded to Telerik ASP.NET MVC 2015.1.318 and am seeing the 'crushed' graphs in IE11. They look fine in Chrome, but the users mainly use IE. Is this bug back?

[Iliana Dyankova]

Hi Peggy,

We are not aware of a similar issue in Kendo UI v2015.1.318. Could you please make sure that both kendo.dataviz.min.css and kendo.dataviz.[theme].min.css are included? In case this suggestion does not help please provide an isolated runnable example which demonstrates your exact setup - this way I would be able to check what exactly is going wrong and provide concrete recommendations.

Regards,
Iliana Nikolova
Telerik

 

 

[Peggy]

I included the dataviz css files and it works now. It looks like we never included them in the past versions and the charts worked for us, maybe we were lucky?

I think I thought the kendo.common.min.css included dataviz, but must have mixed that up with the kendo.all.min.js which contains a minified version of all features provided by Kendo UI.

Anyway, thanks for the help!

[Iliana Dyankova]

Hi Peggy,

I am glad to hear everything is working fine now. Actually there is a change in the way that we set chart dimensions - in previous versions we used to render default inline height (600px) when the chart container has no set height. This was troublesome in a number of ways and we switched to default height set in the CSS styles. 

Regards,
Iliana Nikolova
Telerik