Virtual techdays INDIA │ 9-11 February 2011 Building rich data visualizations using SharePoint and...

virtual techdaysINDIA │ 9-11 February 2011

Building rich data visualizations using SharePoint and ASP.NET Web Parts

Himani Sharma│ Support Engineer, SharePoint Development, Microsoft IGTSC

What is Data Visualization Advantages Significance Rich data visualization components

SharePoint OOB visualizations Performance Point Services Alternatives

SharePoint and ASP.NET web parts MS Chart Controls for RDVs Demo


S E S S I O N A G E N D A

Definition Graphical representation of data/information. Idea communicated more effectively. Helps analyzing the data and make effective decisions. Provides useful insights.

Advantages Large amount of complex data can be presented in a simplified format. Information can be readily absorbed and understood well. Provides concise overview.


What is Data Visualization

Examples:



Significance Legacy data/large amount of data in information systems like DBs, SharePoint lists,

warehouses can be analyzed and presented. Provides business intelligence at a low cost. Data is summarized, actionable and more personalized. Dynamic views can help us drill up/down, filter the data.

Rich Data Visualization components Business Intelligence data, maps based data, customer/products based data. Rich data grids, dashboards, Maps, Charts, Graphs, reporting tools like SSRS, cube, Pivot

views etc.




Data Visualization in SharePoint

Performance Point Services Enables to collaborate, discover and manage information. Provides business insights to help make informed decisions. Helps monitoring performance. Helps building reports and provides analytic views. Used to creates Rich interactive dashboards.

Rich Data Visualization components Provides OOB webparts and components for RDVs. Include scorecards, KPI lists, excel service reports, report viewer, charts. Data can be sourced from SP lists, excel services, analysis services.


Business Intelligence Centre

Alternatives? PPS available only with enterprise license of SPS 2010. For SharePoint Foundation we need to look for alternatives. Use codeplex. Third party RDV providers like Bamboo solutions, Component One etc (paid). Build your own data visualizations using ASP.NET web parts.



MS Chart controls Enables to build robust charting capabilities to your applications. Little effort involved. Simple, visually appealing, interactive and dynamic visualizations can be built. Support all chart types like columns, bars, line charts, graphs, pie charts, doughnuts etc. Support data series, axes, legends, labels, title tec. Can be highly customized. Data binding supported. Support 3D chart rendering, aliasing, Ajax etc.


Rich data visualizations using ASP.NET webparts

Integration with SharePoint The ASP.NET webparts can be hosted on SharePoint. Information/data from disparate environments can be pulled and shown on dashboards. Charts can be dynamic and interactive.


Rich data visualizations using ASP.NET webparts


DEMO: DemoChartCreation

Himani Sharma │ Support Engineer, Microsoft IGTSC

MS Charting controls - http://code.msdn.microsoft.com/mschart. <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" />

<System.Webserver><handlers><add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD" path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

<appsettings><add key="ChartImageHandler" value="Storage=file;Timeout=20;Url=~/tempImages/;" />


DEMO

How to begin

http://code.msdn.microsoft.com/mschart


<asp:Chart ID="Chart2" runat="server" ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)"Palette="BrightPastel" ImageType="Png" BorderlineDashStyle="Solid" BackSecondaryColor="White" BackGradientStyle="TopBottom" BorderWidth="2" BackColor="#D3DFF0" BorderColor="26, 59, 105"> <Series> <asp:Series Name="Series1"> </asp:Series> </Series> <ChartAreas> <asp:ChartArea Name="ChartArea1"> </asp:ChartArea> </ChartAreas></asp:Chart>


DEMO

Code

SPListItemCollection itmColl = list.GetItems(query); DataTable table = itmColl.GetDataTable();

Chart1.DataSource = table; Chart1.Series["Series1"].XValueMember = "ProductName"; Chart1.Series["Series1"].YValueMembers = "ProductQuantity"; Chart1.Series["Series1"].ChartType = SeriesChartType.Column; Chart1.Series["Series1"]["DrawingStyle"] = "Emboss"; Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true; Chart1.Series["Series1"].IsValueShownAsLabel = true;

Chart1.DataBind();


DEMO

Code

1st Qtr2nd Qtr3rd Qtr4th Qtr


Sample PIE CHARTS using MS Chart controls.

Sub Slide Title

2009 2008 2007 20060

2

4

6

8

10

12

14

4.32.5 3.5 4.5

Series 3Series 2Series 1


SAMPLE FOR SHOWING BAR CHARTS USING MS CHART CONTROLSSub Slide Title


RESOURCES

Samples for charting controls http://code.msdn.microsoft.com/mschart Helps you getting started quickly.

PPS Dashboard http://

blogs.technet.com/b/tothesharepoint/archive/2010/06/30/create-a-corporate-sales-dashboard-with-performancepoint-2010.aspx.

http://msdn.microsoft.com/en-us/library/ff938870.aspx

Visualizing Spatial Data (adding maps to SHAREPOINT using SSRS):http://msdn.microsoft.com/en-us/magazine/ee335706.aspx. http://mosshowto.blogspot.com/2008/12/asp-net-chart-control-sharepoint.htmlhttp://msdn.microsoft.com/en-us/library/ms170438.aspx#DataVisualization



http://blogs.technet.com/b/tothesharepoint/archive/2010/06/30/create-a-corporate-sales-dashboard-with-performancepoint-2010.aspx





http://msdn.microsoft.com/en-us/magazine/ee335706.aspx



http://mosshowto.blogspot.com/2008/12/asp-net-chart-control-sharepoint.html



http://msdn.microsoft.com/en-us/library/ms170438.aspx#DataVisualization

http://msdn.microsoft.com/en-us/library/ms170438.aspx#DataVisualization

virtual techdaysTHANKS│ 9-11 February 2011

[email protected]│ http://himanisharma.blogspot.com/

http://himanisharma.blogspot.com/

http://himanisharma.blogspot.com/

Virtual techdays INDIA │ 9-11 February 2011 Building rich data visualizations using SharePoint and...

Documents

Transcript of Virtual techdays INDIA │ 9-11 February 2011 Building rich data visualizations using SharePoint and...