IE8 & Line Chart

7 posts, 1 answers
  1. Nick
    Nick avatar
    19 posts
    Member since:
    Oct 2011

    Posted 01 Aug 2012 Link to this post

    Hello, I'm having a strange issue.  I'm using the DataViz controls (both Gauge and Chart) for a dashboard application.  Everything works great, except for 1 thing.  The Line Charts do not work in IE8 for me.  IE9 works fine, as does every other browser.  Unfortunately, many of our employees are running Windows XP and are locked out of installing 3rd party browsers, so IE8 is the defacto browser I have to get this working in.  Your source examples work fine in IE8, so I'm a bit dumbfounded.  

    I'm receiving no error in Firebug's console in Firefox, but running IE9 in IE8 Standards mode using developer tools, gives me an error of:
    SCRIPT87: Invalid argument. 
    kendo.dataviz.min.js, line 8 character 75326

    Not sure what that means...

    Anyhow, any help would be greatly appreciated.  I have attached screen captures to (possibly) aid in an answer.  I had to blur out labels that would identify our company, but it's still easy to see what's going on.  Thanks in advance for any help!


     
  2. Eva
    Eva avatar
    2 posts
    Member since:
    Jul 2012

    Posted 01 Aug 2012 Link to this post

    RFID card

    Key application

    Access control systems,

    Time attendance systems,

    Loyalty program,

    Mass transportation ticketing,

    Staff identification

    Description

    Material: PVC, PET, PET-G, ABS

    Size: 85.5x54.0mm

    Thickness: 0.82-0.92mm

    Operating temperature: -20°С to +50°С (PVC material)

    Available IC´s 125KHz, 13,56MHz, 860-960Mhz

    Protocol: ISO14443A, ISO15693, ISO18000-6C,

    ISO11784/5, EPC Class 1 GEN2

     

    OPRFID Technologies., LTD
    2-603 Room, Hong Feng Jia Yuan , 270# BeiMo Street 
    ChengXiang Putian City Fujian, P.R, China.
    Tel: (0086)594 2790031
    Fax: (0086)594 2790185
    Mobile:(0086)13599454033
    Email:oprfid.eva@oprfid.com

    skype:oprfid.eva

    www.oprfid.com

     

  3. Nick
    Nick avatar
    19 posts
    Member since:
    Oct 2011

    Posted 02 Aug 2012 Link to this post

    What a bummer.  Thought someone had an answer, instead it was a stupid spammer trying to sell cheap RFID cards....
  4. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 07 Aug 2012 Link to this post

    Hello Nick Giotta,

    Unfortunately I am not able to reproduce this issue locally. Could you please send us a simple test project(jsFiddle or jsBin for example) which reproduces the depicted issue? Thus I will be able to observe the problem and advice you further.

    Regards,
    Hristo Germanov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Nick
    Nick avatar
    19 posts
    Member since:
    Oct 2011

    Posted 08 Aug 2012 Link to this post

    I'm not sure how I would post a static sample of this.  What I can show you is the code I'm using.

    $("#availchart").kendoChart({
            theme: $(document).data("kendoSkin") || "black",
            legend: {
                position: "bottom",
                labels: {
                    font: "bold 12px Tahoma,arial,sans-serif"
                }
            },
            dataSource: {
                schema: {
                    data: "d",
                    model: {
                        fields: {
                            Avail: {
                                type: "double"
                            },
                            AvailMin: {
                                type: "double"
                            },
                            AvailMax: {
                                type: "double"
                            },
                            AvailGoal: {
                                type: "double"
                            },
                            AvailDate: {
                                type: "date"
                            }
                        }
                    }
                },
                transport: {
                    read: {
                        url: "Dashboardslider.aspx/getAvailChartData",
                        contentType: "application/json; charset=utf-8",
                        type: "POST"
                    }
                }
            },
            chartArea: {
                background: ""
            },
            series: [{
                type: "line",
                field: "Avail",
                name: "Availability",
                markers: {
                    visible: false
                },
                missingValues: "gap"
            }, {
                type: "line",
                field: "AvailMin",
                name: "Min",
                markers: {
                    visible: true
                },
                missingValues: "gap",
                color: "red",
                labels: {
                    template: "#= value #%",
                    visible: true,
                    position: "bottom"
                }
            }, {
                type: "line",
                field: "AvailMax",
                name: "Max",
                markers: {
                    visible: true
                },
                missingValues: "gap",
                color: "#b8ff00",
                labels: {
                    template: "#= value #%",
                    visible: true
                }
            }],
            categoryAxis: {
                field: "AvailDate",
                labels: {
                    rotation: -90,
                    font: "16px",
                    format: "{0:MMM dd}"
                }
            },
            valueAxis: {
                min: 90,
                max: 100,
                labels: {
                    format: "{0:N0}",
                    visible: false
                },
                majorUnit: 5,
                plotBands: [{
                    from: 96,
                    to: 100,
                    color: "#666",
                    opacity: 0.2
                }, {
                    from: 90,
                    to: 96,
                    color: "#000",
                    opacity: 0.2
                }]
            },
            tooltip: {
                visible: true,
                format: "{0}%"
            }
        });

    The json data that is coming back (pulled via FireBug) is:
    {"d":[{"Avail":"94.17","AvailMin":null,"AvailMax":null,"AvailDate":"7/25/2012","AvailGoal":"96"},{"Avail":"93.83","AvailMin":null,"AvailMax":null,"AvailDate":"7/26/2012","AvailGoal":"96"},{"Avail":"94.29","AvailMin":null,"AvailMax":null,"AvailDate":"7/27/2012","AvailGoal":"96"},{"Avail":"94.47","AvailMin":null,"AvailMax":null,"AvailDate":"7/28/2012","AvailGoal":"96"},{"Avail":"94.09","AvailMin":null,"AvailMax":null,"AvailDate":"7/29/2012","AvailGoal":"96"},{"Avail":"94.10","AvailMin":null,"AvailMax":null,"AvailDate":"7/30/2012","AvailGoal":"96"},{"Avail":"95.39","AvailMin":null,"AvailMax":null,"AvailDate":"7/31/2012","AvailGoal":"96"},{"Avail":"95.78","AvailMin":null,"AvailMax":"95.78","AvailDate":"8/1/2012","AvailGoal":"96"},{"Avail":"95.54","AvailMin":null,"AvailMax":null,"AvailDate":"8/2/2012","AvailGoal":"96"},{"Avail":"94.36","AvailMin":null,"AvailMax":null,"AvailDate":"8/3/2012","AvailGoal":"96"},{"Avail":"93.02","AvailMin":"93.02","AvailMax":null,"AvailDate":"8/4/2012","AvailGoal":"96"},{"Avail":"93.87","AvailMin":null,"AvailMax":null,"AvailDate":"8/5/2012","AvailGoal":"96"},{"Avail":"95.21","AvailMin":null,"AvailMax":null,"AvailDate":"8/6/2012","AvailGoal":"96"},{"Avail":"95.07","AvailMin":null,"AvailMax":null,"AvailDate":"8/7/2012","AvailGoal":"96"}]}

    I'm perplexed as to why the above works in all browsers (IE9 included), but IE8 and earlier only renders the chart and legend-- but no line series.

  6. Answer
    Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 09 Aug 2012 Link to this post

    Hello Nick Giotta,
    categoryAxis: {
        field: "AvailDate",
        labels: {
            rotation: -90,
            font: "16px",
            format: "{0:MMM dd}"
        }
    },

    The problem is in the invalid font of the categoryAxis's labels. Can you change it? For example you can use this:
    font: "16px Tahoma,arial,sans-serif",
    All the best,
    Hristo Germanov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Nick
    Nick avatar
    19 posts
    Member since:
    Oct 2011

    Posted 09 Aug 2012 Link to this post

    Wow.  Can't believe that was the problem..  Guess the other browsers are a bit more forgiving?  Anyhow, it would be great if there was some sort of intelligent error reporting going on so we can know what's going on.  All I got was a generic error in kendo.dataviz.min.js-- and that was only in IE8 which gives no useful info to troubleshoot.

    Thanks again!
Back to Top