The document discusses VisiFire, an open source data visualization tool. It provides an overview of VisiFire and its features, including its chart designer for creating charts, dual licensing model, and examples of integrating VisiFire into web pages using JavaScript to render static and dynamic charts from XML configuration. Real-world examples are shown for creating dashboards with VisiFire on a SharePoint platform.

1. 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

4. 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

7. 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

9. 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

10. 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

11. 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.

12. 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

13. 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

15. 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

18. 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

19. 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

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

22. Adding events can allow for custom interactions and behavior including drill-down and drill-across behavior commonly required for data transitions. <script language=&quot;text/javaScript&quot; type=&quot;text/JavaScript&quot;> function onMouseLeftButtonDown(e) { alert(e.Element); } </script> vChart1 = new Visifire('Visifire.xap', 500, 300); vChart1.setDataUri(&quot;Data.xml&quot;); // 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(&quot;VisifireChart&quot;); //Render Chart (javascript) example.html Embedding Events into Chart Event Chart example

23. 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(&quot;VisifireChart0&quot;); 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(&quot;VisifireChart0&quot;); CheckAndUpdate(); } (javascript) example.html Re-Rendering Chart Information ReRender Chart example

24. 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

26. (c#) sample.aspx <%@ Page Language=&quot;C#&quot; ContentType=&quot;text/html&quot; ResponseEncoding=&quot;iso-8859-1&quot; %> <html> <head> <title>Visifire example using ASP.NET and C#</title> <script type=&quot;text/javascript&quot; src=&quot;Visifire.js&quot;></script> <script type=&quot;text/javascript&quot;> function GetXMLHttpObj() { var objXmlHttp; // XMLHttpRequest object // Firefox, Opera 8.0+, Safari try { objXmlHttp = _ new XMLHttpRequest(); } catch (e) { // Internet Explorer try { objXmlHttp = _ new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); } catch (e) { try { objXmlHttp = _ new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } catch (e) { alert(“Browser does not support AJAX!&quot;); 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(&quot;Visifire.xap&quot;,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(&quot;Visifire1&quot;); } } // Sending request xmlHttp.open(&quot;GET&quot;, &quot;sample.aspx&quot; + &quot;?action=GetXML&quot;, true); xmlHttp.send(null); } </script> </head> <body onLoad = &quot;onLoad()&quot;> <div style=&quot;width:800px;height:600px;&quot; id=&quot;Visifire1&quot; ></div> </body> </html> 1/3 2/3 ASP.NET Code Example

27. (c#) sample.aspx – cont’d <% if (Request.QueryString.Get(&quot;action&quot;) == &quot;GetXML&quot;) { string chartTitle = &quot;Infant Mortality Rate&quot;; // Main title for chart string chartSubTitle = &quot;(Global Survey)&quot;; // Sub title for chart string axisXtitle = &quot;Year&quot;; // X axis title string axisYtitle = &quot;IMR Rate&quot;; // 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 = {{&quot;2000&quot;, &quot;52.6&quot;}, {&quot;2001&quot;, &quot;40.3&quot;}, {&quot;2002&quot;, &quot;20&quot;}, {&quot;2003&quot;, &quot;28.7&quot;}, {&quot;2004&quot;, &quot;46.1&quot;},{&quot;2005&quot;, &quot;15.1&quot;}}; // Constructing Data XAML myXAML = &quot;<vc:Chart Theme=amp;quot;Theme2amp;quot; Width=amp;quot;600amp;quot; Height=amp;quot;400amp;quot; xmlns:vc=amp;quot;clr-namespace:Visifire.Charts;assembly=Visifire.Chartsamp;quot; >&quot; + &quot;&quot; + &quot;&quot;; myXAML = myXAML + &quot;<vc:Title Text=amp;quot;&quot; + chartTitle + &quot;amp;quot;/>&quot; + &quot;&quot;; myXAML = myXAML + &quot;<vc:Title Text=amp;quot;&quot; + chartSubTitle + &quot;amp;quot;/>&quot; + &quot;&quot;; myXAML = myXAML + &quot;<vc:AxisX Title=amp;quot;&quot; + axisXtitle + &quot;amp;quot;/>&quot; + &quot;&quot;; myXAML = myXAML + &quot;<vc:AxisY Title=amp;quot;&quot; + axisYtitle + &quot;amp;quot; ValueFormatString=amp;quot;#0.##'%'amp;quot;/>&quot; + &quot;&quot; + &quot;&quot;; myXAML = myXAML + &quot;<vc:DataSeries RenderAs=amp;quot;Columnamp;quot;>&quot; + &quot;&quot;; //Constructing XAML fragment for DataSeries for (int dataPointIndex = 0; dataPointIndex <= numberOfDataPoints - 1; dataPointIndex++) { myXAML = myXAML + &quot;<vc:DataPoint AxisLabel=amp;quot;&quot; + dataSeries[dataPointIndex, 0] + &quot;amp;quot; YValue=amp;quot;&quot; + dataSeries[dataPointIndex, 1] + &quot;amp;quot;/>&quot; + &quot;&quot;; // Adding DataPoint XAML fragment } myXAML = myXAML + &quot;&quot; + &quot;</vc:DataSeries>&quot; + &quot;&quot;; myXAML = myXAML + &quot;</vc:Chart>&quot;; Response.Clear(); // Clear all response text Response.Write(myXAML); // Write data xaml as response text } %> 3/3 ASP.NET Code Example ASP.NET Sample

28. 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

29. 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=&quot;/&quot;> <xsl:call-template name=&quot;dvt_1&quot;/> </xsl:template> <xsl:template match=&quot;/&quot;> <script type=&quot;text/javascript&quot; src=&quot;Visifire.js&quot; mce_src=&quot;Visifire.js&quot;></script> <xsl:text disable-output-escaping=&quot;yes&quot;><![CDATA[ <script type=&quot;text/javascript&quot;> var xmlString = ' <vc:Chart xmlns:vc=&quot;clr-namespace:Visifire.Charts;assembly=Visifire.Charts&quot;' + ' Theme=&quot;Theme1&quot; AnimationType=&quot;Type4&quot; >' + ' <vc:Title Text=&quot;Hockey Team Goals&quot;/>' + ' <vc:DataSeries RenderAs=&quot;Pie&quot; ShowInLegend=&quot;True&quot; Bevel=&quot;False&quot;>' ]]></xsl:text> <xsl:for-each select=&quot;/dsQueryResponse/Rows/Row&quot;> <xsl:text disable-output-escaping=&quot;yes&quot;><![CDATA[ + ' <vc:DataPoint AxisLabel=&quot;]]></xsl:text> <xsl:value-of select=&quot;./@Title&quot; /> <xsl:text disable-output-escaping=&quot;yes&quot;><![CDATA[&quot; YValue=&quot;]]></xsl:text> <xsl:value-of select=&quot;@Goals&quot; /> <xsl:text disable-output-escaping=&quot;yes&quot;><![CDATA[&quot;/>']]></xsl:text> </xsl:for-each> <xsl:text disable-output-escaping=&quot;yes&quot;> <![CDATA[ + ' </vc:DataSeries>' + ' </vc:Chart>'; </script> ]]></xsl:text> <div id=&quot;myChart&quot; style=&quot;width:500px;height:300px;&quot;> <script language=&quot;javascript&quot; type=&quot;text/javascript&quot;> var vChart2 = new Visifire(&quot;Visifire.xap&quot;); vChart2.setDataXml(xmlString); vChart2.render(&quot;myChart&quot;); </script> </div> </xsl:template> A B SharePoint Designer DataView Web Part Example SPD Example

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

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

37. 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

39. Thank You