Google可视化错误类型错误

时间:2014-06-10 17:23:00

标签: javascript google-visualization googlevis

在今天之前,所有这些代码都可以正常工作:

var slider;
var ajdi = '';
function drawVisualization() {
    var cssClassNames = {
        'headerRow': 'zaglavlje',
        'tableRow': 'red',
        'oddTableRow': 'red1',
        'selectedTableRow': 'orange-background large-font',
        'hoverTableRow': 'prekoreda',
        'headerCell': 'gold-border',
        'tableCell': 'cell',
        'rowNumberCell': 'underline-blue-font'
    };

    var json = $.ajax({
        url: 'getzadaci.php', // make this url point to the data file
        dataType: 'json',
        async: false
    }).responseText;

    // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable(json);
    //dodajemo kolonu sa kontrolama

    //dodajemo kolonu sa kontrolama
    data.addColumn('string', '');
    for (var y = 0, maxrows = data.getNumberOfRows(); y < maxrows; y++) {
        if (data.getValue(y, 11) != 'a') {
            data.setValue(y, 11, '<div style="text-align:right;"><a data-toggle="modal" data-target="#update" href="#" class="btn btn-info openRes"><i class="fa fa-edit"></i> Details</a>&nbsp;<a id="hm" data-toggle="modal" data-target="#troskovnik" href="#" class="btn btn-danger"><i class="fa fa-flask"></i> Troskovnik</a>&nbsp;<i data-toggle="modal" data-target="#delete" href="#" class="fa fa-trash-o"></i></div>');
        }
    } 

    data.addColumn('string', '');
    for (var y = 0, maxrows = data.getNumberOfRows(); y < maxrows; y++) {
        if (data.getValue(y, 3) === 'U toku') {
            data.setValue(y, 12, '<span class="bg-warning" style="display: inline-block;">U toku</span>');
        }
        else if (data.getValue(y, 3) === 'U planu') {
            data.setValue(y, 12, '<span class="bg-danger" style="display: inline-block;">U planu</span></span>');
        } 
        else {
            data.setValue(y, 12, '<span class="bg-success" style="display: inline-block;">Zavrseno</span>');
        }
    }

    // Define a category picker control for the Gender column
    var categoryPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control1',
        'options': {
            'filterColumnLabel': 'Status',
            'ui': {
                'labelStacking': 'vertical',
                'allowTyping': false,
                'allowMultiple': true,
                'caption': 'Status'

            }
        }
    });

    var categoryPicker1 = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control2',
        'options': {
            'filterColumnIndex': 8,
            'ui': {
                'labelStacking': 'horizontal',
                'allowTyping': false,
                'allowMultiple': true,
                'caption': 'Parcela'
            }
        }
    });
    var categoryPicker2 = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control4',
        'options': {
            'filterColumnIndex': 2,
            'ui': {
                'labelStacking': 'horizontal',
                'allowTyping': false,
                'allowMultiple': true,
                'caption': 'Vrsta zadatka'
            }
        }
    });

    var stringFilter1 = new google.visualization.ControlWrapper({
        'controlType': 'StringFilter',
        'containerId': 'control3',
        'options': {
            'matchType': 'any',
            'filterColumnIndex': 1,
            'ui': {'labelStacking': 'vertical'}
        }
    });

    var slider = new google.visualization.ControlWrapper({
        'controlType': 'DateRangeFilter',
        'containerId': 'control5',
        'options': {
            'filterColumnLabel': 'Pocetak',
            'ui': {'labelStacking': 'vertical'}
        }
    });

    // Define a Pie chart

    // Define a table
    var table = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'chart2',
        'cssClassNames': 'cssClassNames',
        'view': { 'columns': [1,2,12,5,6,8,11] },
        'options': {
            cssClassNames: cssClassNames,
            allowHtml: true
        }
    });

    var timeline = new google.visualization.ChartWrapper({
        chartType: 'Timeline',
        containerId: 'chart5',
        options: {
            height: '350',
            timeline: { colorByRowLabel: true },
            //timeline.barLabelStyle: {color: '#000', fontName: 'Arial', fontSize: '13px'},
            backgroundColor: '#fff',
            colors: ['#55c2a2', '#89d168', '#d3eb87','#8ec63e', '#FFF0BA','#FF542E', '#CFD6DE', '#ADC1D6', '#7297BA']
            //timeline: { rowLabelStyle: {fontName: 'Helvetica', fontSize: 24, color: '#603913' },
            // barLabelStyle: { fontName: 'Garamond', fontSize: 14 } }
        },
        view: {
            // as an example, use columns "Naziv", "Vrsta", "Pocetak", and "Zavrsetak" for the timeline
            columns: [8, 2, 5, 6]
        },

    });

    var formatter_short = new google.visualization.DateFormat({formatType: 'short'});
    formatter_short.format(data, 5);
    formatter_short.format(data, 6);

    new google.visualization.events.addListener(table, 'ready', function () {
        google.visualization.events.addListener(table.getChart(), 'select', function () {
            var selection = table.getChart().getSelection();
            // iterate over all selected rows
            for (var i = 0; i < selection.length; i++) {
                //$("#edit").removeClass("edit btn btn-success")
                //$('#edit').addClass('edit btn btn-success');
                ajdi = table.getDataTable().getValue(selection[i].row,0);
                openResource();
                $("#vrednostid").val(table.getDataTable().getValue(selection[i].row,0));
                $("#naziv1").val(table.getDataTable().getValue(selection[i].row,1));
                $("#vrsta_rada1").val(table.getDataTable().getValue(selection[i].row,2));
                $("#status1").val(table.getDataTable().getValue(selection[i].row,3));
                $("#opis1").val(table.getDataTable().getValue(selection[i].row,4));
                $("#usluzno1").val(table.getDataTable().getValue(selection[i].row,9));

                var p = new Date(table.getDataTable().getValue(selection[i].row,5));
                $("#dp31").datepicker("setDate", p);

                var z = new Date(table.getDataTable().getValue(selection[i].row,6));
                $("#dp41").datepicker("setDate", z);

                //$("#parcele1").val(table.getDataTable().getValue(selection[i].row,8));
                //$("#parcele1").select2("val", ["3","19"]);
                var id = table.getDataTable().getValue(selection[i].row,10);
                var naziv = table.getDataTable().getValue(selection[i].row,8);


                var idArr = (id.lastIndexOf(',') == (id.length - 1) ? id.substr(0, id.length - 1) : id).split(', ');
                var nazivArr = (naziv.lastIndexOf(',') == (naziv.length - 1) ? naziv.substr(0, naziv.length - 1) : naziv).split(', ');
                var objHold = [];
                for(var j=0,length=idArr.length;j<length;j++)
                {
                    if(idArr[j] && nazivArr[j]) // make sure both arrays have a value
                        objHold.push({id: idArr[j], naziv: nazivArr[j]});
                }
                $("#parcele1").select2("data", objHold);

            }
        });
    });

    // Create a dashboard
    new google.visualization.Dashboard(document.getElementById('dashboard')).
    // Establish bindings, declaring the both the slider and the category
    // picker will drive both charts.
    bind([categoryPicker, categoryPicker1, categoryPicker2, slider, stringFilter1], [table, timeline]).
    // Draw the entire dashboard.
    draw(data, {'allowHtml':true, 'cssClassNames': 'cssClassNames'});
    //table.draw(data, {'allowHtml':true, 'cssClassNames': cssClassNames});
}

function dashboardReady() {
    // The dashboard is ready to accept interaction. Configure the buttons to
    // programmatically affect the dashboard when clicked.

    // Change the slider selected range when clicked.
    document.getElementById('rangeButton').onclick = function() {
        slider.setState({'lowValue': 2, 'highValue': 5});
        slider.draw();
    };

    // Change the pie chart rendering options when clicked.
    document.getElementById('optionsButton').onclick = function() {
        piechart.setOption('is3D', true);
        piechart.draw();
    };
}
google.setOnLoadCallback(drawVisualization);// JavaScript Document

但今天我收到此错误:You called the draw() method with the wrong type of data rather than a DataTable or DataView×

为什么呢?谷歌viz api ......我很紧张。

是否有任何改变使其可行?是否有任何选项可以禁用仪表板的谷歌可视化错误,因为当我没有数据时Google会向我显示错误

更新:

1 个答案:

答案 0 :(得分:5)

在最近的图表更新后,我在chrome v.35上遇到了同样的问题。

清除了我的浏览历史记录(shift + ctl + del)并修复了问题。

必须与以前版本的谷歌图表中的cookie有关。