I want to draw a table after dashboard's controller and chart, this table
is not linked with any range filter, When I am trying to draw it, it gives
error c[Me] is not a function, what could be the reason of it?
Code:
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript"
src="https://www.google.com/jsapi";></script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.load('visualization', '1.1',
{'packages':['controls','table']});
// 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 chart,
// passes in the data and draws it.
function drawDashboard() {
var jsonChartData1 = $.ajax({
url: "admilldata1.php",
dataType:"json",
async: false
}).responseText;
var jsonTableData = $.ajax({
url: "admilltabledata.php",
dataType:"json",
async: false
}).responseText;
// Create our data table.
var chartdata = new google.visualization.DataTable(jsonChartData1);
// Create our data table
var tabledata = new google.visualization.DataTable(jsonTableData);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a line chart, passing some options
var Chart1 = new google.visualization.ChartWrapper({
'chartType': 'AreaChart',
'containerId': 'chart_div1',
'options': {
'width': 1200,
'height': 350,
'legend': 'top',
focusTarget:'category',
series: {
0: {
labelInLegend: 'Idle Time',
color: 'Blue',
areaOpacity: 0.5
},
1: {
labelInLegend: 'StandBy Time',
color: 'Orange',
areaOpacity: 0.6
},
2: {
labelInLegend: 'Run Time',
color: 'Green',
areaOpacity: 0.6
},
3: {
labelInLegend: 'Alarm Time',
color: 'Red',
areaOpacity: 0.6
}
},
chartArea: {
left: "5%",
top: "15%",
width: "200%",
height: "50%",
},
vAxis: {
viewWindow: {
min: 0,
max: 6
}
} },
view: {
columns: [0,1,2,3,4,5] // use columns 0 and 2
}
});
// Create a range slider, passing some options
var RangeSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'filter_div',
'options': {
displayAnnotations: false,
'filterColumnLabel': 'Start Time and Shut Down',
ui: {chartType: 'LineChart',
chartOptions: {
chartArea: {
width: '100%'
},
height: 60
}
}
}
});
var table = new
google.visualization.Table(document.getElementById('table_div'));
table.draw(tabledata, {showRowNumber: true, alternatingRowStyle: true});
// Establish dependencies, declaring that 'filter' drives
'LineChart',
// so that the line chart will only display entries that are let
through
// given the chosen slider range.
dashboard.bind(RangeSlider, Chart1).draw(chartdata);
// Draw the dashboard.
dashboard.draw(chartdata);
}
</script>
</head>
<body>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="chart_div1"></div>
<div id="filter_div"></div>
<div id="table_div"></div>
</div>
</body>
</html>
JSON of Table Data:
{ "cols": [ {"id":"","label":"Start Time and Shut
Down","pattern":"","type":"datetime"},
{"id":"","label":"Name","pattern":"","type":"datetime"},
{"id":"","label":"Label","pattern":"","type":"datetime"},
{"id":"","label":"Hover","pattern":"","type":"datetime"},
{"id":"","label":"PointSum","pattern":"","type":"datetime"} ], "rows": [
{"c":[{"v":"02:00:00","f":null},{"v":"02:50:00","f":null},{"v":"02:30:00","f":null},{"v":"02:15:00","f":null},{"v":"02:20:00","f":null}]}
] }
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
