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

15 posts, 0 answers
  1. GLENN
    GLENN  avatar
    4 posts
    Member since:
    Dec 2012

    Posted 01 Mar 2013 Link to this post

    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


  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 01 Mar 2013 Link to this post

    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!
  3. GLENN
    GLENN  avatar
    4 posts
    Member since:
    Dec 2012

    Posted 04 Mar 2013 Link to this post

    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
  4. GLENN
    GLENN  avatar
    4 posts
    Member since:
    Dec 2012

    Posted 04 Mar 2013 Link to this post

    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
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 06 Mar 2013 Link to this post

    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!
  6. Doug
    Doug avatar
    6 posts
    Member since:
    Oct 2012

    Posted 11 Mar 2013 Link to this post

    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 #")
                )
        )
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 13 Mar 2013 Link to this post

    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!
  8. Doug
    Doug avatar
    6 posts
    Member since:
    Oct 2012

    Posted 13 Mar 2013 Link to this post

    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
  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 14 Mar 2013 Link to this post

    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!
  10. Doug
    Doug avatar
    6 posts
    Member since:
    Oct 2012

    Posted 14 Mar 2013 Link to this post

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

    Doug
  11. GLENN
    GLENN  avatar
    4 posts
    Member since:
    Dec 2012

    Posted 18 Mar 2013 Link to this post

    Thanks Doug/Iliana 

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

  12. Peggy
    Peggy avatar
    14 posts
    Member since:
    Mar 2013

    Posted 07 Apr 2015 Link to this post

    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?
  13. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 09 Apr 2015 Link to this post

    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!
     
  14. Peggy
    Peggy avatar
    14 posts
    Member since:
    Mar 2013

    Posted 09 Apr 2015 in reply to Iliana Nikolova Link to this post

    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!

  15. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 10 Apr 2015 Link to this post

    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!
     
Back to Top