IE8 and Charts JS

A little more than half of users on the internet use IE. Of those who use IE, 23% use IE8. And less than 5% use IE6 and IE7 combined. For the most part, IE8 is still supported and something that has to be taken into account for when making a website.

Charts JS is a great HTML5 chart that can be used for free and adapted to your environment. Charts JS looks great, is very customizable, and is easy to use. It has great support from the community on its GitHub page. Additionally, you can change all of the colors, put them in drag/drop scripts, and use different types of charts (pie, line, bar, radar, polar..)! It works with IE8 if you add in excanvas.js (the correct version of it!).

In your HTML, you should add:

In the JavaScript, you need to refer to this body class and see if it exists. It will only show up if the browser being used is IE8. You can test this out really well using the IE8 developer tools (F12 when on browser, go to emulation, go to Document mode, and change to "8" in the dropdown menu).

var ieeight = $("body").hasClass("ieeight");
var $canvas = $('.canvas.' + this.props.result.ChartName);
var canvas = $canvas[0];

if(ieeight) {
    canvas = G_vmlCanvasManager.initElement(canvas);
    animationBrowser = false;
}

In order to get this to work properly, I had to add the following JavaScript files to the project:

• chart.js
• excanvas.js
• HTML5Shiv.js

One thing I learned is that if you were to update the chart (for ex. to change dates for the data) you must destroy the old chart first, otherwise you will have a "glitchy" feel when you mouseover and both charts compete to display.

if (this.currentChart) this.currentChart.destroy();

Also, there is a great way to display only some of the x axis values if you follow this edit and implement showXLabels into your script:

if (this.currentChart) this.currentChart.destroy();

You can also force all of the x-axis labels to be horizontal instead of angled (great if your chart has a small space to fit into). The angled x axis labels use a cosine angle to push the label from horizontal to vertical. And when they are vertical, they take up more space and push the chart into becoming smaller (if your chart is constrained into a small space). I did this by taking out the while statement here and making it always false, but you can just comment this out too in Charts.js.

// while ((this.xLabelWidth > xGridWidth && this.xLabelRotation === 0) || (this.xLabelWidth > xGridWidth && this.xLabelRotation <= 90 && this.xLabelRotation > 0)) {
                while (1 === 2) {
                    cosRotation = Math.cos(toRadians(this.xLabelRotation));

                    firstRotated = cosRotation * firstWidth;
                    lastRotated = cosRotation * lastWidth;

                    // We're right aligning the text now.
                    if (firstRotated + this.fontSize / 2 > this.yLabelWidth + 8) {
                        this.xScalePaddingLeft = firstRotated + this.fontSize / 2;
                    }
                    this.xScalePaddingRight = this.fontSize / 2;


                    this.xLabelRotation++;
                    this.xLabelWidth = cosRotation * originalLabelWidth;

                }

And lastly, if you have too many data points.. your chart will select too many points at once causing the labels above the data points to overlap and become illegible. I have posted a temporary solution for that HERE. If you have about a year's worth of data in less than 1000px of width, you will likely need to do something like this solution to improve usability.

Overall, I would like to say thanks to the maker of Charts JS, you did a great job. The community has been extremely helpful with working though making it even better! I highly recommend using it!