Highcharts multiple charts on a single page using c# asp.net mvc3

Question

I was wondering if it was possible to return multiple charts to a single page/view using c#?

Background Information

C#, ASP.NET MVC3
DotNet.Highcharts Library

Goal: My overall goal is to have a webpage with two charts using ASP.NET MVC3

Example

HighCharts g1 = new HighCharts("chart");
HighCharts g2 = new HighCharts("chart");
return View(model, g1, g2);

This is an example of what I want, but I am not too sure if this is possible. If so how would I accomplish this? If possible how would I output the charts using razor?

Thank you so much for the help, I appreciate it! Please let me know if there are any misunderstandings in the question.

Mathew Thompson · Accepted Answer · 2013-05-07 21:30:43Z

2

Just create a model that holds a List<HighChart> (or add it to your existing model). Something like:

public class ChartsModel
{
    public List<HighChart> Charts { get; set; }
}

Then you can populate the model and send it to the view in your action method, like so:

ChartsModel model = new ChartsModel();
model.Charts = new List<HighChart>();

HighCharts g1 = new HighCharts("chart");
HighCharts g2 = new HighCharts("chart");

model.Charts.Add(g1);
model.Charts.Add(g2);

return View(model);

Then in your view, you can loop round each chart:

@model ChartsModel

@foreach (HighCharts chart in Model.Charts)
{
    @* do your stuff *@
}

answered May 7, 2013 at 21:30

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

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

2 Comments

AustinT Over a year ago

Sweet thank you! So inside the @foreach how do I make it display?

Mathew Thompson Over a year ago

@AustinTruong Isn't it just a div tag with some JS attached? Or do you have something else in there?

José Ricardo Ribeiro · Accepted Answer · 2013-06-01 18:00:13Z

2

If you're only adding two charts you dont need a List.. Just declare in your class for the typed view:

public class ChartsModel
{
   public Highcharts Chart1 { get; set; }
   public Highcharts Chart2 { get; set; }
}

Then your view put @(Model.Chart1) and @(Model.Chart2) where you want...

Important: Charts need diferent names, so in your controller, when you're creating the charts:

HighCharts g1 = new HighCharts("chart1"){ // Note the names
   // definitions
};
HighCharts g2 = new HighCharts("chart2"){
   // definitions
};

ChartsModel model = new ChartsModel();

model.Chart1 = g1;
model.Chart2 = g2;

return View(model);

answered Jun 1, 2013 at 18:00

José Ricardo Ribeiro

7199 silver badges26 bronze badges

Collectives™ on Stack Overflow

Highcharts multiple charts on a single page using c# asp.net mvc3

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related