display charts using MVC, .net c#

Question

I'm trying to display some charts on my mvc app but I'm having some errors. I'm developing in localhost. I have one cshtml file named ReportChart

@{
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 another file that use that chart:

<body>
<h1>Chart Example</h1>
<p>The following chart is generated by the <em>ReportChart.cshtml</em> file:</p>
<p><img src="ReportChart.cshtml" alt="Cricketers" /> </p>

The only problem is that the webpage doesn't display any image :/

@RobertHarvey i used this site to follow my code asp.net/web-pages/tutorials/data/7-displaying-data-in-a-chart — tiagocarvalho92
– tiagocarvalho92, Commented Sep 27, 2014 at 17:15
Does ReportChart.cshtml display a chart if you open it directly in the browser? — Robert Harvey
– Robert Harvey, Commented Sep 27, 2014 at 17:20
Ah, now I'm getting it. ReportChart.cshtml is not actually an image. You're trying to render a file as an image that is not an image. — Robert Harvey
– Robert Harvey, Commented Sep 27, 2014 at 17:21
..Although that's exactly what the tutorial you linked says to do. Sorry, but I'm stumped. — Robert Harvey
– Robert Harvey, Commented Sep 27, 2014 at 17:24

Yoda · Accepted Answer · 2014-09-27 17:40:54Z

5

No it won't work in MVC. You should create chart in the controller action method:

 //I CUT THE CODE WHERE I construct string[] t1 and int[] t2 these are just arrays
  public ActionResult EfficiencyChart(string pid) {



            var myChart = new Chart(width: 1000, height: 600)
            .AddTitle("Employee's Efficiency")
            .AddSeries(
                name: "Employee",
                xValue: t2,
                yValues: t1)
            .Write();

            myChart.Save("~/Content/chart" + user.Id, "jpeg");
            // Return the contents of the Stream to the client
            return base.File("~/Content/chart" + user.Id, "jpeg");
        }

Then in the Razor view:

<img src="@Url.Action("EfficiencyChart", "NAME_OF_THE_CONTROLLER", new { pid = @Model.Id })" />

answered Sep 27, 2014 at 17:40

Yoda

18.2k72 gold badges218 silver badges369 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tiagocarvalho92 Over a year ago

just one more question, if i want o query the db, i should do that in my controller?

Yoda Over a year ago

@user2002274 Yes. If you want to fetch data directrly from db(through DbContext) it should be done in controller.

tiagocarvalho92 Over a year ago

this works fine but the only problem is that this open one image.. i want to have my layout, and a couple of charts inside my layout with hiperlinks, and other stuff.. how can i do that?

bashkan · Accepted Answer · 2014-09-27 17:46:19Z

1

try it,

 <p><img src="@Url.Action("ReportChart")" alt="Cricketers"  /> </p>

      public ActionResult ReportChart()
            {
                return PartialView();
            }

answered Sep 27, 2014 at 17:46

bashkan

4641 gold badge5 silver badges14 bronze badges

Collectives™ on Stack Overflow

display charts using MVC, .net c#

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related