I'm using Google Chart for my application and I have to convert the generated chart to image byte code. I've done this in Firefox and Chrome but IE8 is not responding to get the svg element, So now I can't to get the byte code from the given div element. My script to convert div element to byte code is given below
function getElement() {
for (var i = 0; i < divelement.length; i++) {
toImg(document.getElementById(divelement[i]), i, medicalconditionid[i]);
}
}
function toImg(chartContainer, i, id) {
var field = document.createElement("input");
field.type = "hidden";
field.id = "img_code" + i;
field.name = "imgcode";
document.getElementById("dynamicText").appendChild(field);
document.getElementById('img_code' + i).value = id + "_" + getImgData(chartContainer);
i++;
}
function getImgData(chartContainer) {
var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
var svg = chartArea.innerHTML;
var doc = chartContainer.ownerDocument;
var canvas = doc.createElement('canvas');
canvas.setAttribute('width', chartArea.offsetWidth);
canvas.setAttribute('height', chartArea.offsetHeight);
canvas.setAttribute(
'style',
'position: absolute; ' +
'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
doc.body.appendChild(canvas);
canvg(canvas, svg);
var imgData = canvas.toDataURL("image/png");
canvas.parentNode.removeChild(canvas);
return imgData;
}
I'm getting a Line: 85
Error: 'getElementsByTagName(...).0.parentNode' is null or not an object
error in IE8.
I found in IE8 there is no support for svg or canvas element, so the javascript charting libraries like google charts, D3 and jqplot convert the charts to vml format so we cant to get the byte code as like above code. In my application google chart can produce image format charts that is deprecated but i used this image chart and send the image url to action class and convert the url to image. Refer this link for google image charts