Create a chart inside a PartialView MVC3

Mar 31, 2012 at 10:18 AM

Hi,

I'm new on Highcharts and I would like to insert multiple graphs in my ASP.NET MVC3 application. I'm using Razor View Engine.

I don't understand how to insert the graph inside a partial view.

Considering that my homepage is already modelled with another class, I would like to call inside the homepage, also the partial view modelled with Highchart.... could someone help me on this?  

How can I call the controller that actually creates the chart and then show the chart on the view?

Thanks in advance.

Coordinator
Apr 5, 2012 at 11:09 PM

In order to render the Highchart inside a partial view, first create an action method for it and pass the chart as a model:

 

public ActionResult PartialChart()
{
        DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart")
        .SetXAxis(new XAxis
                    {
                        Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }
                    })
        .SetSeries(new Series
                    {
                        Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 })
                    });

    return PartialView(chart);
}

 

Then create the partial view and the following code:

@model DotNet.Highcharts.Highcharts

@(Model)

Call the partial view like:

@Html.Action("PartialChart", "Home")

 

 

 

Marked as answer by Vangi on 10/24/2013 at 2:57 AM