Google Chart Control and Dashboard not working
40 views
Skip to first unread message
Tisetso Baloyi
May 14, 2018, 9:01:14 AM5/14/18
to Google Visualization API
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>Reply all
Reply to author
Forward
0 new messages