I'm using ASP.NET MVC Core 1.1, Visual Studio 2015, and Google Charts to
first generate a simple table for each of two data sources. I am able to
pull data successfully from source 1 into the first table. When I add a
the next table for source 2, only one table displays showing data from
source 2.
Would appreciate some help with this...
My goal is to render multiple charts/tables which have different data
sources on one page. I am open to any suggestion of any simpler way! It
does not have to be in the method I chose to use below.
Here's my code:
Controller Source 1
public ActionResult ChartDataOne()
{
var data = (from p in _context.LPlusScores
where p.LPlusScoreID == "AE"
orderby p.YTD
select p).ToList();
return Json(data);
}
Controller Source 2
public ActionResult ChartDataTwo()
{
var data = (from p in _context.LPlusScores
where p.LPlusScoreID == "AE"
orderby p.YTD
select p).ToList();
return Json(data);
}
Json source 1 when viewed in browser
[{"lPlusScoreID":"AE","lastYear":1.00,"jan":1.00,"feb":1.00,"mar":1.00,"apr":1.00,"may":1.00,"jun":1.00,"jul":1.00,"aug":1.00,"sep":1.00,"oct":1.00,"nov":1.00,"dec":1.00,"ytd":1.00}]
Json source 2 when viewed in browser
[{"lPlusScoreID":"GS","lastYear":3.00,"jan":3.00,"feb":3.00,"mar":3.00,"apr":3.00,"may":3.00,"jun":3.00,"jul":3.00,"aug":3.00,"sep":3.00,"oct":3.00,"nov":3.00,"dec":3.00,"ytd":3.00}]
HTML
<div id="chart_div"></div>
Javascript
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js";></script>
<script type="text/javascript">
// Load the Visualization API package.
google.charts.load('current', { 'packages': ['corechart', 'table',
'gauge'] });
// Set a callback to run when the Google Visualization API is
loaded.
google.charts.setOnLoadCallback(drawChart1);
google.charts.setOnLoadCallback(drawChart2);
function drawChart1() {
$.ajax({
type: 'GET',
dataType: 'json',
contentType: "application/json",
url: '@Url.Action("ChartDataOne", "LPlusScore")',
//See separate JSON Data Example
success: function (result) {
// Create our data table out of JSON data loaded from
server
var data = new google.visualization.DataTable();
//Add Columns
data.addColumn('string', 'lPlusScoreID');
data.addColumn('number', 'lastYear');
data.addColumn('number', 'ytd');
//Add Rows
var dataArray = [];
$.each(result, function (i, obj) {
dataArray.push([
obj.lPlusScoreID,
obj.lastYear,
obj.ytd,
]);
});
data.addRows(dataArray);
//Chart Options
var options = {
height: 200,
};
//Draw Chart
var chart = new
google.visualization.Table(document.getElementById('chart_div'));
chart.draw(data, options);
} //END success: function (result) {
}); //END $.ajax({
}; //END function drawChart()
function drawChart2() {
$.ajax({
type: 'GET',
dataType: 'json',
contentType: "application/json",
url: '@Url.Action("ChartDataTwo", "LPlusScore")',
//See separate JSON Data Example
success: function (result) {
// Create our data table out of JSON data loaded from
server
var data = new google.visualization.DataTable();
//Add Columns
data.addColumn('string', 'lPlusScoreID');
data.addColumn('number', 'lastYear');
data.addColumn('number', 'ytd');
//Add Rows
var dataArray = [];
$.each(result, function (i, obj) {
dataArray.push([
obj.lPlusScoreID,
obj.lastYear,
obj.ytd,
]);
});
data.addRows(dataArray);
//Chart Options
var options = {
height: 200,
};
//Draw Chart
var chart = new
google.visualization.Table(document.getElementById('chart_div'));
chart.draw(data, options);
} //END success: function (result) {
}); //END $.ajax({
}; //END function drawChart()
</script>
--
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/a963b11f-7295-409e-a7da-f3c923c9a800%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
