javascript - IE8 Crashes When Drawing LineChart -- All Other Browsers Work -

javascript - IE8 Crashes When Drawing LineChart -- All Other Browsers Work -

we've been building application using google charts api. works in of our supported browsers, ie8 causing issues. technically browser not crash, charts take long render browser thinks crashing , warns script should stopped. when allow script complete, rendering chart has taken minutes render. in chrome, ff, , ie9 charts rendered instantly. big discrepancy between browsers might indicate issue on google's end, given googling issue did not turn much way of similar issues, can't help think handling incorrectly on our end.

the next method using generate chart , hanging @ chart.draw call.

function drawchart(data) { var options = { title: 'occupancy , volume history', isstacked: true, colors: ['#0066ff', '#53cf53', '#e0440e', '#e6693e', '#ff9900', '#009933'], haxis: { format: 'mm/dd/yyyy hh:mm:ss a', gridlines: { color: 'transparent' } }, vaxis: { viewwindow: { min: number('0'), max: number('0.96') }, gridlines: { color: 'transparent'} }, pointsize: 5, series: { 4: { pointsize: 0 }, 5: { pointsize: 0 } } }; var chart = new google.visualization.linechart(document.getelementbyid("chart_div")); google.visualization.events.addlistener(chart, 'error', function (e) { console.log(e.message); }); chart.draw(data, options); }

the info beingness retrieved , processed so:

$.post(<path data>, function (data) { // format date actual date object $.each(data.rows, function (i, row) { data.rows[i].c[0].v = new date(row.c[0].v); }); drawchart(data); });

a sample of info beingness built server-side , passed above method can found here. before info passed method, date strings converted javascript date objects. other info left is.

in our html we're preventing ie compatibility mode , we've verified browser respecting , rendering in ie8 mode, we're using html5 doctype (ie: doctype html), , we're using bare html element start document.

if farther info needed, i'm happy give it.

edit: info beingness used malformed. link sample data has been modified link new corrected format still presents same issues.

edit 2: arraytodatatable no longer beingness used after fixing info structure.

edit 3: added retrieval , processing of info prior calling drawchart().

first, should not utilize string-to-date conversion date objects provide. function inconsistent across browsers, , same browser, users in different locales parse date strings differently. example:

new date('06-08-2014')

might parse june 8, 2014 user in us, august 6, 2014 user in europe.

you should manually parse date strings appropriately. assume illustration date strings in format 'm/d/yyyy hh:mm:ss a'. parse date string this:

$.each(data.rows, function (i, row) { var match = row.c[0].v.match(/(\d{1,2})\/(\d{1,2})\/(\d{4}) (\d{2}):(\d{2}):(\d{2}) (..)/); var year = parseint(match[3], 10); var month = parseint(match[1], 10) - 1; // adjust javascript's 0-indexed months var day = parseint(match[2], 10); var hours = parseint(match[4], 10) + (match[7] == 'am' ? 0 : 12); // adjust hours am/pm var minutes = parseint(match[5], 10); var seconds = parseint(match[6], 10); row.c[0].v = new date(year, month, day, hours, minutes, seconds); });

when pass data drawchart, still raw object, not proper datatable. need convert datatable object either before passing drawchart or in drawchart function:

var datatable = new google.visualization.datatable(data);

also, should adjust server code output numbers numbers, not strings (eg, "0" should 0).

example: http://jsfiddle.net/asgallant/a2unj/

javascript internet-explorer-8 google-visualization