Uncaught TypeError: dashboard.draw не является функцией - Google Graphs - PullRequest
0 голосов
/ 04 июля 2019

Я пытался заставить работать некоторые старые графики Google, которые работали раньше. Тем не менее, они больше не показывают. В консоли я получаю следующую ошибку ...

Uncaught TypeError: dashboard.draw не является функцией

Однако, после просмотра кода и тестирования различных вещей, я не могу заставить его работать.

Может кто-нибудь увидеть какие-либо проблемы с кодом?

    function downloadGraph(id){
    var selected =jQuery('#anemometers_'+id+' :selected').val();

    var data = {
        action:"handleWindAjaxFunction",
        function:"downloadGraph",
        id:id,
        selected:selected
    }
    jQuery.post("/wp-admin/admin-ajax.php", data, function(response) {
        var file = jQuery.parseJSON(response);
        if(file.file != "error"){ window.location.href = file.file; }
        else { alert("No data found"); }
    });
    }

    var is_mobile = 
    /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);

    var active_columns = new Array();
    var maxData = 0;
    var minData = 0;
    var minPredictedData = 0;
    var maxPredictedData = 0;
    var currentData = '';
    var pickedEnd = 0;
    var pickedStart = 0;
    var graph = 0;
    var dataView = [];
    var predictedView = [];
    var running_initial = false;

    function update_graph(){
    var newData = getData(false);

    //sort table by date
    newData.data.sort({column: 0});
    newData.predicted.sort({column: 0});

    dataView = new google.visualization.DataView(newData.data);
    dataView.setColumns(active_columns);
    if(dataView.getViewColumns().length > 1){ dashboard.draw(dataView); }

    predictedView = new google.visualization.DataView(newData.predicted);
    predictedView.setColumns(active_columns);

    if(predictedView.getViewColumns().length > 1){ predictedDashboard.draw(predictedView); }
    if(jQuery("#poll_new_data").prop("checked")){
        var start = data.getColumnRange(0).min;
        var end = data.getColumnRange(0).max;
        if(is_mobile){
            jQuery("#control_mobile").dateRangeSlider("values",start,end);
        } else {
            control_range_slider.setState({"range":{"start":start,"end":end}});
        }
    }
    }

    function getChangedData(start,end,scale){

    if(jQuery("#poll_new_data").prop("checked")){
        var startSlider = data.getColumnRange(0).min;
        var endSlider = data.getColumnRange(0).max;
        if(is_mobile){
            jQuery("#control_mobile").dateRangeSlider("values",startSlider,endSlider);
        } else {
            control_range_slider.setState({"range":{"start":startSlider,"end":endSlider}});
        }
        start = 0;
        end = 0;
    } else {
        var startSlider = new Date(parseInt(start) * 1000);
        var endSlider = new Date(parseInt(end) * 1000);

        control_range_slider.setState({"range":{"start":startSlider,"end":endSlider}});
    }
    var params = {
        action:"handleWindAjaxFunction",
        function:"getGraphData",
        graph_event:graph,
        start:start,
        end:end,
        scale:scale
    }
    jQuery.post("/wp-admin/admin-ajax.php", params, function(response) {
        eval("var o = "+response+";");
        currentData = o;
        running_initial = false;
        update_graph();
    });
}

function getGraphData(graphID, initial, start, end){
    graph = graphID;
    var params = {
        action:"handleWindAjaxFunction",
        function:"getGraphData",
        graph_event:graphID,
        start:start,
        end:end,
        scale:1,
        initial:initial
    }

    jQuery.post("/wp-admin/admin-ajax.php", params, function(response) {
        eval("var o = "+response+";");
        currentData = o;
        //currentData.hideHeadings = [];
        if(initial == true){
            run();
            if(o.graph_settings != false){running_initial = true;}
        } else {
            running_initial = false;
        }
    });
}

function getData(initalise){
    data = new google.visualization.DataTable();
    predicted = new google.visualization.DataTable();
    data.addColumn("datetime", "Timestamp");
    predicted.addColumn("datetime", "Timestamp");
    var counter = 1;

    if(initalise == true){active_columns.push(0);}

    var selectionHTML = '';
    var headingsLength = currentData.headings.length * 3;

    var inout = ["gust","average","direction"];
    var count = 0;
    for(var x in currentData.devices){
        for(var i in inout){
            if(initalise == true){
                if(currentData.hideHeadings.indexOf(count) == -1){selectionHTML +="<input type=\"checkbox\" onclick=\"toggle("+(count + 1)+");\" checked />"+currentData.headings[x][i]+"<br />";}
                else{selectionHTML +="<input type=\"checkbox\" onclick=\"toggle("+(count + 1)+");\" />"+currentData.headings[x][i]+"<br />";}
                active_columns.push(count+1);
            }
            data.addColumn("number", currentData.headings[x][i]);
            predicted.addColumn("number", currentData.headings[x][i]);
            count++;
        }
    }

    var rows = [];
    headingsLength = headingsLength + 1;

    for(var x in currentData.data.current){
        var row = [];
        var date = new Date(x*1000);
        row.push(date);

        for(var i in currentData.devices){
            for(var y in inout){
                if(currentData.data.current[x][i]){
                    if(y == 0){row.push(parseFloat(currentData.data.current[x][i].gust));}
                    else if(y == 1){row.push(parseFloat(currentData.data.current[x][i].average));}
                    else{row.push(parseFloat(currentData.data.current[x][i].direction));}
                }else{row.push(null);}
            }
        }
        data.addRows([row]);
    }

    for(var x in currentData.data.predicted){
        var row = [];
        var date = new Date(x*1000);
        row.push(date);

        for(var i in currentData.devices){
            for(var y in inout){
                if(currentData.data.predicted[x][i]){
                    if(y == 0){row.push(parseFloat(currentData.data.predicted[x][i].gust));}
                    else if(y == 1){row.push(parseFloat(currentData.data.predicted[x][i].average));}
                    else{row.push(parseFloat(currentData.data.predicted[x][i].direction));}
                }else{row.push(null);}
            }
        }
        predicted.addRows([row]);
    }

    if(initalise == true){
        document.getElementById("controlsBox").innerHTML = selectionHTML;
        minData = data.getColumnRange(0).min;
        maxData = data.getColumnRange(0).max;

        minPredictedData = predicted.getColumnRange(0).min;
        maxPredictedData = predicted.getColumnRange(0).max;
    }

    return {data:data,predicted:predicted};
}

