rigamonk rigamonk - 1 year ago 153
ASP.NET (C#) Question

Razor - second chart will not display at all

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 Source

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
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download