You are using 'chart_div' for both charts, so they both replace the content of the chart_div element. Charts don't append to the element content, but replace it. Just use a different element, and you should see two charts.
On Tue, Apr 11, 2017 at 4:10 PM, C Miller <[email protected]> wrote: > 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 google-visualization-api@ > googlegroups.com. > 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 > <https://groups.google.com/d/msgid/google-visualization-api/a963b11f-7295-409e-a7da-f3c923c9a800%40googlegroups.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> [email protected] <[email protected]> 5CC, Cambridge MA -- 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/CAOtcSJO8KB5JXHU4yOL0sNX2guHTMvADJc2KbyVcUSwxiHiO5A%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
