开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