This is a migrated thread and some comments may be shown as answers.

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

14 Answers 63 Views
Charts
This is a migrated thread and some comments may be shown as answers.
GLENN
Top achievements
Rank 1
GLENN asked on 01 Mar 2013, 03:31 PM
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


14 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 01 Mar 2013, 07:31 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
GLENN
Top achievements
Rank 1
answered on 04 Mar 2013, 07:42 AM
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
0
GLENN
Top achievements
Rank 1
answered on 04 Mar 2013, 08:37 AM
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
0
Iliana Nikolova
Telerik team
answered on 06 Mar 2013, 11:26 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Doug
Top achievements
Rank 1
answered on 11 Mar 2013, 08:50 PM
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 #")
            )
    )
0
Iliana Nikolova
Telerik team
answered on 13 Mar 2013, 07:17 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Doug
Top achievements
Rank 1
answered on 13 Mar 2013, 08:33 PM
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
0
Iliana Nikolova
Telerik team
answered on 14 Mar 2013, 04:24 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Doug
Top achievements
Rank 1
answered on 14 Mar 2013, 04:33 PM
Thank you very much.  That worked for IE and Chrome.
I hope it works for Glenn too.

Doug
0
GLENN
Top achievements
Rank 1
answered on 18 Mar 2013, 09:38 AM
Thanks Doug/Iliana 

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

0
Peggy
Top achievements
Rank 1
answered on 07 Apr 2015, 02:13 PM
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?
0
Iliana Nikolova
Telerik team
answered on 09 Apr 2015, 06:24 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Peggy
Top achievements
Rank 1
answered on 09 Apr 2015, 12:32 PM

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!

0
Iliana Nikolova
Telerik team
answered on 10 Apr 2015, 10:48 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
GLENN
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
GLENN
Top achievements
Rank 1
Doug
Top achievements
Rank 1
Peggy
Top achievements
Rank 1
Share this question
or