CODEWITHSUNDEEP
asp.net-mvccsvchart.jsviewbag
Pieter Du Toit
Pieter Du Toit

Reputation: 429

ChartJs Uncaught ReferenceError for labels value from ViewBag

I'm struggling with passing the csv strings via ViewBag in the correct format.

I know the result should be like ["Blue","Brown","Green"] but my script is generated as [Blue,Brown,Green] instead.

And then I get the Uncaught ReferenceError : Blue is not defined.

How can I format it in my controller to pass in the correct way?

This is my code in the controller

public ActionResult Index()
    {

        List<string> teamsList = new List<string>();
        List<string> salesCount = new List<string>();            

        foreach (var team in Db.Teams)
        {
            teamsList.Add(team.Name);
            int count = Db.LeadCampaigns.Count(i => Db.Agents.FirstOrDefault(a => a.AgentId == i.AgentId).TeamId == team.TeamId && i.LeadStatusId == Db.LeadStatuses.FirstOrDefault(s => s.Name == "SALE").LeadStatusId);
            salesCount.Add(count.ToString());
        }

        ViewBag.SaleCount_List = string.Join(",", salesCount);

        ViewBag.TeamName_List = string.Join(",", teamsList);

        return View();
    }

And here is my script in the view.

<script>


var barChartData =
{
    labels: [@Html.Raw(ViewBag.TeamName_List)],
    datasets: [{
    label: 'TeamWise Sales Count',
    backgroundColor: [
    "#f990a7",
    "#aad2ed",
    "#9966FF",
    "#99e5e5",
    "#f7bd83",
    ],
    borderWidth: 2,
    data: [@ViewBag.SaleCount_List]
    }]
};


window.onload = function () {

    var ctx1 = document.getElementById("barcanvas").getContext("2d");
    window.myBar = new Chart(ctx1,
        {
            type: 'bar',
            data: barChartData,
            options:
            {
                title:
                {
                    display: true,
                    text: "TeamWise Sales Count"
                },
                responsive: true,
                maintainAspectRatio: true
            }
        });
}

Upvotes: 0

Views: 632

Answers (2)

Edward Garcia
Edward Garcia

Reputation: 594

Using your current syntax:

    const string quote = "\"";
    foreach (var team in Db.Teams)
    {
        teamsList.Add(quote + team.Name + quote);
        int count = Db.LeadCampaigns.Count(i => Db.Agents.FirstOrDefault(a => a.AgentId == i.AgentId).TeamId == team.TeamId && i.LeadStatusId == Db.LeadStatuses.FirstOrDefault(s => s.Name == "SALE").LeadStatusId);
        salesCount.Add(count.ToString());
    }

Upvotes: 0

user3559349
user3559349

Reputation:

Your plugin expects an array of values, but your passing it a string by using String.Join().

Pass the array using

ViewBag.SaleCount_List = salesCount;
ViewBag.TeamName_List = teamsList;

(or better pass a view model with 2 IEnumerable<string> properties) and then convert it to a jacascript array

var saleCounts = @Html.Raw(Json.Encode(ViewBag.SaleCount_List))
var teamNames = @Html.Raw(Json.Encode(ViewBag.TeamName_List))
var barChartData =
{
    labels: teamNames,
    datasets: [{
        ....
    ],
    borderWidth: 2,
    data: saleCounts
    }]
};

Upvotes: 1

Related Questions