Sharepoint 2010 ASP.NET Chart Control 사용하기(Web.config 구성방법)

Download MSChart Control Tool

http://www.microsoft.com/ko-kr/download/details.aspx?id=14422

 

기본 .Net 의 경우에 Web.config 구성하는 방법

http://msdn.microsoft.com/ko-kr/library/dd990785(v=vs.100)

 

Sharepoint 사용시에 Web.config 설정을 하지 않으면 아래와 같이 오류가 발생됩니다.

오류 내용은 아래와 같습니다.

 

요청 형식 ‘GET’에 대한 HTTP 처리기가 없습니다.

 

아래와 같이 Web.config 파일을 구성하셔야 합니다.

<configuration>
   ...
   <system.web>
      ...
      <httpHandlers>
         ...
         <add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false" />
         ...
      </httpHandlers>
      ...
   </system.web>
   ...
  <system.webServer>
    ...
    <handlers>
      ...
      <add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD,POST" path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
      ...
    </handlers>
  ...
  </system.webServer>
  ...
  <appSettings>
    ...
    <add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\Temp\;"/>
    ...
  </appSettings>
</configuration>

 

그리고 IIS에 구성되어야 하는 부분이 있습니다.

appSettings에 설정한 dir 경로가 이미지 출력 경로입니다.

이 경로는 IIS에 가상경로로 설정해야 합니다.

 

 

그런 후 코드에서 ImageLocation을 해당 경로로 설정해 주셔야 합니다.

Chart chrtSalesData = new Chart();
chrtSalesData.ImageStorageMode = ImageStorageMode.UseImageLocation;

chrtSalesData.Legends.Add("Legend");
chrtSalesData.Width = 500;
chrtSalesData.Height = 300;
chrtSalesData.RenderType = RenderType.ImageTag;
string imagePath = "~/_layouts/ChartImg/";
chrtSalesData.ImageLocation = imagePath + "ChartPic_#SEQ(200,30)";
chrtSalesData.Palette = ChartColorPalette.Berry;

그런 후 해당 페이지를 보면 아래와 같이 정상적으로 이미지가 출력 되는 것을 확인 할 수 있습니다.

 

아래는 위의 이미지를 출력하는 코드입니다.

aspx, aspx.cs 코드 첨부하였습니다.

.ASPX

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChartCtlTest.aspx.cs" Inherits="SharePointProject3.Layouts.Charts.ChartCtlTest" DynamicMasterPageFile="~masterurl/default.master" %>

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">

</asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
	<asp:Panel runat="server" ID="pnArea">
	</asp:Panel>
</asp:Content>

<asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
응용 프로그램 페이지
</asp:Content>

<asp:Content ID="PageTitleInTitleArea" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server" >
내 응용 프로그램 페이지
</asp:Content>

.ASPX.CS

using System;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;

using System.Drawing;
using System.Web.UI.DataVisualization.Charting;

namespace SharePointProject3.Layouts.Charts
{
	public partial class ChartCtlTest : LayoutsPageBase
	{
		protected void Page_Load(object sender, EventArgs e)
		{
			Chart chrtSalesData = new Chart();
			chrtSalesData.ImageStorageMode = ImageStorageMode.UseImageLocation;

			chrtSalesData.Legends.Add("Legend");
			chrtSalesData.Width = 500;
			chrtSalesData.Height = 300;
			chrtSalesData.RenderType = RenderType.ImageTag;
			string imagePath = "~/_layouts/ChartImg/";
			chrtSalesData.ImageLocation = imagePath + "ChartPic_#SEQ(200,30)";
			chrtSalesData.Palette = ChartColorPalette.Berry;

			Title chartTitle = new Title("Hockey Unit Inventory", Docking.Top, new Font("Calibri", 12, FontStyle.Bold), Color.FromArgb(26, 59, 105));
			chrtSalesData.Titles.Add(chartTitle);
			chrtSalesData.ChartAreas.Add("Inventory");

			chrtSalesData.Series.Add("Skates");
			chrtSalesData.Series.Add("Gloves");
			chrtSalesData.Series.Add("Helmets");

			chrtSalesData.Series["Skates"].Points.AddY(5);
			chrtSalesData.Series["Skates"].Points.AddY(10);
			chrtSalesData.Series["Skates"].Points.AddY(15);
			chrtSalesData.Series["Skates"].Points.AddY(10);
			chrtSalesData.Series["Skates"].Points.AddY(12);
			chrtSalesData.Series["Skates"].Points.AddY(20);

			chrtSalesData.Series["Gloves"].Points.AddY(2);
			chrtSalesData.Series["Gloves"].Points.AddY(6);
			chrtSalesData.Series["Gloves"].Points.AddY(10);
			chrtSalesData.Series["Gloves"].Points.AddY(18);
			chrtSalesData.Series["Gloves"].Points.AddY(20);
			chrtSalesData.Series["Gloves"].Points.AddY(14);

			chrtSalesData.Series["Helmets"].Points.AddY(20);
			chrtSalesData.Series["Helmets"].Points.AddY(15);
			chrtSalesData.Series["Helmets"].Points.AddY(12);
			chrtSalesData.Series["Helmets"].Points.AddY(13);
			chrtSalesData.Series["Helmets"].Points.AddY(25);
			chrtSalesData.Series["Helmets"].Points.AddY(18);

			chrtSalesData.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
			chrtSalesData.BorderColor = Color.FromArgb(26, 59, 105);
			chrtSalesData.BorderlineDashStyle = ChartDashStyle.Solid;
			chrtSalesData.BorderWidth = 1;
			pnArea.Controls.Add(chrtSalesData); 
			
		}
	}
}

 

이상입니다.

감사합니다.