Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

charts don't show up in IE 8

See original GitHub issue

I get Object doesn't suport this property or method on this line:

var ctx = sellerGraph.get(0).getContext("2d");

I have included excanvas.

Issue Analytics

State:
Created 10 years ago
Comments:29 (7 by maintainers)

Top GitHub Comments

4reactions

brittanynavincommented, May 10, 2016

I know this is long closed, but I wanted to share some insight on this topic in case others needed it. I got chart.js working in IE8 and I had to do several different things to get it working.

Load the excanvas JS lib into your project <head><script type="PATHTOJSFOLDER/js/excanvas.js"></script></head> (while you’re at it make sure that the Chart.js lib is properly loaded too)

Implement Polyfills Implement 3 different polyfills for functions that are deprecated in legacy IE browsers:

Array.prototype.forEach forEach JS Page (Scroll down to Polyfill section)
Object.keys Object.keys JS Page (Scroll down to Polyfill section)
defineProperties defineProperties JS Page (Scroll down to Polyfill section)

If you don’t want to manually insert the polyfills into your project & you’re lazy like me, polyfills for these functions can be found in the Modernizr JS Library & the lib can be loaded into your project.

Manually Create The Canvas Object Here’s the jquery that I used to render the canvas element inside of a div.

    jQuery(function($) { // DOM is now ready and jQuery's $ alias sandboxed
        var ChartHelperItem = (function ChartHelper() {
            return {
                createChart: function (containerSelector) {
                    //Loads the context only after the <canvas> tags are initiated (solution for ie8-)
                    var elContainer = $('#event-chart-container').get(0);

                    // create canvas object
                    var c = document.createElement('canvas');

                    if (!c.getContext) {
                        c.width = 300; //define a width else IE8 complains
                    }

                    c.height = 450; //define a height else IE8 complains

                    // only use excanvas when necessary
                    //getContext won't be defined in IE8 so let's use excanvas to create the canvas
                    if (!c.getContext) {
                        c = G_vmlCanvasManager.initElement(c);
                    }

                    // this only works after page-reflow
                    setTimeout(function () {

                        // create ChartJS object
                        var ctx = c.getContext('2d');
                        var graphChart = new Chart(ctx, {
                            type: 'horizontalBar',   // fancy horizontal bar included in release 2.1.2 of Chart.js
                            data: {
                                labels: ["Red", "Green", "Blue"],
                                datasets: [{
                                    label: "Colors",
                                    data: [3,6,9]
                                }]
                            },
                            options: {
                                animation:false, //can't have any animations in IE8 :(
                                scales: {
                                    xAxes: [{
                                        ticks: {
                                            beginAtZero:true
                                        },
                                        stacked: true
                                    }],
                                    yAxes: [{
                                        stacked: true
                                    }]
                                },
                                maintainAspectRatio: false
                            }
                        });
                    }, 0);
                    elContainer.appendChild(c);
                },
                isInitialized: false,
                initialize: function () {
                    if (!!this.isInitialized) {
                        return;
                    }
                    this.isInitialized = true;
                    this.createChart('#event-chart-container');
                }
            };
        }());

        ChartHelperItem.initialize();
    });

Insert Canvas Object Into Div And the chart was beautifully drawn in IE8 inside of this div (note how ID is referenced in code above, this places the chart’s <canvas> element inside of the DIV): `<div id="event-chart-container">

</div>`

0reactions

WhitecastlePTcommented, Dec 28, 2016

So i did everything what @bvacchiano said and i had to include some more prototypes functions.

Array.prototype.reduce Array.prototype.map

I’m using 2.1.2 like she did and i am assuming here…

/*!

Chart.js
http://chartjs.org/
Version: 2.1.2
Copyright 2016 Nick Downie
Released under the MIT license
https://github.com/chartjs/Chart.js/blob/master/LICENSE.md */

But in line 3769: i get this error that Object.defineProperty is not defined: Because IE8 does not support this. I google it and found out that you cannot define getters and setters in non DOM objects. So you cannot define in Chart object a getter for data.

Object.defineProperty(this, ‘data’, { get: function() { return this.config.data; } });

I actually got it working by simply comment this and add to the controller the property data:

// The main controller of a chart
Chart.Controller = function(instance) {

	this.chart = instance;
	this.config = instance.config;
	this.options = this.config.options = helpers.configMerge(Chart.defaults.global,   Chart.defaults[this.config.type], this.config.options || {});
	this.id = helpers.uid();
	this.data = this.config.data; <--- ADDED THIS
	
	/*Object.defineProperty(this, 'data', {
		get: function() {
			return this.config.data;
		}
	});*/

So for future reference for people desperate to make this work in IE8 version 2.1.2 and btw i do know that you shoulnt change the API here is my environment.

Jquery 1.7 ( I know don’t ask )

Included files in this order ( Important ):

$.import_js(‘Js/moment/moment.js’); <-- Because Chart 2.x uses this btw i not using chart bundle ( important ) - http://momentjs.com/ $.import_js(‘Js/chart/excanvas.js’); ( https://github.com/arv/ExplorerCanvas ) $.import_js(‘Js/chart/ielegacyfunctions.js’); <-- Where i put the compability functions ( Costume made for this purpose only ) - heres the file -> https://drive.google.com/file/d/0BwuW9dMO692cbld2NllNdlYyZlE/view?usp=sharing $.import_js(‘Js/chart/chartjs-deps-legacy.js’); --> ( https://github.com/lynndylanhurley/chartjs-deps-legacy ) $.import_js(‘Js/chart/Chart.js’); <- 2.1.2

Legends in bars will not apear… but i actually do not need them. Tested in Chrome and IE Edge but renders in IE8