Can anyone determine what can slow down IE to workaround in the next JS / JQUERY / JSON.
It's not slow until a large JSON dataset is added to it, but Mozilla-based browsers are great for these conditions. There are no script errors at runtime.
I removed the bad HTML as the reason, and I added raw JSON to a simpler interactive game environment without negative speed effects.
So I think it could be some kind of JS, which IE doesn't like ??
Any ideas are welcome.
(Here is myu JQUERY)
<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 are all the scripts:
google.load("visualization", "1.1", {"packages":["corechart", "controls"]});
google.setOnLoadCallback(drawDashboard);
var barChart;
var ChartColumnsLength;
function drawDashboard() {
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
)
var dashboard = new google.visualization.Dashboard(document.getElementById("dashboard_div"));
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);
barChart = new google.visualization.ChartWrapper({
"chartType": "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() {
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) {
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();
}
});
dashboard.bind(controlPicker1, barChart);
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 = 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. N.