Tuesday, April 27, 2010

Fusion Chart in Sharepoint

Walkthrough: Creating a Basic SharePoint Fusion Chart Web Part and its features (Note: Before Starting Application Download the following files from Fusion Chart Website:"http://www.fusioncharts.com/Download.asp"
InfoSoftGlobal.dll (Fusion Chart dll)

Step 1: Create a Web Control Library project
Web Parts are based on ASP.NET Web Form Controls. You create Web Parts in Microsoft Visual C# by using the ASP.NET Web Control Library template.
To create a new Web Control Library project
1. Start Visual Studio 2005/2008.
2. On the File menu, point to New, and then click Project.
3. In the New Project dialog box, click Visual C# Projects, and then select the Web Control Library template.
4. Type BasicWebPart as the name and specify the location for the project files, and then click OK.

Step 2: Add a Reference to Microsoft.SharePoint.dll and Fusion Chart dll
To create a Web Part, you need to add a reference to the Microsoft.SharePoint assembly (Microsoft.SharePoint.dll) in your Web Control Library project.

To add a reference to Microsoft.SharePoint.dll
1. On the Project menu, right click Add Reference.
2. On the .NET tab, double-click Windows SharePoint Services.
3. Click OK.
To add a reference to InfoSoftGlobal.dll (Fusion Chart dll)
1. On the Project menu, right click Add Reference.
2. On the Browse tab, Select Fusion Chart dll i.e. InfoSoftGlobal.dll.
3. Click OK.
To add a reference to System.Web.dll
1. On the Project menu, right click Add Reference.
2. On the .NET tab, double-click System.Web.
3. Click OK.
Step 3: Rename the Class and Namespace
If you are creating multiple Web Parts, you should generally use the same namespace across all of your Web Parts. By default, the Web Control Library assigns the namespace the same name as your project. For this example, we are using the arbitrary namespace of BasicWebPart.
To Create the class
1. Delete the class1.cs file.
2. Right Click on project and click Add >> New item
3. Select class file, Write the name BasicWebPart.cs and select Add button.
4. Create Strong Name using sn.exe command.

Step 4: Create the 12 hive Structure
• Create the 12 hive TEMPLATE Strcuture. Like this.

• Add two xml files name as feature.xml and elements.xml file to install your webpart feature on your cite.

• Inside feature.xml file Write this code

(Note: Id is your Unique Guid)

• In elemets.xml file Write this code-

• Under The FEATURES >> BasicWebPart >> DWP Create the “BasicWebPart.dwp” file.

Write this code inside the BasicWebPart.dwp file.

• Create one IMAGES Folder inside the TEMPLATE Folder
Copy the downloaded “Column3D.swf” fusion chart file file and “FusionCharts.js” file into image folder

Step 5: Create “install.bat” file
• On the Project menu, right click Add >> New Items.
• Select Text File, Rename as install.bat.
• Click Add.
• Under The install.bat file write following code-

REM - Update this path to bin directory target Web Application
@SET BINDIR="C:\Inetpub\wwwroot\wss\VirtualDirectories\46466\bin"
xcopy /e /y bin\Debug\*.* %BINDIR%

@SET TEMPLATEDIR="c:\program files\common files\microsoft shared\web server extensions\12\Template"

@SET STSADM="c:\program files\common files\microsoft shared\web server extensions\12\bin\stsadm"
%STSADM% -o installfeature -filename BasicWebPart\feature.xml -force
REM %STSADM% -o activatefeature -filename BasicWebPart\feature.xml -force -url http://localhost

REM cscript c:\windows\system32\iisapp.vbs /a "SharePointDefaultAppPool" /r

Note: Instead of “46466” write the port number of your site.

• Goto Project Properties, and Select Build Events tab
inside the Post-build Event Command line write the following code.

cd $(ProjectDir)

Step 6: Copy The Following Code to your class file

using System;
using System.Web;
using System.Text;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebPartPages;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using InfoSoftGlobal;
using System.Web.UI;

namespace BasicWebPart
public class BasicWebPart : Microsoft.SharePoint.WebPartPages.WebPart
Button saveTitle;
Literal mychart;
protected override void RenderWebPart(System.Web.UI.HtmlTextWriter output)
public void saveTitle_click(object sender, EventArgs e)
Page.Response.Write("<script language='Javascript '
src='~/_layouts/images/FusionCharts.js'></script> ");

StringBuilder chartdata = new StringBuilder();
chartdata.Append("<chart caption='Monthly Unit Sales' xAxisName='Month'
yAxisName='Units' showValues='0' ");
chartdata.Append("formatNumberScale='0' showBorder='1'>");
chartdata.Append("<set label='Jan value='462' />'");
chartdata.Append("<set label='Feb' value='857' />");
chartdata.Append("<set label='Mar' value='671'/>");
chartdata.Append("<set label='Apr' value='494' />");
chartdata.Append("<set label='May' value='761'/>");
chartdata.Append("<set label='Jun' value='960'/>");
chartdata.Append("<set label='Jul' value='629' />");
chartdata.Append("<set label='Aug' value='622'/>");
chartdata.Append("<set label='Sep' value='376'/>");
chartdata.Append("<set label='Oct' value='494'/>");
chartdata.Append("<set label='Nov' value='761'/>");
chartdata.Append("<set label='Dec' value='960'/>");
newchart.Text = FusionCharts.RenderChartHTML("~/_layouts/images/Column3D.swf", "", newchart.ToString(), "myFirst", "600", "300", false);
catch (Exception ex)
protected override void CreateChildControls()
saveTitle = new Button();
saveTitle.Text = "Generate Chart";
saveTitle.Click += new EventHandler(saveTitle_click);

Step 7: After that Copy the project dll file
• After writing code build the project and copy this BasicWebPart.dll in your site inside bin folder or install dll in GAC.

Step 8: Add Safecontrol and Increase trust level
• Open Site Web Config file in Visual Studio.
• In web config file add Safe Control tag.
• If your dll is in your site bin folder then write this.

SafeControl Assembly="BasicWebPart" Namespace="BasicWebPart" TypeName="*" Safe="True" />

• Change trust level in webconfig Wss_minimual to Full.After the ending tag write the following line.
trust level="Full" originUrl="" />

Step 9: Activate your Web Part
• Goto the Site Action, Click on Site Settings.

• After that Screen Appear like that-

• Select “Site Collection Features” and Activate your Webpart.

Step 9: Add your Web Part into your Page-
Add your Web Part
1. Navigate to the page on your SharePoint site where you want the Web Part to be accessible.
2. Navigate to the Web Part page. In the Web Part page, click Site Actions, and select Edit Page.

3. In your preferred zone, click Add a Web Part and check the box next to BasicWebPart in the dialog box. Click Add.
4. After the Web Part is added to the zone, Click “Exit Edit Mode".
5. Click On “Generate Chart” Button.

Thank You...

No comments:

Post a Comment