New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
charts don't show up in IE 8 #89
Comments
Bumped into this one as well ;) The excanvas is "extended" in the examples on the chartjs site ;) that is why it works on the main chartjs site on IE8. Solution: just grab the excanvas version that you get when you download the lib -> site/assets, adn use it ;) |
Hmm are you sure about that ? It doesn't seem to work for me. |
I grabbed the latest version of excanvas from the Google code project. Available here: https://code.google.com/p/explorercanvas/source/browse/trunk/excanvas.js There's a note in the docs for when using excanvas:
Let me know if this solves your issue. |
@nirre7 Thanks, you rock. I grabbed the version of excanvas that comes with Charts.js and problem solved. The version directly from excanvas project site didn't work for me. I have the graphs working in IE7 and IE8 now. I also recommend (as mentioned in Chart.js documentation) to turn off animation for browsers without native canvas support. It was really sluggish for me. You simply include Modernizr in your page and the following:
|
Can you up a test case for me to take a look at @mixandgo? It looks like possibly a CSS thing? Not too sure why the version of the excanvas library and the version they're using in their master branch are different... |
I got this problem and it's working now. |
@jowilki Thanks for the Modernizr snippet. |
I still couldn't get to work in IE8 & IE7, even tho including excanvas.js please help me. I was trying to fix it for a day already. :( thanks very much in advance. |
i have sorted that out now. It was CSS that was giving me problems. In case people might face this as well. Here is what i have done. I have the following css for responsive (bootstrap) canvas{width:100% !important;max-width: 800px;height: auto !important;} Because of that, IE7 & IE8 is not showing the canvas at all. After removing that it works now. For responsive stuffs, I am filtering with @media queries now. |
Hello, |
I had the same issue - using the excanvas.js file from the repo and NOT the google code site is what squared it away:. |
The following steps work for me:
//dynamically create the canvas element
var canvas = document.createElement('canvas');
document.getElementById("wt-today-chart").appendChild(canvas);
canvas.setAttribute("width", 690);
canvas.setAttribute("height", 200);
if (_ieUnder9Check()) {
canvas = G_vmlCanvasManager.initElement(canvas);
}
//wait for the element to be displayed to get the correct clientWidth & clientHeight (used to calculate the width, height //of the canvas, otherwise, you will not see the canvas at all
setTimeout(function() {
var myNewChart = new Chart(canvas.getContext("2d")).Bar(chartData, chartOptions);
}, 200); Hope that help! |
Following up here. If this is still an issue, may we ask for a JSBIN test case for IE. Thank you |
I was unable to get IE8 working. Canvas element Dynamically create canvas in javascript Also tried with the version of excanvas used on the flotcharts website (couldn't find excanvas bundled/used with chart.js as mentioned in these comments) |
IE8 does not support rgba() colors. However changing the above JSBins to named colors didn't fix. |
@brianlow make sure you're using the latest version of excanvas from here: https://code.google.com/p/explorercanvas/source/browse/excanvas.js rather than the latest tagged release as there have been plenty of fixes since then. |
@nnnick good point, do you know how to use the latest in JSBIN? Linking directly to the raw version on google code doesn't work. |
You can link this: https://explorercanvas.googlecode.com/git/excanvas.js |
I got this working and simplified the steps into a bower package: It works for me, hopefully it can be of use to others as well. |
Appears to be resolved, closing. Please reopen if this is not resolved. |
Not sure why excanvas straight from google (what's linked above) did not work for me, but going into the older releases for Chart.js (https://github.com/nnnick/Chart.js/releases/tag/v0.2.0) and pulling excanvas from there seems to work. BTW, awesome work, these charts are sweet! |
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 Implement Polyfills
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
Insert Canvas Object Into Div |
@bvacchiano that's great. Do you think something like that should be in the official docs? |
@etimberg - yeah definitely worth mentioning. Right now the docs just state that you can use the library anywhere that the |
@bvacchiano We'd love help with the docs on this. The docs folder has markdown files that are used to generate the doc portion of the site. Once any changes are in, I can get @nnnick to deploy them up to the site. |
@etimberg @bvacchiano Any chance you can offer a https://jsfiddle.net/ showing it working? Or perhaps confirm your fix works with the latest version of Chart.js? I've applied your fix exactly as described, along with trying several other fix suggestions, and but had no luck with anything. HELP! |
Here's a well-commented Chart.js example that works with IE8. Some code are shamelessly stolen from @bvacchiano. I noticed that only <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chart.js IE8 Demo</title>
</head>
<body>
<!-- Chart container -->
<div id="myCanvas"></div>
<!-- excanvas.js is necessary for IE8 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/excanvas.js"></script>
<!--
Use Chart.js 1.x only! IE8 support is dropped in version 2.x
1.x Documentation: https://github.com/chartjs/Chart.js/tree/v1.1.1/docs
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<script>
// Helper function for creating a usable canvas for IE8.
function createCanvas(width, height) {
// Dynamically create the canvas element
var c = document.createElement('canvas');
// Define width and height of the canvas, or else IE8 complains
c.width = width;
c.height = height;
// getContext() is not defined on canvas in IE8, so use excanvas.js to bootstrap the canvas
if (!c.getContext) {
c = G_vmlCanvasManager.initElement(c);
}
return c;
}
(function() {
var lineData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
var lineOptions = {
animation: false // Animations lags in IE8 :(
};
var elm = document.getElementById("myCanvas");
var cnvs = createCanvas(600, 450);
elm.appendChild(cnvs); // Attach canvas to the DOM
var ctx = cnvs.getContext('2d');
new Chart(ctx).Line(lineData, lineOptions);
})();
</script>
</body>
</html> Some useful links:
|
So i did everything what @bvacchiano said and i had to include some more prototypes functions. Array.prototype.reduce I'm using 2.1.2 like she did and i am assuming here... /*!
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', { I actually got it working by simply comment this and add to the controller the property 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/ Legends in bars will not apear.... but i actually do not need them. |
I get
Object doesn't suport this property or method
on this line:var ctx = sellerGraph.get(0).getContext("2d");
I have included excanvas.
The text was updated successfully, but these errors were encountered: