DotnetHighCharts - Multiple Charts positioned on one page

Question

I have to display 3 charts, as part of a dashboard, on one page.

The dotnetHighCharts demo project does include a "How to" for multiple charts. This however seems to assume that the charts will simply be placed below each other. My View has quite a bit of html formatting where I want to render the charts in containers.

So in my Controller I have:

public ActionResult Dashboard()
    {
        Highcharts chartLine = Chart_Line();
        Highcharts chartPie = Chart_Pie();

        return View(new Container(new[] { chartLine, chartPie }));
    }

But instead of simply having this in my View:

@model DotNet.Highcharts.Container

@(Model)

I have to place the specific the charts on specific locations of my page. So in my view I would have liked to do something like @(Model[1]) to display to display the 1st chart etc.

I also tried creating a viewmodel:

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

Hoping that I would be able to do this in my View:

<div> @model.Chart1 </div>

But that also doesn't seem possible.

Anyway I can display multiple DotNetHighCharts on one page, while keeping control where to place them in the View?

Answer 1

Controller

public ActionResult Dashboard()
{
    //NOTE: chart names must be unique!
    Highcharts chartLine = Chart_Line();
    Highcharts chartPie = Chart_Pie();
    Highcharts chartColumn = Chart_Column();

    var charts = new ChartsModel
    {
        Chart1 = chartLine,
        Chart2 = chartPie,
        Chart3 = chartColumn 
    }

    return View(charts);
}

View

@model ChartsModel

<div>@Model.Chart1</div>
<div>@Model.Chart2</div>
<div>@Model.Chart3</div>

in your Chart_Line() method, when you create the Highcharts , you should set the unique name of chart ,

for example:

Highcharts chart = new Highcharts("uniqueId")