function drawChart() {
    var alldata = getData(true);
    var data = alldata.data;
    var predicted = alldata.predicted;
    data.sort({column: 0});
    predicted.sort({column: 0});
    dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));

    //create Google Visualization Control Wrapper
    control_range_slider = new google.visualization.ControlWrapper({
        'controlType': 'ChartRangeFilter',
        'containerId': 'control_range',
        'options' : {
            'filterColumnIndex': 0,
            'ui':{
                'chartType': 'LineChart',
                'chartOptions': {
                    'chartArea': {'left':85, 'width': '93%'},
                    'hAxis': { 'baselineColor': 'black'}
                },
                'chartView': {
                    'columns': [0,1]
                },
                'snapToData': false
            }
        },
        //set initial range
        'state': {'range': { 'start':new Date(data.getColumnRange(0).min), 'end' :new Date(data.getColumnRange(0).max) } }
    });

    //create Google Visualization Chart Wrapper
    chart = new google.visualization.ChartWrapper({
        'chartType':'LineChart',
        'containerId': 'chart_div',
        'options': {
            'interpolateNulls': 'true',
            'displayAnnotations': 'true',
            'title': "graph",
            'curveType': 'none',
            'vAxis': {
                'title': "Wind",
                'gridlines': { 'count': 5},
                'minorGridlines': {'count': 5}
            },
            'linewidth': 1,
            'pointSize': 3,
            'legend': {'position':'none' },
            'chartArea': {'left': 85, 'top': 10, 'width': '93%', 'height':"85%" },
            'focusTarget': 'category',
            'hAxis': {
                'title': 'Time',
                'gridlines': {'count':10},
                'minorGridlines': {'count':5}
            },
            'animation':{'duration':1000, 'easing': 'out' },
            'view':{'columns': [0,1,2]}
        }
    });

    //create Google Visualization Chart Wrapper for table
    var table = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'chart_table',
        'options': {
            'page':'enable',
            'pageSize': 20,
            'sortColumn': 0,
            'sortAscending': false
        }
    });
    dashboard.bind(control_range_slider, [chart, table]);
    dataView = new google.visualization.DataView(data);
    dataView.setColumns(active_columns);

    //event to control range slider
    google.visualization.events.addEventListener(control_range_slider, 'statechange', function(e) {
        if(!e.inProgress){
            //range changed
            var start = new Date(Date.parse(control_range_slider.getState().range.start));
            var end = new Date(Date.parse(control_range_slider.getState().range.end));

            pickedStart = start.getTime() / 1000;
            pickedEnd = end.getTime() / 1000;

            //getChangedData(pickedStart,pickedEnd,jQuery("#measurement").find(":selected").val());
            updateGraphSettings(pickedStart,pickedEnd);
        }
    });
    //draw dashboard
    if(dataView.getViewColumns().length > 1){ dashboard.draw(dataView); }

    predictedDashboard = new google.visualization.Dashboard(document.getElementById('predictedDashboard'));

    predicted_control_range_slider = new google.visualization.ControlWrapper({
        'controlType': 'ChartRangeFilter',
        'containerId': 'predictedControl_range',
        'options' : {
            'filterColumnIndex': 0,
            'ui':{
                'chartType': 'LineChart',
                'chartOptions': {
                    'chartArea': {'left':85, 'width': '93%'},
                    'hAxis': { 'baselineColor': 'black'}
                },
                'chartView': {
                    'columns': [0,1]
                },
                'snapToData': false
            }
        },
        //set initial range
        'state': {'range': { 'start':new Date(predicted.getColumnRange(0).min), 'end' :new Date(predicted.getColumnRange(0).max) } }
    });

    predictedChart = new google.visualization.ChartWrapper({
        'chartType':'LineChart',
        'containerId': 'predictedChart_div',
        'options': {
            'interpolateNulls': 'true',
            'displayAnnotations': 'true',
            'title': '',
            'curveType': 'none',
            'vAxis': {
                'gridlines': { 'count': 5},
                'minorGridlines': {'count': 5}
            },
            'linewidth': 1,
            'pointSize': 3,
            'legend': {'position':'none' },
            'chartArea': {'left': 85, 'top': 10, 'width': '93%', 'height':"85%" },
            'focusTarget': 'category',
            'hAxis': {
                'title': 'Time',
                'gridlines': {'count':10},
                'minorGridlines': {'count':5}
            },
            'animation':{'duration':1000, 'easing': 'out' },
            'view':{'columns': [0,1]}
        }
    });

    var predictedTable = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'predictedChart_table',
        'options': {
            'page':'enable',
            'pageSize': 20,
            'sortColumn': 0,
            'sortAscending': true
        }
    });

    predictedDashboard.bind(predicted_control_range_slider, [predictedChart, predictedTable]);

    predictedView = new google.visualization.DataView(predicted);
    predictedView.setColumns(active_columns);

    if(predictedView.getViewColumns().length > 1){ predictedDashboard.draw(predictedView);}

    //hide direction lines from the chart, but still display them in the table.
    for(var x=0; x < currentData.hideHeadings.length; x++){
        var key = active_columns.indexOf(currentData.hideHeadings[x] + 1);
        active_columns.splice(key, 1);
    }
    predictedView.setColumns(active_columns);
    dataView.setColumns(active_columns);
    predictedChart.setView(active_columns);
    chart.setView(active_columns);

    //poll new data every minute
    var chart_timer = setInterval(function(){
        if(jQuery("#poll_new_data").prop("checked")){
            getChangedData(pickedStart,pickedEnd,jQuery("#measurement").find(":selected").val());
        }
        var start = data.getColumnRange(0).min;
        var end = data.getColumnRange(0).max;
        if(is_mobile){jQuery("#control_mobile").dateRangeSlider("values",start,end);}
        else {control_range_slider.setState({"range":{"start":start,"end":end}});}
    }, 10000);

    checkMobile();

    google.visualization.events.addOneTimeListener(control_range_slider, 'ready', function(){
        if(running_initial == true && currentData.graph_settings != false){
            var start = new Date(parseInt(currentData.graph_settings.start) * 1000);
            var end = new Date(parseInt(currentData.graph_settings.end) * 1000);

            pickedStart = start.getTime() / 1000;
            pickedEnd = end.getTime() / 1000;

            control_range_slider.setState({"range":{"start":start,"end":end}});
            if(is_mobile){jQuery("#control_mobile").dateRangeSlider("values",start,end);}
            getChangedData(pickedStart,pickedEnd,jQuery("#measurement").find(":selected").val());

            running_initial = false;
            return true;
        }
        return false;
    });
}

