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>

Answer 1

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="[email protected][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.