Change ViewBag to Json array to plot barchart in .net MVC

Question

I am trying to change ViewBag to Json array to plot a chart in .net MVC framework. I try to parse Json based on solution I found previous questions but it displays nothing. My code is below.

Controller

public  ActionResult RimChart()
    {
        List<RimCalcs> listOfCategggories = null;

        Connectors aConn = Connectors.GetInstance();
        listOfCategggories = aConn.GetRimCalc();
        var dates = listOfCategggories.Select(x => x.Date);
        var profits = listOfCategggories.Select(y => y.Rprofit);

        ViewBag.Date = dates;
        ViewBag.profit = profits;

        return View();

    }

Razor View

   <!DOCTYPE HTML>
  <html>
  <head>
  <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
   <script type="text/javascript">

    window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer", {
            title: {
                text: "My First Chart in CanvasJS"
            },
            data: [
                {
                    // Change type to "doughnut", "line", "splineArea", etc.
                    type: "column",
                    dataPoints: [
                        { label: JSON.parse('@Html.Raw(ViewBag.profit)'), y: JSON.parse('@Html.Raw(ViewBag.Date)') },

                    ]
                }
            ]
        });
        chart.render();
    }
</script>
</head>
 <body>
 <div id="chartContainer" style="height: 300px; width: 100%;"></div>
 </body>
 </html>

The content of your viewbag is not JSON. In order to parse the JSON into a JavaScript object, the thing you're parsing first needs to actually be JSON. On the server side you need to serialise your variable to a JSON string, and then store that string in the viewbag — ADyson
– ADyson, Commented May 20, 2019 at 22:05

Alexandre Rodrigues · Accepted Answer · 2019-05-20 23:00:46Z

3

Edited You may want to serialize first and the do the parse

@{
        var profit = JsonConvert.SerializeObject(ViewBag.profit);
        var date = JsonConvert.SerializeObject(ViewBag.Date);
}

 window.onload = function () {

        var chart = new CanvasJS.Chart("chartContainer", {
            title: {
                text: "My First Chart in CanvasJS"
            },
            data: [
                {
                    // Change type to "doughnut", "line", "splineArea", etc.
                    type: "column",
                    dataPoints: [
                        { label: JSON.parse('@Html.Raw(profit)'), y: JSON.parse('@Html.Raw(date)') },

                    ]
                }
            ]
        });
        chart.render();
    }

Or you can Serialize directly on the controller

public  ActionResult RimChart()
    {
        List<RimCalcs> listOfCategggories = null;

        Connectors aConn = Connectors.GetInstance();
        listOfCategggories = aConn.GetRimCalc();
        var dates = listOfCategggories.Select(x => x.Date);
        var profits = listOfCategggories.Select(y => y.Rprofit);

        ViewBag.Date = JsonConvert.SerializeObject(dates);
        ViewBag.profit = JsonConvert.SerializeObject(profits);

        return View();

    }

edited May 20, 2019 at 23:00

answered May 20, 2019 at 22:09

Alexandre Rodrigues

7305 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ADyson Over a year ago

Agreed but I wouldn't use the obsolete JavaScriptSerializer. Even Microsoft stopped using it and started using Newtonsoft.JSON instead as the default serialiser

Alexandre Rodrigues Over a year ago

@ADyson yes you are right, I have edited the answer

NAHEEM OLANIYAN Over a year ago

It works perfectly (convert to array), but the chart is not showing up. Is there an error in my JavaScript code? Am using Canvas.js. I have also tried with Chart.js but the same. I notice that the "data" or y-axis is not populated. Thanks

Alexandre Rodrigues Over a year ago

@NAHEEMOLANIYAN my guess is that you are missing the x value on the dataPoints array, that's why isn't rendering.

Collectives™ on Stack Overflow

Change ViewBag to Json array to plot barchart in .net MVC

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related