Draw multiple charts using Ajax - or better method?

[C Miller]

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>

[Daniel LaLiberte]

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.

--
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 google-visualization-api+unsub...@googlegroups.com.
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.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[C Miller]

Oh wow...I missed the easiest part!  Thank you for the hint.  

Another question, where is a good training resource on constructing the controller in MVC core?  I've been having trouble determining the best way to make queries into my data context.  

[Daniel LaLiberte]

I don't know if anyone in this group can help you with anything about MVC core.  There probably a more appropriate forum somewhere.

On Wed, Apr 12, 2017 at 8:37 AM, C Miller <and.c...@gmail.com> wrote:

Oh wow...I missed the easiest part!  Thank you for the hint.  

Another question, where is a good training resource on constructing the controller in MVC core?  I've been having trouble determining the best way to make queries into my data context.  

--
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 google-visualization-api+unsub...@googlegroups.com.
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/eddab32b-fde0-4d80-b180-cbef221d28d0%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.