function update_dataView(){
    active_columns.sort();
    if(active_columns.length > 1){
        chart.setView(active_columns);

        //bind control wrapper to chart & table wrapper
        dataView.setColumns(active_columns);
        dashboard.bind(control_range_slider, [ ]);
        dashboard.draw(dataView);

        predictedView.setColumns(active_columns);
        predictedChart.setView(active_columns);

        //bind control wrapper to chart & table wrapper
        predictedDashboard.bind(predicted_control_range_slider, [ ]);
        predictedDashboard.draw(predictedView);
    }
}

function toggle(c){
    var c = parseInt(c);
    var index = active_columns.indexOf(c);
    if(index == -1){
        active_columns.push(c);
    } else {
        while(index != -1){
            active_columns.splice(index, 1);
            index = active_columns.indexOf(c);
        }
    }
    update_dataView();
}

function resizeHandler() {
    dashboard.draw(dataView);
    predictedDashboard.draw(predictedView);
}

if (window.addEventListener) {window.addEventListener('resize', resizeHandler, false);}
else if (window.attachEvent) {window.attachEvent('onresize', resizeHandler);}

function checkMobile(){
    if (is_mobile){
        jQuery("#dashboard").addClass("mobile_dashboard");
        jQuery("#predictedChart_table").addClass("mobile_table");
        jQuery("#chart_table").addClass("mobile_table");

        jQuery("#predictedChart_div").addClass("mobile_chart");
        jQuery("#chart_div").addClass("mobile_chart");

        jQuery("#predictedDashboard").addClass("mobile_dashboard");
        jQuery(".graph_anemometer").addClass("mobile_graph");
        jQuery(".graph_anemometer").removeClass("graph");
        jQuery(".graph_predicted").addClass("mobile_graph");
        jQuery(".graph_predicted").removeClass("graph");

        jQuery("#control_range").hide();
        jQuery("#control_mobile").show();
        jQuery("#control_mobile").dateRangeSlider({
            bounds: {
                min: new Date(minData),
                max: new Date(maxData)
            },
            defaultValues: {
                min: new Date(minData),
                max: new Date(maxData)
            },
            arrows: true,
            wheelMode: null
        }).bind('valuesChanged', function(e, data) {
            control_range_slider.setState({range: { start: data.values.min, end: data.values.max }});
            control_range_slider.draw();
        });

        jQuery("#predictedControl_range").hide();
        jQuery("#predictedControl_mobile").show();
        jQuery("#predictedControl_mobile").dateRangeSlider({
            bounds: {
                min: new Date(minPredictedData),
                max: new Date(maxPredictedData)
            },
            defaultValues: {
                min: new Date(minPredictedData),
                max: new Date(maxPredictedData)
            },
            arrows: true,
            wheelMode: null
        }).bind('valuesChanged', function(e, data) {
            predicted_control_range_slider.setState({range: { start: data.values.min, end: data.values.max }});
            predicted_control_range_slider.draw();
        });
    }
}

function changeScale(){
    if(jQuery("#poll_new_data").prop("checked")){
        getChangedData(pickedStart,pickedEnd,jQuery("#measurement").find(":selected").val());
    }
}

function updateGraphSettings(start,end){
    var params = {
        action:"handleWindAjaxFunction",
        function:"updateGraphSettings",
        event:graph,
        start:start,
        end:end
    }

    jQuery.post("/wp-admin/admin-ajax.php", params, function(response) {});
}

function run() {
    google.charts.load('current', {packages: ['table', 'controls', 'corechart', 'line']});
    callback: drawChart;
    google.charts.setOnLoadCallback(drawChart);
}

Код специально ссылается на эту функцию в ошибке консоли ...

function resizeHandler() {
dashboard.draw(dataView);
predictedDashboard.draw(predictedView);
}

Заранее спасибо за любую помощь!

...