CVCC - Data Visualization and VisiFire

Chippewa Valley Code Camp 2008 Web-based Data Visualization A Focus on VisiFire Ryan Oliveira Solutia Consulting Room 103 12:45am-2:00pm Solutia Consulting Technology Enablement Services

Greetings and Introduction Business Intelligence and Visualization Overview Business Intelligence and Data Visualization Strategies Light / No Code Options Dynamic / Code Supported Options VisiFire ™ Product Overview Using the VisiFire ™ Chart Designer Web Design Implementation & XML Data VisiFire ™ API Examples Light / No Code Options Quick Real-World Solution Example Walkthrough of Real World Dashboard Solution Creation Questions and Answers Today’s Agenda

Founded in 1997, Solutia Consulting helps clients develop customized software solutions to align with their business goals. We manage projects from requirements gathering through application development, with quality as our top priority. In 2007 Solutia created the Technology Enablement Practice focused on delivering technology solutions and best practices in support of its Management Consulting and Transformational Support practices. About Solutia Consulting

Business Intelligence and Data Visualization Overview

Scale This is a HUGE Topic, focus today is on a very specific approach of supporting decision making via web-capable data visualization. Context Not all Business Intelligence solutions have need be global or corporate implementations, our focus is on offering visualization for local information. Approach First, we’ll take a look at the competitive space for visualization components Then we’ll look at a newer open source Silverlight-based product called from VisiFire Business Intelligence and Data Visualization

What is Business Intelligence? Ability to create universal visibility and clarity to the information harvested from a businesses data sources. What is Data Visualization? A technique using graphical representations to help shape understanding of data and information ! ? Business Intelligence and Data Visualization

Traditional Challenges Poor visibility of key performance indicators (KPI’s) Core reports took too long to create Too many people involved to get key reports Data located in multiple systems (financial, CRM, ERP, operations) Needed one spot for decision makers view Making data available to all in the organization Goals Ease of use Better, more timely business response/action One stop shop for decision making Enter the Business Intelligence Portal / Dashboard Business Intelligence and Data Visualization

Ease of Use Solution must be able to be used by office user and/or power user Cost Lower is Better Presentation Features Product should offer a number of visualization and presentation options including database drill down Data Features Product should offer a number of ways of getting to various types of data within your organization Integration Product should integrate with a web platform Measurement Criteria

Visifire is a set of open source data visualization components - powered by Microsoft® Silverlight. Dundas is a leader in Data Visualization technologies and includes Charting, Gauge and mapping products specific to SSRS, OLAP, SharePoint and .NET SoftwareFX and its ChartFX franchise have been a mainstay in visualization technologies since the early 90’s. It’s product line(s) include components which integrate with SSRS, COM/.NET, WPF/Silverlight, SharePoint, Java and PowerShell. .netCharting is another player to this space providing powerful code supported solutions for the .NET space. Graphs can be easily plugged into a WinForms or WebForms solution. Looking at comparable product toolkits

