MVC dynamic data Google Charts for each

Question

I'm struggling with dynamic data, C# MVC and Google Charts for a while now. What I try to achieve is reading out a database file and create a Google chart for each group.

I saw an example like http://www.aspdotnet-pools.com/2014/07/dynamic-google-scatter-chart-in-aspnet.html but dont know in that example how to handle dynamic data in the controller file.

Controller:

namespace AppRepo.Controllers
{
    public class RepositoriesController : Controller
    {
        private Database1Entities db = new Database1Entities();

        // GET: Repositories
        public ActionResult Index()
        {

            return View(db.Repositories.ToList());

        }

        public ActionResult Grouped()
        {
            return View(db.Repositories.ToList());

        }

        public ActionResult Charts()
        {
            return View(db.Repositories.ToList());


        }
}

VIEW file:

@model List<AppRepo.Models.Repository>

@{
    ViewBag.Title = "Charts";
}

@section Scripts
{
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">
        google.load('visualization', '1', { packages: ['corechart'] });
    </script>

    <script type="text/javascript">
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var tdata = new google.visualization.DataTable();
            var data = [{ "Name": "A", "Qty": 1 }, { "Name": "B", "Qty": 2 }, { "Name": "C", "Qty": 3 }, { "Name": "D", "Qty": 4 }];

            tdata.addColumn('string', 'Name');
            tdata.addColumn('number', 'Qty');

            for (var i = 0; i < data.length; i++) {
                tdata.addRow([data[i].Name, data[i].Qty]);
            }
            var options = {
                width: 1000,
                height: 563,
                //title: '@Model.Select(r => r.BackupServer)',
                hAxis: {
                    title: 'Date',
                    gridlines: { count: 10 }
                },
                vAxis: {
                    title: '% Free'
                }
            };




            chart = new google.visualization.ColumnChart(document.getElementById('divchart'));

            chart.draw(tdata,options);
        }

    </script>
}
<div id='divchart'>
</div>

I also get the following error now:

The model item passed into the dictionary is of type 'System.Collections.Generic.List`1[AppRepo.Models.Repository]', but this dictionary requires a model item of type 'AppRepo.Models.Repository'.

Answer 1

Your issue is that your view's model is AppRepo.Models.Repository, but you're passing into it a List of AppRepo.Models.Repository objects.

If you update your view's model to be List<AppRepo.Models.Repository>, the error you're receiving should disappear. However, you'll then need to go through and update your references to your model in your view file, since things like @Html.Raw(Model.FreePct) won't work anymore. That will be pretty easy, though, if you want all of the FreePct values in your List of Repository objects, you can just do something like @Model.Select(r => r.FreePct) instead.

UPDATED ANSWER AFTER UPDATED QUESTION:

Here's the general format I use for drawing charts. It uses some jQuery, but it works reliably for me. Also, by separating out the loading and drawing of the charts, you can have your page be more responsive by only loading the data when you need to, and then you can re-draw as much as you want without re-loading.

Notice that when I use chart, data, and options, I'm not prefacing them with var because I want to use the global instances of these variables.

UPDATE: I think this should use your Model data properly. Notice that in the for loop, the method is tdata.addRows, not tdata.addRow.

<div id='divchart'>
</div>

@section Scripts
{
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">
        google.load('visualization', '1', { packages: ['corechart'] });
    </script>

    <script type="text/javascript">

        var chart;
        var options;
        var data;

        $(document).ready(function () {
            LoadChartData();
            DrawChart();
        });

        function LoadChartData() {
            var tdata = new google.visualization.DataTable();
            tdata.addColumn('date', "Date");
            tdata.addColumn('number', "FreePct");

            @for (int i = 0; i < Model.Count; i++) 
            {
                @: tdata.addRows([@Model.ElementAt(i).Date, @Model.ElementAt(i).FreePct]);
            }

            options = {
                width: 1000,
                height: 563,
                title: '@Model.Select(r => r.BackupServer).FirstOrDefault()',
                hAxis: {
                    title: 'Date',
                    gridlines: { count: 10 }
                },
                vAxis: {
                    title: '% Free'
                }
            };

            var chartContainer = document.getElementById("divchart");

            while (chartContainer == null) {
                chartContainer = document.getElementById("divchart");
            }

            chart = new google.visualization.ColumnChart(chartContainer);
        }

        function DrawChart() {

            chart.draw(data, options);
        }

    </script>
}