Razor - second chart will not display at all

Question

I have a project using the basic ASP.Net MVC framework in VS 2015. I have 2 charts on a page, and the second chart does not display at all.

The partial page conatining 2 charts:

@model KPITest.Models.HotscaleMainKpi

<div>
    @{
        Chart _hotscaleLarge = new Chart(width: 600, height: 400, theme: ChartTheme.Green);
        _hotscaleLarge.AddTitle("Hot Scale Production");
        _hotscaleLarge.AddSeries("Default",
            xValue: new[]{DateTime.Now}, xField: "Date",
            yValues: new[]{Model.TotalHotscale}, yFields: "Processed");
        _hotscaleLarge.Write();

        Chart _hotscaleHPI = new Chart(width: 600, height: 400);
        _hotscaleHPI.AddTitle("Hot Scale Head/Hour");
        _hotscaleHPI.AddSeries("Heads/Hour",
        xValue: new[] { DateTime.Now.ToLocalTime() }, xField: "Date",
        yValues: new[] { Model.HeadPerHour }, yFields: "Head/Hr");
        _hotscaleHPI.Write();

    }
</div>

So, 1: Why won't the second chart display on the page?

Answer 1

It is not your second chart, but any item you add to your view(ex : a textbox) won't be visible. Because the Chart.Write method will convert the chart object to a jpg and write to the output stream.

What you should do is create separate action methods for your 2 charts and use that as the image source in your main view.

public ActionResult Chart1()
{
  return View();
}
public ActionResult Chart2()
{
  return View();
}

And in your Chart1.cshtml

@{
    Chart _hotscaleLarge = new Chart(width: 600, height: 400, theme: ChartTheme.Green);
    _hotscaleLarge.AddTitle("Hot Scale Production");
    _hotscaleLarge.AddSeries("Default",
        xValue: new[]{DateTime.Now}, xField: "Date",
        yValues: new[]{12}, yFields: "Processed");
    _hotscaleLarge.Write();


}

and in your Chart2.cshtml

@{
    Chart _hotscaleHPI = new Chart(width: 600, height: 400);
    _hotscaleHPI.AddTitle("Hot Scale Head/Hour");
    _hotscaleHPI.AddSeries("Heads/Hour",
    xValue: new[] { DateTime.Now.ToLocalTime() }, xField: "Date",
    yValues: new[] { 23 }, yFields: "Head/Hr");
    _hotscaleHPI.Write();
 }

Replace the hard coded values with real values from your model. You just need to pass a view model fro your action method to view ( see the link at the bottom for detailed sample)

Now in your main view, you can have 2 image tags and call these 2 action methods for the image source

<img src="@Url.Action("Chart1","Home")" alt="Some alt text" />
<img src="@Url.Action("Chart1","Home")" alt="Some alt text" />

If both of your charts are same in everything except the y axis data, you can use the same action method and pass different set of data.

Some links for more reference

1. Passing Chart Series from Controller to Razor View