Ease of Use Cost Presentation Features Data Features Integration The Players and how they measure up Ease of Use Sometimes frustrating to make changes in browser environment (New Chart development product created for charts) Cost No Client Access licenses required –$1999 /server (discounts for multiple servers) Presentation Features Easy to make updates and preview graphs – no compiling and loading sites. Data Features Limited drill-down capabilities – must be done leveraging SharePoint’s Taxonomy structure Integration Product should integrate with proposed (WSS 3.0) platform Ease of Use Solution must be able to be used by back office user and/or SharePoint power user. Cost Costly; $1599 per server license Presentation Features Product should offer a number of visualization and presentation options. Data Features Product should offer a number of ways of getting to various types of data within your organization Integration Product should integrate with proposed (WSS 3.0) platform Ease of Use Requires .NET Development skillset (VB/C#), although claim of simple Chart in 10 lines of code. Cost Site license $395 per server license Presentation Features Very pretty presentation. Does offer database drill down capabilities Data Features Great API. Integration Product should integrate with proposed (WSS 3.0) platform Ease of Use Found it very easy to use and abuse. First graph done in a couple of minutes Cost Did not get a response on whether GPL 3.0 open source license was feasible for internal corporate use . $199 – Single Developers, single domain; $399 - Unlimited Developers, single domain; $799 - Unlimited Developers, unlimited domains; Presentation Features Product does not present direct drill down capabilities without manual or scripted intervention Data Features Very limited features in integrating to with data components. Needs to be done via code Integration Very quick to integrate and use within SharePoint for static components. Any API work would need to be wrapped into SP Webpart framework.

Visifire is a set of open source data visualization components - powered by Microsoft® Silverlight. Dundas is a leader in Data Visualization technologies and includes Charting, Gauge and mapping products specific to SSRS, OLAP, SharePoint and .NET SoftwareFX and its ChartFX franchise have been a mainstay in visualization technologies since the early 90’s. It’s product line(s) include components which integrate with SSRS, COM/.NET, WPF/Silverlight, SharePoint, Java and PowerShell. .netCharting is another player to this space providing powerful code supported solutions for the .NET space. Graphs can be easily plugged into a WinForms or WebForms solution. Other honorable mentions

Studio Enterprise for Silverlight product has huge suite of Silverlight powered ‘controls’ (GridView, Dropdowns, RichText Box) which also includes charts and graphics. Corda is collaboration software focussed specifically on buisiness intelligence and dashboard building. Components include built-in interactivity and communication components. Other products worth looking at

VisiFire ™ Product Overview

Easy to use Online Chart Development tool that allows you to configure and test your graphing configuration options. Great for quick prototyping and idea sessions. View HTML Display the embed HTML that can be used to add this graph to any web page View XML Builds the sample XML to be associated with the Chart. Render Chart Rebuilds the Chart online and renders the sample data Chart Designer

VisiFire ™ Chart Designer Demo

Visifire is available under Open Source GNU GPL 3.0 license, which is suitable for: Integrating Visifire in your Open Source software. Personal and educational use of Visifire. Integrating Visifire in commercial software, complying with Open Source GPL 3.0 license terms. Commercial License with Support If GPL is not suitable for your products or company, we provide Visifire under a flexible commercial license designed to meet your specific usage and distribution requirements. Commercial license offers a very flexible way to integrate Visifire in your commercial application. Modifications and enhancements need not be released under an Open Source license. There is no need to distribute the GPL license with your product. No reference to Visifire has to be done in any file distributed with your product. The source code of Visifire doesn’t have to be distributed along with your product. You can remove any file from Visifire while integrating it with your product. VisiFire’s Dual License

Basic configuration for scripting implementation includes uploading two files to your web server Visifire.js contains required JavaScript rendering libraries Visifire.xap Silverlight Application Package file containing binaries required to render charts. How do you do it? Step 1. Download install from VisiFire.com Step 2. Extract two key files and upload to location (root) on web server. Configure Visifire for Scripting on Web Server

OK Let’s build some charts! How do you do it? Step 1. Visit VisiFire.com and work with customer to Step 2. Extract HTML that we’re interested in using and add to empty file on WSS site. Step 3. Load Render page. ‘ Hello Chart’ Example

View HTML Sample – Static Data Example <script type="text/javascript" src="Visifire.js"></script> <div id="VisifireChart"> <script language="javascript" type="text/javascript"> var chartXmlString = '‘ +'<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=Visifire.Charts" ' +' Width="500" Height="300" AnimationDuration="2" BorderThickness="0" Theme="Theme1" View3D="True" AnimationEnabled="True" AnimationType="Type5" ColorSet="VisiRed" UniqueColors="True" Watermark="False" ShadowEnabled="True">' +'<vc:Legend Enabled="True" AlignmentX="Right" AlignmentY="Center"/>' +'<vc:AxisX Title="OE Date“/>‘ +'<vc:AxisY Title="Number of Units“/>‘ +'<vc:DataSeries Name="AW" RenderAs="StackedColumn" AxisYType="Primary">' +'<vc:DataPoint AxisLabel="10/21/08" YValue="883"/><vc:DataPoint AxisLabel="10/22/08" YValue="800"/>' +'<vc:DataPoint AxisLabel="10/23/08" YValue="823"/><vc:DataPoint AxisLabel="10/24/08" YValue="696"/>' +'<vc:DataPoint AxisLabel="10/25/08" YValue="556"/><vc:DataPoint AxisLabel="10/27/08" YValue="709"/>' +'</vc:DataSeries>' +'<vc:DataSeries Name="CO" RenderAs="StackedColumn" AxisYType="Primary">' +'<vc:DataPoint AxisLabel="10/21/08" YValue="358"/><vc:DataPoint AxisLabel="10/22/08" YValue="161"/>' +'<vc:DataPoint AxisLabel="10/23/08" YValue="404"/><vc:DataPoint AxisLabel="10/24/08" YValue="278"/>' +'<vc:DataPoint AxisLabel="10/26/08" YValue="88"/><vc:DataPoint AxisLabel="10/27/08" YValue="73"/>' +'</vc:DataSeries>' +'</vc:Chart>'; var vChart = new Visifire("Visifire.xap",500,300); vChart.setDataXml(chartXmlString); vChart.render("VisifireChart"); </script> </div> Static Data Scripting Example

chart.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Visifire Charts</title> <script type="text/javascript" src="Visifire.js"></script> </head> <body> <div id="VisifireChart"> <script language="javascript" type="text/javascript"> var vChart = new Visifire("Visifire.xap",600,400); vChart.setDataUri(“chart.xml"); vChart.render("VisifireChart"); </script> </div> </body> </html> chart.xml <vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly= Visifire.Charts" Width="500“ Height="300" AnimationDuration="2" BorderThickness="0“ Theme="Theme1" View3D="True" AnimationEnabled="True“ AnimationType="Type5“ ColorSet="VisiRed" UniqueColors="True" Watermark="False ShadowEnabled="True"> <vc:Legend Enabled="True" AlignmentX="Right" AlignmentY="Center"/> <vc:AxisX Title="OE Date“/><vc:AxisY Title="Number of Units“/> <vc:DataSeries Name="AW" RenderAs="StackedColumn" AxisYType= "Primary"> <vc:DataPoint AxisLabel="10/21/08" YValue="883"/> <vc:DataPoint AxisLabel="10/22/08" YValue="800"/> <vc:DataPoint AxisLabel="10/23/08" YValue="823"/> <vc:DataPoint AxisLabel="10/24/08" YValue="696"/> <vc:DataPoint AxisLabel="10/25/08" YValue="556"/> <vc:DataPoint AxisLabel="10/27/08" YValue="709"/> </vc:DataSeries> <vc:DataSeries Name="CO" RenderAs="StackedColumn" AxisYType= "Primary"> <vc:DataPoint AxisLabel="10/21/08" YValue="358"/> <vc:DataPoint AxisLabel="10/22/08" YValue="161"/> <vc:DataPoint AxisLabel="10/23/08" YValue="404"/> <vc:DataPoint AxisLabel="10/24/08" YValue="278"/> <vc:DataPoint AxisLabel="10/26/08" YValue="88“/> <vc:DataPoint AxisLabel="10/27/08" YValue="73"/> </vc:DataSeries> </vc:Chart> Dynamic Data Scripting Example Dynamic Chart example

Adding events can allow for custom interactions and behavior including drill-down and drill-across behavior commonly required for data transitions. <script language="text/javaScript" type="text/JavaScript"> function onMouseLeftButtonDown(e) { alert(e.Element); } </script> vChart1 = new Visifire('Visifire.xap', 500, 300); vChart1.setDataUri("Data.xml"); // Attach MouseLeftButtonDown event to DataPoint. vChart1.attachEvent('DataPoint','MouseLeftButtonDown', onMouseLeftButtonDown); // Attach MouseLeftButtonDown event to Chart. vChart1.attachEvent('Chart','MouseLeftButtonDown', onMouseLeftButtonDown); // Attach MouseLeftButtonDown event to Title. vChart1.attachEvent('Title','MouseLeftButtonDown', onMouseLeftButtonDown); // Attach MouseLeftButtonDown event to Legend. vChart1.attachEvent('Legend','MouseLeftButtonDown', onMouseLeftButtonDown); vChart1.render("VisifireChart"); //Render Chart (javascript) example.html Embedding Events into Chart Event Chart example

Re-rendering the chart will allow it to refresh and pull new (possibly updated) data based on an interval. Very cool! // Displays new chart at regular intervals function UpdateChart() { Chart.setDataXml(GenerateXML()); Chart.render("VisifireChart0"); setTimeout(UpdateChart,3000); } // Checks if Silverlight plugin is loaded before //running the update routine function CheckAndUpdate() { if(Chart.isLoaded()) UpdateChart(); else setTimeout(CheckAndUpdate,100); } // To display the first chart also initialize loading the Silverlight Plugin function onPageLoad() { Chart.setDataXml(GenerateXML()); Chart.render("VisifireChart0"); CheckAndUpdate(); } (javascript) example.html Re-Rendering Chart Information ReRender Chart example

How do you do it? Step 1. From Visual Studio, start a new ‘Silverlight Application’ project type allowing VS to create a new Web in which to host the solution. Step 2. Extract Visifire assemblies from Visifire.xap* to local bin or GAC and add references in project to the Visifire.Charts and Visifire.Commons assemblies . Step 3. In the Main Project, locate the Page.xaml.cs and insert CreateChart() function and reference to call CreateChart from within Page constructor. Step 4. Build and Run Solution to render in browser * convert to Visifire.xap to Visifire.zip and extract files Silverlight / ASP.NET Example See Solution in Action

Page.xaml.cs using Visifire.Charts; using Visifire.Commons; … public Page() { InitializeComponent(); CreateChart(); } … private void CreateChart() { LayoutRoot.Children.Clear(); // Remove all existing child elements Chart chart = new Chart(); // Create a Chart element chart.Width = 400; chart.Height = 300; // Set chart width and height DataSeries dataSeries = new DataSeries(); // Create new DataSeries int intDataPts = 10; // Number of DataPoints to be generated Random random = new Random(); // To set the YValues of DataPoint for (int idx= 0; idx < intDataPts; idx ++) // Loop and add a few DataPoints { DataPoint dataPoint = new DataPoint(); // Create a DataPoint dataPoint.YValue = random.Next(1, 100); // Set the YValue using random number dataSeries.Children.Add(dataPoint); // Add DataPoint to DataSeries } chart.Children.Add(dataSeries); // Add DataSeries to Chart LayoutRoot.Children.Add(chart); // Add chart to the LayoutRoot for display } ASP.NET Code Example

(c#) sample.aspx <%@ Page Language="C#" ContentType="text/html" ResponseEncoding="iso-8859-1" %> <html> <head> <title>Visifire example using ASP.NET and C#</title> <script type="text/javascript" src="Visifire.js"></script> <script type="text/javascript"> function GetXMLHttpObj() { var objXmlHttp; // XMLHttpRequest object // Firefox, Opera 8.0+, Safari try { objXmlHttp = _ new XMLHttpRequest(); } catch (e) { // Internet Explorer try { objXmlHttp = _ new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { objXmlHttp = _ new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert(“Browser does not support AJAX!"); return null; } } } return objXmlHttp; } (c#) sample.aspx – cont’d // Loads Visifire Chart function onLoad() { var xmlHttp = GetXMLHttpObj(); xmlHttp.onreadystatechange = function() { if( xmlHttp.readyState == 4 ) { /* Create chart object. Arguments are Visifire.xap uri, width, height */ var vChart = _ new Visifire("Visifire.xap",600,400); /* Set the data XAML where response text contains the Data xaml is passed as argument */ vChart.setDataXml(xmlHttp.responseText); /* Render the chart, target div element id is passed as argument */ vChart.render("Visifire1"); } } // Sending request xmlHttp.open("GET", "sample.aspx" + "?action=GetXML", true); xmlHttp.send(null); } </script> </head> <body onLoad = "onLoad()"> <div style="width:800px;height:600px;" id="Visifire1" ></div> </body> </html> 1/3 2/3 ASP.NET Code Example

(c#) sample.aspx – cont’d <% if (Request.QueryString.Get("action") == "GetXML") { string chartTitle = "Infant Mortality Rate"; // Main title for chart string chartSubTitle = "(Global Survey)"; // Sub title for chart string axisXtitle = "Year"; // X axis title string axisYtitle = "IMR Rate"; // Y axis title string myXAML; // String for Data xaml int numberOfDataPoints = 6; // Number of data point in the DataSeries // DataSeries is a two dimensional array of DataPoints (Year | IMR Rate ) string[,] dataSeries = {{"2000", "52.6"}, {"2001", "40.3"}, {"2002", "20"}, {"2003", "28.7"}, {"2004", "46.1"},{"2005", "15.1"}}; // Constructing Data XAML myXAML = "<vc:Chart Theme=\"Theme2\" Width=\"600\" Height=\"400\" xmlns:vc=\"clr-namespace:Visifire.Charts;assembly=Visifire.Charts\" >" + "\n" + "\n"; myXAML = myXAML + "<vc:Title Text=\"" + chartTitle + "\"/>" + "\n"; myXAML = myXAML + "<vc:Title Text=\"" + chartSubTitle + "\"/>" + "\n"; myXAML = myXAML + "<vc:AxisX Title=\"" + axisXtitle + "\"/>" + "\n"; myXAML = myXAML + "<vc:AxisY Title=\"" + axisYtitle + "\" ValueFormatString=\"#0.##'%'\"/>" + "\n" + "\n"; myXAML = myXAML + "<vc:DataSeries RenderAs=\"Column\">" + "\n"; //Constructing XAML fragment for DataSeries for (int dataPointIndex = 0; dataPointIndex <= numberOfDataPoints - 1; dataPointIndex++) { myXAML = myXAML + "<vc:DataPoint AxisLabel=\"" + dataSeries[dataPointIndex, 0] + "\" YValue=\"" + dataSeries[dataPointIndex, 1] + "\"/>" + "\n"; // Adding DataPoint XAML fragment } myXAML = myXAML + "\n" + "</vc:DataSeries>" + "\n"; myXAML = myXAML + "</vc:Chart>"; Response.Clear(); // Clear all response text Response.Write(myXAML); // Write data xaml as response text } %> 3/3 ASP.NET Code Example ASP.NET Sample

Use a DataView Web Part to connect to represent data from a SharePoint Example: Represent a Hockey Teams Statistics (Goals and Assists) SharePoint Designer DataView WebPart Example

How do you do it Step 1. Create List within SharePoint Site Column: Title ‘Player’ (Text) Column: Goals (Number) Column: Assists (Number) Then add data to the SharePoint List. Step 2. Launch SharePoint Designer and add DataView to any Web Part Zone on a Page Step 3. Replace the first DataFormWebPart template a) with b) Step 4. Render SharePoint Web Page in browser <xsl:template match="/"> <xsl:call-template name="dvt_1"/> </xsl:template> <xsl:template match="/"> <script type="text/javascript" src="Visifire.js" mce_src="Visifire.js"></script> <xsl:text disable-output-escaping="yes"><![CDATA[ <script type="text/javascript"> var xmlString = ' <vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=Visifire.Charts"' + ' Theme="Theme1" AnimationType="Type4" >' + ' <vc:Title Text="Hockey Team Goals"/>' + ' <vc:DataSeries RenderAs="Pie" ShowInLegend="True" Bevel="False">' ]]></xsl:text> <xsl:for-each select="/dsQueryResponse/Rows/Row"> <xsl:text disable-output-escaping="yes"><![CDATA[ + ' <vc:DataPoint AxisLabel="]]></xsl:text> <xsl:value-of select="./@Title" /> <xsl:text disable-output-escaping="yes"><![CDATA[" YValue="]]></xsl:text> <xsl:value-of select="@Goals" /> <xsl:text disable-output-escaping="yes"><![CDATA["/>']]></xsl:text> </xsl:for-each> <xsl:text disable-output-escaping="yes"> <![CDATA[ + ' </vc:DataSeries>' + ' </vc:Chart>'; </script> ]]></xsl:text> <div id="myChart" style="width:500px;height:300px;"> <script language="javascript" type="text/javascript"> var vChart2 = new Visifire("Visifire.xap"); vChart2.setDataXml(xmlString); vChart2.render("myChart"); </script> </div> </xsl:template> A B SharePoint Designer DataView Web Part Example SPD Example

Sample Real-world Dashboard Solution

Business Story: Client is looking for an inexpensive way to create value through adding simple product related dashboard functionality to it’s existing online customer portal. Client already using SharePoint (WSS 3.0) to share internal product weekly sales information with vendors via a vendor portal implementation Solution needs to be easy to implement into a SharePoint Site Definition to be implemented into the existing site taxonomy. Business Information: Over hundreds of customer portals, Excel Services & BDC not practical. Need for a customization by end-customer minimal Sample Real-world Dashboard Solution

Product Catalog Multiple Data Sources Challenge 1: Need Real-time information from multiple data sources Inventory Sales Sample Real-world Dashboard Solution

Overlapping Product Lines Multiple Portal Display Locations Challenge 2: Information Alignment Sample Real-world Dashboard Solution

Solution Components: VisiFire Chart Web Part (WSP) Simple Form Web Part with added to front page of solution which displays Sales Top Performers VisiFire Runtime Binaries / Components XMLPublisher.exe Console Server component Console application designed to generate data (data.xml) to individual Vendor Sites UploadFiles.exe PowerShell Server component* PowerShell script designed to upload data.xml to individual vendor sites * not shown in solution - included in solution published on Code Camp site Sample Real-world Dashboard Solution

SharePoint/MOSS Create smaller charts for use as KPIs on team sites (project task breakdown) Associate charts workflow statistics in visually represent workflow status Great for any portal implementation, for example WSS 3.0 or MOSS Standard environment where BDC and/or Excel Services may not be available Automate certain components by wrapping the ASP.NET solution into a Web Part shown earlier with the MOSS SDK Add MOSS item, document level functionality by writing a custom control Combining this solution with a jQuery UI (http://jquery.com) to add additional levels of interactivity (Menus Other Ideas and Opportunities

Strengths: Great tool for getting a concept from idea to prototype in minutes not hours/days Very inexpensive agile solution – can replace need for large project implementation - Great for any portal implementation, for example WSS 3.0 or MOSS Standard environment where BDC and/or Excel Services may not be available Drawbacks: You still need to know your data (does that ever go away?) Great for a SharePoint implementation where skillset required may be Final Thoughts

Learn more about… VisiFire http://www.visifire.com Source on Google Code http://code.google.com/p/visifire/ VisiFire Forums http://www.visifire.com/forums GNU GPL 3.0 License http://www.gnu.org/licenses/quick- guide-gplv3.html References Ryan Oliveira Solutia Consulting SharePoint Service Line Manager email: ryan.oliveira@solutiaconsulting.com

CVCC - Data Visualization and VisiFire

More Related Content

What's hot (19)

Viewers also liked (6)

Similar to CVCC - Data Visualization and VisiFire (20)

Recently uploaded (20)

CVCC - Data Visualization and VisiFire

Editor's Notes