ASP.NET Chart Controls with ASP.NET MVC

.NET Framework 4부터 Chart Control이 추가되었습니다. .NET Framework 3.5에서도 Install 파일 설치를 통해 Chart Control을 사용할 수 있습니다. Chart Control은 매우 유려하고 강력함에도 불구하고 ASP.NET WebForm과 Windows Application만 지원하고 있습니다. 하지만 ASP.NET MVC에서 사용할 수 있는 방법이 존재하며, 여기에선 ASP.NET MVC를 기준으로 Chart Control에 대한 정리를 드리고자 합니다.

Chart Control의 필요성

일단 Chart Control을 왜 써야 하는지 핵심목적은 다음과 같으며, MS의 Chart Control은 이 목표에 완벽하게 부합합니다.

• 복잡한 수식/통계 정보를 기술적 분석이 용이하도록 시각적 형태로 변환하는 목적
• 정보를 시각적으로 표현하여 동향과 흐름, 추세를 쉽게 파악하고 예측하는데 도움을 줄 수 있다
• 재무정보, 방문자정보 등의 분석 및 통계정보에 대표적으로 사용

Web에서 Chart Control의 종류/비교

MS의 Chart Control을 사용하기 이전에, 그 외 사용 가능한 대안은 Third Party Chart컨트롤을 이용하는 것인데 그 중에서도 크게 부각되는 Javascript/HTML5 Chart와 비교해보면 장단점은 아래와 같습니다.

구분	Server Side	Client Side
구현	Server Side에서 Image를 생성하여 표현하는 것이 일반적	Javascript 또는 HTML5(Canvas, SVG)를 활용하여 표현
장점	Client에 높은 호환성을 가진 차트를 출력하며, 구현이 단순하고 쉽다.	서버에 낮은 부하를 주거나 거의 주지 않으며 Javascript를 통하여 굉장히 동적인 구성이 가능하다.
단점	서버에 좀 더 높은 부하를 주며, 이미지로 출력하는 경우가 많기 때문에 정적이다.	Javascript는 개발비용이 높고 HTML5는 Client Side에 대한 호환성이 떨어지며, 둘다 모두 상대적으로 코드가 분산되고 복잡성이 높은 편이다.
예제	http://www.codeproject.com/Articles/235117/ASP-NET-Chart-Control	http://omnipotent.net/jquery.sparkline

ASP.NET Chart Controls의 특징

• 35가지 차트 유형 제공
• 3D차트지원, 높은 스타일링 및 레이아웃 자유도 지원
• C#을 통한 강력한 개발 Performance
• Click 이벤트 지원 및 Tooltip을 통한 Chart Drill-down 지원

How to use with ASP.NET MVC

1. 다음 Reference를 프로젝트에 추가합니다.
   System.Web.UI.DataVisualization.Charting
2. 다음과 같이 Chart Control을 출력하는 Action을 작성합니다.

   public ActionResult ChartImage(SeriesChartType? chartType, int numberOfValue = 5, int numberOfSeries = 2)
   {
       Chart chart = new Chart();
   
       Title title = new Title("Price enquiries", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));
       chart.Titles.Add(title);
       chart.ChartAreas.Add("ChartArea 1");
   
   
       chartType = chartType == null ? chartType = SeriesChartType.Area : chartType;
       numberOfSeries = numberOfSeries > 0 ? numberOfSeries : 2;
       numberOfValue = numberOfValue > 0 ? numberOfValue : 5;
       Random rnd = new Random(Guid.NewGuid().GetHashCode());
       for (int i = 0; i < numberOfSeries; i++)
       {
           chart.Series.Add(new Series("Series" + i) { ChartType = chartType.Value }); //계열
           Dictionary<DateTime, int> dataSource = new Dictionary<DateTime, int>();
           for (int j = 0; j < numberOfValue; j++)
           {
               dataSource.Add(DateTime.Now.AddDays(j), rnd.Next(1, 50));
           }
           chart.Series["Series" + i].Points.DataBind(dataSource, "Key", "Value", string.Empty);
       }
   
       chart.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
       chart.BorderColor = System.Drawing.Color.FromArgb(26, 59, 105);
       chart.BorderlineDashStyle = ChartDashStyle.Solid;
       chart.BorderWidth = 2;
   
       chart.Legends.Add("Legend1"); //범례
   
       chart.Width = 400;
       chart.Height = 200;
       chart.BackColor = Color.White;
   
       byte[] image;
       using (MemoryStream stream = new MemoryStream())
       {
           chart.SaveImage(stream, ChartImageFormat.Png);
           image = stream.ToArray();
       }
       return File(image.ToArray(), MimeMapping.GetMimeMapping(".png"));
   }

3. View에서 작성한 Action을 출력합니다.

   <img src="@Url.Action("ChartImage")" />

4. 결과 이미지
    

System.Web.Helpers를 이용한 방법

System.Web.Helpers에서도 간단히 Chart를 생성할 수 있도록 지원하고 있습니다. 하지만, 간단한 만큼 Styling이나 Chart Type에 대한 지원이 상당히 제안적입니다.

public ActionResult ChartImage()
{
    Chart chart = new Chart(400, 200, ChartTheme.Blue)
        .AddTitle("Price enquiries")
        .DataBindTable(data, "X");
    chart.Write("png");
    return null;
}

References

• MSDN - Chart Controls:
  http://msdn.microsoft.com/en-us/library/dd456632%28v=vs.110%29.aspx
• ScottGu's Blog - New ASP.NET Charting Control:
  http://weblogs.asp.net/scottgu/archive/2008/11/24/new-asp-net-charting-control-lt-asp-chart-runat-quot-server-quot-gt.aspx
• MSDN - ChartTypes:
  http://msdn.microsoft.com/en-us/library/dd489233%28v=vs.110%29.aspx
• MSDN - Chart Class:
  http://msdn.microsoft.com/en-us/library/system.web.helpers.chart%28v=vs.111%29.aspx
• Guide - How to use ASP.NET Chart Controls with ASP.NET MVC :
  http://blogin.codeinside.eu/2008/11/27/howto-use-the-new-aspnet-chart-controls-with-aspnet-mvc/
• Microsoft - Samples and documents:
  http://archive.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=4418