Google charts: Slow in IE 8 and 9, but fine in Mozilla
Can anyone spot what might be slowing IE down to a crawl in the following JS / JQUERY / JSON.
It isn't slow until a large JSON dataset is added to it, but Mozilla based broswers are fine in like for like conditions. There are no script runtime errors.
I have eliminated bad HTML as a cause, and I have added the raw JSON to the simpler interactive playground example with no negative speed effects.
Therefore, I think that it might be some JS that IE doesn't like??
Any ideas welcome.
(Here's myu JQUERY include)
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
And here's all the scripting:
// Load the Visualization API and the controls package.
google.load("visualization", "1.1", {"packages":["corechart", "controls"]});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
var barChart;
var ChartColumnsLength;
function drawDashboard() {
// Create our data table.
var data = new google.visualization.DataTable(
{
cols: [{id: '0', label: 'Geographical location', type: 'string'},
{id: '1', label: 'Total calls', type: 'number'},
{id: '2', label: 'Unique calls', type: 'number'},
{id: '3', label: 'Missed', type: 'number'},
{id: '4', label: 'Engaged', type: 'number'},
{id: '5', label: 'Unanswered', type: 'number'},
{id: '6', label: 'Average secs to pick-up', type: 'number'}],
rows: [{c:[{v: 'Unknown'}, {v: 4895}, {v: 2886}, {v: 3}, {v: 302}, {v: 305}, {v: 8.5}]},{c:[{v: 'Aberdeen'}, {v: 7}, {v: 7}, {v: 0}, {v: 0}, {v: 0}, {v: 6.6}]}
]
},
0.6
)
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(document.getElementById("dashboard_div"));
// Define category pickers
var controlPicker1 = new google.visualization.ControlWrapper({
"controlType": "CategoryFilter",
"containerId": "control1",
"options": {
"filterColumnLabel": "Geographical location",
"ui": {
"labelStacking": "horizontal",
"allowTyping": true,
"allowMultiple": true
}
}
});
var view = new google.visualization.DataView(data);
// Create a chart, passing some options
barChart = new google.visualization.ChartWrapper({
"chartTyp开发者_Go百科e": "BarChart",
"containerId": "chart_div",
"options": {
"width": "100%",
"height": "120%",
"vAxis": {title: "Geographical location"},
"hAxis": {title: "Number of calls"},
"fontSize": 14,
"chartArea": {top: 0, right: 0, bottom: 0, height:"100%", width:"70%"}
},
"view": {"columns": [0,1,2,3,4,5,6]}
});
google.visualization.events.addListener(dashboard, "ready", function() {
// Dashboard redraw, have a look at how many rows the barChart is displaying
var numRows = barChart.getDataTable().getNumberOfRows();
if(ChartColumnsLength){
var numCols = ChartColumnsLength.length-1;
}else{
var numCols = barChart.getDataTable().getNumberOfColumns()-1;
}
var expectedHeight = (numRows * (numCols * 20))+70;
if (parseInt(barChart.getOption("height"), 10) != expectedHeight) {
// Update the chart options and redraw just it
drawDiv("chart_div", expectedHeight);
barChart.setOption("height", expectedHeight);
barChart.setOption("width", "100%");
barChart.setOption("chartArea", {top: 10, right: 0, bottom: 0, height: (expectedHeight-70), width:"70%"});
barChart.draw();
}
});
// Establish dependencies, declaring that "filter" drives "barChart",
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(controlPicker1, barChart);
// Draw the dashboard.
dashboard.draw(view);
}
function drawDiv(id,h) {
var div=document.getElementById(id);
h = (h) + "px";
var w=parseInt(div.style.width);
w = ($(this).width()-200) + "px";
$(div).height(h);
$(div).width(w);
}
function listValuesCheckBox(){
var myArray = [];
var k = 1;
myArray[0]=0;
var at_least_one_checked = false;
for (var i=0; i < document.frm_obj.elements.length; i++) {
var e = document.frm_obj.elements[i];
if(e.checked == true){
at_least_one_checked = true;
myArray[k] = parseInt(e.value,10);
k = k+1;
}
}
if(at_least_one_checked == true){
return myArray;
}else{
alert("I cannot display a chart with zero bars. Please select at least one bar using the tick boxes.");
stop_script_running;
}
}
function changeChartColumns() {
// ChartColumnsLength is a global variable
ChartColumnsLength = listValuesCheckBox();
barChart.setView({"columns": ChartColumnsLength});
barChart.draw();
}
$(document).ready(function(){
$("#start_date_uk").datepicker({
changeMonth: true,
numberOfMonths: 3,
showButtonPanel: true,
showCurrentAtPos: 1,
autoSize: true,
changeYear: true,
dateFormat: "dd-mm-yy",
defaultDate: new Date(2009, 09, 08),
onSelect: function(dateText, inst) {
$(".datepicker").datepicker("option", "defaultDate", dateText);
}
});
$("#end_date_uk").datepicker({
changeMonth: true,
numberOfMonths: 3,
showButtonPanel: true,
showCurrentAtPos: 1,
autoSize: true,
changeYear: true,
dateFormat: "dd-mm-yy",
defaultDate: new Date(2011, 02, 28),
onSelect: function(dateText, inst) {
$(".datepicker").datepicker("option", "defaultDate", dateText);
}
});
});
</script>
Thanks in advance. H.
精彩评论