How do i display my chart in a view using mvc helpers?

Question

i am using mvc helpers to create a bar graph based on the sum of the hours an employee has worked vs the months. I am using a dropdown list, to filter these charts by the employees name. But i am having a problem, when i click on the dropdownlist the correct chart displays but just the image and not in the page view. How do i fix this? Please help. My method in the controller.

   public ActionResult CharterColumn(string Status)

                {
                    var results = (from c in db.Clockcards select c);




                var groupedByMonth = results
                    .Where(a => a.Name == Status)
                    .OrderByDescending(x => x.Date)
                    .GroupBy(x => new {x.Date.Year, x.Date.Month}).ToList();



                List<string> monthNames = groupedByMonth

                    .Select(a => a.FirstOrDefault().Date.ToString("MMMM"))
                    .ToList();

                List<double> hoursPerMonth = groupedByMonth
                    .Select(a => a.Sum(p => p.Hours))
                    .ToList();


                ArrayList xValue = new ArrayList(monthNames);
                ArrayList yValue = new ArrayList(hoursPerMonth);

                new Chart(width: 800, height: 400, theme: ChartTheme.Blue)
                    .AddTitle("Chart")
                    .AddSeries("Default", chartType: "Column", xValue: xValue, yValues: yValue)
                    .Write("bmp");

                return null;
            }



            public ActionResult Index()
            {

                ViewBag.Status = (from r in db.Clockcards
                    select r.Name).Distinct();


                return View();
            }

My view

    <p>
        @using (Html.BeginForm("CharterColumn", "Chart", FormMethod.Get))
        {
            <b>Search by Full Name:</b><font color="black">@Html.DropDownList("Status", new SelectList(ViewBag.Status), new { onchange = "this.form.submit()" })</font>


        }
    </p>

Ok sorry I didn't get that I thought you were making you own helper. You just need to do the write function on your view not in the controller. — Filip Cordas, Sep 29 '17 at 08:33
You can but I would not recommended it What I would suggest is passing the data xValue and yValue in a model and do the whole chart definition in the UI. This is best for layer separation so if at any point you want to change what charts are you using you won't need to change the controller and the view — Filip Cordas, Sep 29 '17 at 08:44
I tried it not really working out. just moving the .write... :( i shall try what you have talked about next — UPerson, Sep 29 '17 at 09:10

score 1 · Accepted Answer · answered Sep 29 '17 at 09:26

Sorry for the comments I was a bit unclear with what the exact problem was. But I think this is what you want. For the controller

public ActionResult Index() 
        {
            ViewBag.Status = new[] { "A", "B" };

            return View();
        }
//This controller returns an jpeg image you can use bmp but I think this will be better.
        public ActionResult Chart(string status) 
        {
            WebImage image;
            switch (status)
            {
                case "A":
                    image = new Chart(width: 800, height: 400, theme: ChartTheme.Blue)
                    .AddTitle("Chart")
                    .AddSeries("Default", chartType: "Column", xValue: new[] { "A" }, yValues: new[] { 10 })
                    .ToWebImage("jpeg");
                    break;
                default:
                    image = new Chart(width: 800, height: 400, theme: ChartTheme.Blue)
                    .AddTitle("Chart")
                    .AddSeries("Default", chartType: "Column", xValue: new[] { "B" }, yValues: new[] { 20 })
                    .ToWebImage("jpeg");
                    break;
            }

            return File(image.GetBytes(), "image/jpeg");

        }

And the view

<b>Search by Full Name:</b>
<font color="black">
    @Html.DropDownList("Status", new SelectList(ViewBag.Status), new { id="dropdown", onchange = "updateChart()" })
</font>
<img id="chart" src="Chart?status=@ViewBag.Status[0]" />
<script>
    function updateChart()
    {
        var list = document.getElementById('dropdown');
        var value = list.options[list.selectedIndex].value;
        document.getElementById('chart').setAttribute('src', 'Chart?status=' + value);
    }
</script>

You need to provide the source to img tag in html. If you only want to update the image with out doing a round trip to the server you will need to use some javascript. but its really simple it just gets the value from the drop down and sends it to the server. The src is just the path to the controller you can use what ever you want to send. Just remember that you cant use tag helpers in javascript since they are rendered on the server.

Just remember you probably won't have performance issues in you use case but System.Web.Helpers Charts don't scale all that well and so doing everything client side with some javascript chart library is the recommended way for most situations. You can have a look at [syncfusion](https://www.syncfusion.com/products/aspnetmvc)(It has a community license that why I recommend it for you) or some other client UI library. — Filip Cordas, Sep 29 '17 at 11:10

How do i display my chart in a view using mvc helpers?

1 Answers1