IE8 & Line Chart

[Nick]

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!

 

[Eva]

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: [phone]
Fax: [phone]
Mobile:[phone]
Email:[e-mail]

skype:oprfid.eva

www.oprfid.com

 

[Nick]

What a bummer.  Thought someone had an answer, instead it was a stupid spammer trying to sell cheap RFID cards....

[Hristo Germanov]

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

[Nick]

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.

[Hristo Germanov]

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

[Nick]

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!