CODEWITHSUNDEEP
c#asp.netasp.net-mvcrazorcharts
Jonathan Perry
Jonathan Perry

Reputation: 3053

Embedding a pie chart in ASP.NET (Razor syntax)

I'm fairly new to ASP.NET (have been coding in WPF a long time, but new to ASP) and I'm trying to create a dashboard application that shows four pie charts. I've followed the instructions on this link, but I either get a chart on the entire page, or a broken image (as if the <img> source is not valid)

Can someone please explain to me how to achieve this behavior? I just want to display a simple pie chart on my page, that's it.

Thanks! (and sorry if this is a duplicated post, I've found other similar questions but none using the Razor syntax)

EDIT - Here's my code:

Index.cshtml:

<!DOCTYPE html>
<html>
<head>
    <title>Chart Example</title>
</head>
<body>
    <h1>Chart Example</h1>
    <p>
        The following chart is generated by the <em>ChartView.cshtml</em> file, but is shown
        in this page.
    </p>
    <p><img src="ChartView.cshtml" /> </p>
</body>
</html>

My ChartView.cshtml: (located in the same folder as Index.cshtml)

@{
    var myChart = new Chart(600, 400)
       .AddTitle("Employees")
       .AddSeries(chartType: "column",
          xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
          yValues: new[] { "2", "6", "4", "5", "3" });

    if (myChart != null)
    {
        myChart.Write();
    }
}

This is what I get on the browser: enter image description here

Upvotes: 1

Views: 3840

Answers (2)

Shlomi.y27
Shlomi.y27

Reputation: 41

you easely can combine http://morrisjs.github.io/morris.js/index.html in mvc (razor syntax)

or you can use chart helper

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

change to:

@{
    var myChart = new Chart(600, 400)
       .AddTitle("Employees")
       .AddSeries("SomeName",chartType: "Pie",
          xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
          yValues: new[] { "2", "6", "4", "5", "3" });

    if (myChart != null)
    {
        myChart.Write();
    }
}

you have to lunch it in iis or some development server

Upvotes: 1

fdomn-m
fdomn-m

Reputation: 28611

You can't return a .cshtml file (unless you fiddle dangerously with various internal settings - not recommended).

You should be pointing to an action.

The easiest way to test this is by opening the src directly in the browser - in this case "ChartView.cshtml" and you should get a 404.

You'll need to add an action to your controller that returns the view.

public HomeController : Controller 
{
    public ActionResult ChartView() 
    { 
        return View();
    }

then

<img src='@Url.Action("ChartView", "Home")' alt="Chart"/>

You can test this by opening in the browser:

/Home/ChartView

(this assumes that ChartView.cshtml is in the folder "Views/Home")

As you're new to MVC, quick explanation. There a 'routeConfig.cs' which routes incoming urls to an action(method) on a controller(class). The controller loads the view (cshtml) and applies all the server-side code then returns the rendered html to the user.

You do not navigate directly to cshtml pages but navigate instead to actions via the url.

The default route config gives you urls such as: 

http://[site]/[controller]/[action]

Note that [controller] does not include "Controller", so "HomeController" becomes "/Home/"

Also, by convention, if you don't specify a view name in 'View()' then it will look in your solution folder "/Views/[controller]/[action].cshml' (among other locations such as '/Views/Shared/[action].cshtml' (also configurable, but these are the defaults).

Upvotes: 3

Related Questions