Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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

Background Information

  1. C#, ASP.NET MVC3
  2. 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.

share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

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 *@
}
share|improve this answer
    
Sweet thank you! So inside the @foreach how do I make it display? –  Austin Truong May 7 '13 at 21:31
    
@AustinTruong Isn't it just a div tag with some JS attached? Or do you have something else in there? –  mattytommo May 7 '13 at 21:32
    
Not too sure, i'll try to figure it out. thanks again! –  Austin Truong May 7 '13 at 21:35
add comment

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);
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.