Question

So I was trying out the Chart helpers in the System.Web.Helpers namespace.

according to http://www.asp.net/web-pages/tutorials/data/7-displaying-data-in-a-chart

I make the chart in a .cshtml view but I wanted to keep it in the ViewModel instead.

No problem except for when I’m trying to render it as a smaller image in the website.

I thought the cleanest solution would be to create one shared partial view to render graphs from models

_graph.cshtml

@model System.Web.Helpers.Chart

@Model.Write()

And then render this partial view somehow in the proper websites. I tried a few versions but can’t seem to get it to work.

Website.cshtml

<div>
    <h2>Some header above a graph</h2>
    <img src="@Html.Partial("_graph", Model.TheChart)" />
</div>

This doesn’t work and I’m not certain how to do this. Only think I can think of now is making all models with charts inherit an Interface that exposes Chart and let that be the model for _graph.cshtml.

<img src="_graph.cshtml" />

But not sure if the this uses the Model.

Any opinions?

Answer 1

<div>
    <h2>Some header above a graph</h2>
    <img src="@Url.Action("DrawChart")" />
</div>

and then you could have a controller action:

public ActionResult DrawChart()
{
    MyViewModel model = ...
    return View(model);
}

and a corresponding view that will draw the chart (DrawChart.cshtml):

@model MyViewModel

@{
    // TODO: use the data from the model to draw a chart

    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Chart Title")
        .AddSeries(
            name: "Employee",
            xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" },
            yValues: new[] { "2", "6", "4", "5", "3" })
        .Write();
}

and the rendered result:

---