Pass data to the viewbag of the controller for view using Chart.JS

Question

Pass data to the viewbag of the controller for view using Chart.JS

Navigation

#1 by (0 votes)

0

I'm trying to pass data from a list to a viewbag, but it's not returning correctly in the view.

Mytemplateandcontrol:

publicclassDataPoint{publicStringnome=null;publicdoubley=0;publicDataPoint(Stringnome,doubley){this.nome=nome;this.y=y;}}publicclassHomeController:Controller{publicActionResultIndex(){List<string>nome=newList<string>();List<double>y=newList<double>();List<DataPoint>dataPoints=newList<DataPoint>{newDataPoint("Casamento",50),
            new DataPoint("Óbitos",10),
            new DataPoint("Nascimento", 40),
            new DataPoint("Rec. de Firma", 40),
            new DataPoint("Autenticações", 60)
        };

        foreach (var item in dataPoints)
        {
            nome.Add(item.nome);
            y.Add(item.y);
        }

        ViewBag.nome = nome;
        ViewBag.valor = y;

        return View();
    }

And my view:

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ChartJS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.bundle.min.js"></script><script>varDoughnutChartData={labels:[@Html.Raw(ViewBag.nome)],datasets:[{label:'TestecomChartJS',backgroundColor:["#f990a7",
                    "#aad2ed",
                    "#87CEFA",
                    "#99e5e7",
                    "#f7bd83",
                ],
                borderWidth: 2,
                data: [@ViewBag.valor]
            }]
        };

    window.onload = function () {
        var ctx1 = document.getElementById("Doughnutcanvas").getContext("2d");
            window.myBar = new Chart(ctx1,
                {
                    type: 'pie',
                    data: DoughnutChartData,
                    options:
                        {
                            title:
                            {
                                display: true,
                                text: "Teste Chart"
                            },
                            responsive: true,
                            maintainAspectRatio: true
                        }
                });
        }
</script>

c# asp.net-mvc chartjs

asked by anonymous 03.01.2018 / 17:17

1 answer

Generate automatic api sequence when clicking the specific product Array declaration in javascript [duplicate]

score 0 · Accepted Answer

You are forgetting to format the result as expected and are only printing the object. Notice that for List<double> I added a treatment to preserve the separation by ".", Otherwise it would be replaced by "," and your array would not be spelled correctly.

@{
    var valorArray = (List<double>)ViewBag.valor;
}
    var DoughnutChartData =
            {
                labels:  [@Html.Raw("'" + string.Join("','",ViewBag.nome) + "'")],
                datasets: [{
                    label: 'Teste com ChartJS',
                    backgroundColor: [
                        "#f990a7",
                        "#aad2ed",
                        "#87CEFA",
                        "#99e5e7",
                        "#f7bd83",
                    ],
                    borderWidth: 2,
                    data: [@Html.Raw(string.Join(",",valorArray.Select(x => x.ToString(System.Globalization.CultureInfo.InvariantCulture)).ToArray()))]
                }]
            };