I created a google chart dashboard that is pulling data from SQL server
using EF and Json, the dashboard must return a Barchart with only selected
columns using the Category-Filter control. Nothing is being return
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Google Chart with ASP.NET</title>
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js";></script>
<script type="text/javascript" src=
"http://www.gstatic.com/charts/loader.js";></script>
<script type="text/javascript">
//Get data from the localhost:64428/Graph
$(document).ready(function () {
$.ajax({
type: 'POST',
dataType: "json",
contentType: "application/json",
url: '@Url.Action("UptimeGraph", "Graph")',
success: function (result) {
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(function () {
drawChart(result);
});
}
});
//Instantiate the Data and Create the Table
function drawChart(result) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Systems');
data.addColumn('number', 'UptimeReadings');
var dataArray = [];
$.each(result, function (i, obj) {
dataArray.push([obj.SYSTEM, obj.READINGS]);
});
data.addRows(dataArray);
// Set The Control and The Filter Column to the system names
var SystemPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control_div',
'options': {
'filterColumnLabel': SYSTEM,
'ui': {
'allowMultiple': false,
'allowTyping': true,
'labelStacking': 'horizontal',
'label': 'Your Name'
}
}
});
//Set The Chart Options
var ChartData = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chart_div',
'options': {
'width': 700,
'height': 300,
'legend': { 'position': 'none' },
'pieSliceText': 'value'
}
});
//Create the Dashboard
var dashboard = new google.visualization.Dashboard(document.
getElementById('dashboard_div'));
//Bind the Data
dashboard.bind(SystemPicker, ChartData);
//Draw the Dashboard
dashboard.draw(data);
}
});
</script>
</head>
<body>
<br />
<div id="dashboard_div">
<table class="columns" align="center" width="90%" height="60%">
<tr><td><h3>Systems Uptime Graph</h3></td> </tr>
<tr><td><div id="control_div" style="width:100%; height:auto;
border: 0px solid #ccc"></div></td></tr>
<tr><td><div id="chart_div" style="width:100%; height:auto;
border: 0px solid #ccc"></div></td></tr>
</table>
</div>
</body>
</html>
--
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 https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/aeac7169-5a0f-4f12-8844-044dc77dcc8a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
