Я пытался заставить работать некоторые старые графики 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);
}
Заранее спасибо за любую помощь!