How can I use Asp.Net Chart control in Asp.Net MVC 3? - asp.net-mvc-3

Question

I know that there is a Chart control comes with the new Helpers library, but it doesn't have the same features as the Asp.Net Charting control. I have to represent a data where on the pie or the bar, I need to have a clickable link on the legend or the label.
I am using Asp.Net MVC 3 Razor and I couldn't tie the Asp.Net Chart control with this feature. I can show the chart but the links are not rendered.
Any suggestions?

Answer 1

You can use ActionResult to render the chart. On the following link is a blog post of Daniel A Hill - Rendering Microsoft .NET 4.0 Charts in ASP.NET MVC
using System;
using System.IO;
using System.Web.Mvc;
using System.Web.UI.DataVisualization.Charting;
namespace Serviscope.Proviso.Web.Code
{
public class ChartActionResult : ActionResult
{
private readonly Chart _chart;
private readonly ChartImageFormat _imageFormat;
public ChartActionResult(Chart chart, ChartImageFormat imageFormat = ChartImageFormat.Png)
{
if ( chart == null ) { throw new ArgumentNullException("chart"); }
_chart = chart;
_imageFormat = imageFormat;
}
public override void ExecuteResult(ControllerContext context)
{
var response = context.HttpContext.Response;
response.Clear();
response.Charset = String.Empty;
response.ContentType = "image/" + _imageFormat;
if ( _imageFormat == ChartImageFormat.Png )
{
// PNG can only write to a seek-able stream
// Thus we have to go through a memory stream, which permits seeking.
using ( var mStream = new MemoryStream() )
{
_chart.SaveImage(mStream, _imageFormat);
mStream.Seek(0, SeekOrigin.Begin);
mStream.CopyTo(response.OutputStream);
}
}
else
{ // If we don't have to provide a seek-able stream, write directly to
// where the data needs to go.
_chart.SaveImage(response.OutputStream, _imageFormat);
}
_chart.Dispose();
}
}
}
and example:
public ActionResult MyChart()
{
// Build Chart
var chart = new Chart()
{
Height = 300,
Width = 400,
BackGradientStyle = GradientStyle.TopBottom,
BackColor = Color.Gray,
BorderSkin = new BorderSkin() { SkinStyle = BorderSkinStyle.Emboss }
};
// Add Chart Area and Set 3-D Settings
chart.ChartAreas.Add(new ChartArea());
chart.ChartAreas[0].Area3DStyle = new ChartArea3DStyle()
{
Enable3D = true,
Perspective = 10,
Inclination = 30,
Rotation = 10
};
// Add Random values
chart.Series.Add(GenerateRandomSeries(10, 10));
chart.Series.Add(GenerateRandomSeries(10, 10));
chart.Series.Add(GenerateRandomSeries(10, 10));
// Return chart object, wrapped in our custom action result
return new ChartActionResult(chart);
}
private static readonly Random RandomPointGenerator = new Random();
private static Series GenerateRandomSeries(int max, int count)
{
var series = new Series();
series.ChartType = SeriesChartType.Line;
for (int x = 0; x < count; x++)
{
series.Points.AddXY(x + 1, RandomPointGenerator.Next(max));
}
return series;
}

Answer 2

You should just create a standard webforms page inside your ASP.NET MVC application.
Scott Hanselman explains how to do that here.