ASP.Net MVC Chart Control - Create Multiple Charts

Question

I would like to create multiple charts dynamically within my controller. When I instantiate a new Chart control in my for each it renders a blank chart. I am wondering what can be done to allow me to create and populate multiple charts on one page with the code below.

 public ActionResult BuildChart()
    {
        var chart = new System.Web.UI.DataVisualization.Charting.Chart()
        {
            Width = 576,
            Height = 100,
            BackColor = System.Drawing.Color.White,
        };

        GetPersonas();
        GetSenarioVoting();
        List<CIEToolRole.Models.ScenarioModel> scenarios = GetSenarioVotingResults();

        int i = 0;

       foreach (ScenarioModel scenario in scenarios)
       {
           chart = new System.Web.UI.DataVisualization.Charting.Chart()
           {
               Width = 576,
               Height = 100,
               BackColor = System.Drawing.Color.White,
           };

           chart.ID = "Chart" + i;

           Series mySeries = new Series();
           mySeries.ChartType = SeriesChartType.Column;

           mySeries.BorderWidth = 1;
           mySeries.Palette = ChartColorPalette.Chocolate;
           mySeries.Name = "series" + i;

               List<int> voteVal = scenario.Votes.Select(p => p.Value).ToList();

               foreach (int vote in voteVal)
               {
                   DataPoint point = new DataPoint();
                   point.YValues = new double[] { vote };
                   mySeries.Points.Add(point);
               }


           chart.Series.Add(mySeries);

           i++;
       }

        ChartArea ca1 = new ChartArea("ca1");
        ca1.BackColor = System.Drawing.Color.LightGray;
        ca1.AxisY.LineColor = System.Drawing.Color.LightBlue;
        chart.ChartAreas.Add(ca1);

        var imgStream = new System.IO.MemoryStream();
        chart.SaveImage(imgStream, ChartImageFormat.Png);
        imgStream.Seek(0, System.IO.SeekOrigin.Begin);

        return File(imgStream, "image/png");
    }

snowYetis · Accepted Answer · 2013-09-23 17:52:52Z

After some trial and error I was able to come up with a solution that did not require a partial view.

Controller

 public ActionResult BuildChart(int scenarioID)
    {
        var chart = new System.Web.UI.DataVisualization.Charting.Chart()
        {
            Width = 576,
            Height = 100,
            BackColor = System.Drawing.Color.White,
        };



        GetPersonas();
        GetSenarioVoting();
        List<modelstuff.Models.ScenarioModel> scenarios = GetSenarioVotingResults();

        int x = 0;

        var scenarioById = scenarios.FirstOrDefault(p => p.ID == scenarioID).Votes;

        Series mySeries = new Series();
        mySeries.ChartType = SeriesChartType.Column;

        mySeries.BorderWidth = 1;
        mySeries.Palette = ChartColorPalette.Chocolate;
        // Making a unqiue series ID
        Guid guido = new Guid();
        mySeries.Name = guido.ToString();

        foreach (int vote in scenarioById.Values)
        {
            DataPoint point = new DataPoint();

            point.YValues = new double[] { vote };
            mySeries.Points.Add(point);
        }

        chart.Series.Add(mySeries);

        ChartArea ca1 = new ChartArea("ca1");
        ca1.AxisX.LabelStyle.Enabled = false;
        ca1.AxisY.LabelStyle.Enabled = false;
        ca1.BackColor = System.Drawing.Color.LightGray;
        ca1.AxisY.LineColor = System.Drawing.Color.LightBlue;
        chart.ChartAreas.Add(ca1);

        var imgStream = new System.IO.MemoryStream();
        chart.SaveImage(imgStream, ChartImageFormat.Png);
        imgStream.Seek(0, System.IO.SeekOrigin.Begin);

        return File(imgStream, "image/png");
    }

View

 foreach (modelstuff.Models.ScenarioModel scenario in ViewBag.Scenarios)
               { %>
               <li class="<%= i % 2 == 0 ? "row" : "altRow" %>" data-       rowid="<%= "scenario" + scenario.ID%>">
                <div class="chartcol1">
                    <span class="charttoolTipTitle"><%= scenario.Name%></span>
                </div>
                <div class="chartcol">
                    <%= Html.Chart(
                    "BuildChart",
                    "Home",
                    new 
                    {
                        scenarioID = scenario.ID
                    },
                    new
                    {

                        style = "width: 576px; height:100px;",

                    }) %>

Collectives™ on Stack Overflow

ASP.Net MVC Chart Control - Create Multiple Charts

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related