CODEWITHSUNDEEP
javascriptinternet-explorer-8telerikkendo-uitelerik-charting
Raphael Lima
Raphael Lima

Reputation: 179

KendoUI Bar chart not working in IE8

I have a page with 3 charts from kendo ui, and only one its not loading in IE8, the chart that im having problem is the bar chart with this configuration:

$(elementName).kendoChart({
    seriesDefaults: {
        type: "column",
        stack: stacked,
        opacity: 1.0
    },
    legend: {
        visible: true,
        position: "bottom"
    },
    series: dataSeries,
    categoryAxis: {
        categories: [CARREGADO,TENTATIVAS,ATENDIDO,CPC,BOLETOS ENVIADOS,BOLETOS PAGOS],
        labels: {
            visible: true,
            font: ".85em, Verdana, Helvetica, Sans-Serif",
            rotation: 0
        }
    },
    valueAxis: {
        visible: true,
        max: 1,
        min: 0,
        labels: {
            visible: true
        }
    },
    tooltip: {
        visible: true,
        template: "#= series.name #: #: (value * 100).toFixed (2) + '%' #"
    },
    chartArea: {
        background: "transparent"
    }
});

NOTE: This is a method so all the configurarion came from parameters, i tried to put the valus but if i've forgotten something important, please ask on the comments that ill update the question.

Exception:

Unhandled exception at line 26, column 30453 in ../js/kendo.all.min.js

0x80070057 - JavaScript runtime error: Invalid argument.

Upvotes: 2

Views: 1077

Answers (2)

Łukasƨ Fronczyk
Łukasƨ Fronczyk

Reputation: 457

I was fighting with Kendo UI and IE8 for the last few hours. I made it to the same point as Raphael, and a few minutes ago finally I found a real cause of the "Invalid argument" exception. On IE8 you can't give just label's font size, you have to give a font name too. I was also having a problem with the unit ("em"), when I used px and a font name then suddenly all Kendo UI charts started to work like a charm.

Upvotes: 1

Marcello Grechi Lins
Marcello Grechi Lins

Reputation: 3410

WoW ! It took me a while to figure it out and debug it, but the problem is actually quite simple.

categoryAxis: {
    categories: [CARREGADO,TENTATIVAS,ATENDIDO,CPC,BOLETOS ENVIADOS,BOLETOS PAGOS],
    labels: {
        visible: true,
        font: ".85em, Verdana, Helvetica, Sans-Serif",
        rotation: 0
    }

Just remove the comma right after ".85em" and you are good to go.

Upvotes: 1

Related Questions