How to render a Chart object in a view in MVC3
Tech-Today

How to render a Chart object in a view in MVC3


I was working on a project that requires showing a graph, fortunately there's already a built in graph helper in mvc3: http://www.asp.net/web-pages/tutorials/data/7-displaying-data-in-a-chart.

Tried the tutorial in link above and was able to display the graph, but I've encountered a problem, I would like to show the graph inside a tabpanel, wherein tab1 = grid, tab2 = graph.

Unfortunately, there's no other way but to issue another http request that will call an action method from a controller to return a FileContentResult, or could be set to write an image in the stream. I chose the latter. In my case I need to execute a query against the database for the grid and for the graph, of course we don't want to execute 2 queries so the solution is to store the image in a cache assign a unique key, save in a ViewBag(key) and retrieve/render the image in a view.


First Controller, where we store the graph in the cache and refer to it later via a random key.

public ActionResult Search() {
var chart = new Chart(width: 600, height: 500)
.AddSeries(
chartType: "bar",
xValue: new[] {"10 Records", "20 Records", "30 Records", "40 Records"},
yValues: new[] {"50", "60", "78", "80"});

var r = new Random();
ViewBag.GraphKey = r.Next().ToString();
chart.SaveToCache(ViewBag.GraphKey, 1, false);
return View();
}
Controller that will retrieve the image via the unique key

public ActionResult CustomReport(string key)
{
var chart = Chart.GetFromCache(key);
chart.Write("png");
return null;
}
The View, this will render the image:

<img src="@Url.Action("CustomReport", "Graph", new { key = ViewBag.GraphKey })" />
And that's it :-)




- How To Implement An Image Streamer For Primefaces Graphicimage Component
This page provide code samples for using primefaces graphic image component. In this case we are assuming that the byte data of an image is stored in an entity and that entity is access by its id. See the param id in #1. The param id is read by the streamer...

- Simple To-do List Using Core Data In Swift
Note: The steps 1-9 are all simply about setting-up the controllers. The main "core data" begins the next step after. Here's the finish project from step-1 to step-9. 1.) First, for us to have a better view, we have to disable the size classes....

- How To Resize An Image From Database Or File Using Php
This implementation is done using php. Usually we resize image that we read from a local file, then save it locally. Flow: 1.) read from local image file and store in a php variable 2.) resize the image file using php functionalities 3.) save...

- Adding Loading Screen To C# Mvc Ajax Dialog Form Using Jquery
With my experience from telerik, I want my entity's add and edit form to be a popup so I don't have to change screen. I'm using C# MVC3, so I tried to look for jquery add on that would do the job. Fortunately I've come up with this article:...

- Iphone Xcode - Create A Simple Uiscrollview
Finally getting acquainted with iPhone's xcode. Now I'll build a simple window base application to demo the UIScrollView features. 1.) Create a new window base application, named it MyScroll. It should create 2 files: a.) MyScrollAppDelegate.h...



Tech-Today








.