CVCC - Data Visualization and VisiFire


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • CVCC - Data Visualization and VisiFire

    1. 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
    2. 2. <ul><ul><li>Greetings and Introduction </li></ul></ul><ul><ul><li>Business Intelligence and Visualization Overview </li></ul></ul><ul><ul><li>Business Intelligence and Data Visualization Strategies </li></ul></ul><ul><ul><li>Light / No Code Options </li></ul></ul><ul><ul><li>Dynamic / Code Supported Options </li></ul></ul><ul><ul><li>VisiFire ™ Product Overview </li></ul></ul><ul><ul><li>Using the VisiFire ™ Chart Designer </li></ul></ul><ul><ul><li>Web Design Implementation & XML Data </li></ul></ul><ul><ul><li>VisiFire ™ API Examples </li></ul></ul><ul><ul><li>Light / No Code Options </li></ul></ul><ul><ul><li>Quick Real-World Solution Example </li></ul></ul><ul><ul><li>Walkthrough of Real World Dashboard Solution Creation </li></ul></ul><ul><ul><li>Questions and Answers </li></ul></ul>Today’s Agenda
    3. 3. <ul><ul><ul><li>Greetings and Introductions </li></ul></ul></ul>
    4. 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
    5. 5. <ul><ul><ul><li>Business Intelligence and Data Visualization Overview </li></ul></ul></ul>
    6. 6. <ul><li>Scale </li></ul><ul><ul><li>This is a HUGE Topic, focus today is on a very specific approach of supporting decision making via web-capable data visualization. </li></ul></ul><ul><li>Context </li></ul><ul><ul><li>Not all Business Intelligence solutions have need be global or corporate implementations, our focus is on offering visualization for local information. </li></ul></ul><ul><li>Approach </li></ul><ul><ul><li>First, we’ll take a look at the competitive space for visualization components </li></ul></ul><ul><ul><li>Then we’ll look at a newer open source Silverlight-based product called from VisiFire </li></ul></ul>Business Intelligence and Data Visualization
    7. 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
    8. 8. <ul><li>Traditional Challenges </li></ul><ul><ul><li>Poor visibility of key performance indicators (KPI’s) </li></ul></ul><ul><ul><li>Core reports took too long to create </li></ul></ul><ul><ul><li>Too many people involved to get key reports </li></ul></ul><ul><ul><li>Data located in multiple systems (financial, CRM, ERP, operations) </li></ul></ul><ul><ul><li>Needed one spot for decision makers view </li></ul></ul><ul><ul><li>Making data available to all in the organization </li></ul></ul><ul><li>Goals </li></ul><ul><ul><li>Ease of use </li></ul></ul><ul><ul><li>Better, more timely business response/action </li></ul></ul><ul><ul><li>One stop shop for decision making </li></ul></ul>Enter the Business Intelligence Portal / Dashboard Business Intelligence and Data Visualization
    9. 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. 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. 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. 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. 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
    14. 14. <ul><ul><li>VisiFire ™ Product Overview </li></ul></ul>
    15. 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
    16. 16. <ul><ul><li>VisiFire ™ Chart Designer Demo </li></ul></ul>
    17. 17. <ul><li>Visifire is available under Open Source GNU GPL 3.0 license, which is suitable </li></ul><ul><li>for: </li></ul><ul><ul><li>Integrating Visifire in your Open Source software. </li></ul></ul><ul><ul><li>Personal and educational use of Visifire. </li></ul></ul><ul><ul><li>Integrating Visifire in commercial software, complying with Open Source GPL 3.0 license terms. </li></ul></ul><ul><li>Commercial License with Support </li></ul><ul><ul><li>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. </li></ul></ul><ul><ul><li>Modifications and enhancements need not be released under an Open Source license. </li></ul></ul><ul><ul><li>There is no need to distribute the GPL license with your product. </li></ul></ul><ul><ul><li>No reference to Visifire has to be done in any file distributed with your product. </li></ul></ul><ul><ul><li>The source code of Visifire doesn’t have to be distributed along with your product. </li></ul></ul><ul><ul><li>You can remove any file from Visifire while integrating it with your product. </li></ul></ul>VisiFire’s Dual License
    18. 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 Step 2. Extract two key files and upload to location (root) on web server. Configure Visifire for Scripting on Web Server
    19. 19. OK Let’s build some charts! How do you do it? Step 1. Visit 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
    20. 20. <ul><ul><li>View HTML Sample – Static Data Example </li></ul></ul><ul><ul><li>     <script type=&quot;text/javascript&quot; src=&quot;Visifire.js&quot;></script>     <div id=&quot;VisifireChart&quot;>     <script language=&quot;javascript&quot; type=&quot;text/javascript&quot;>         var chartXmlString = '‘ </li></ul></ul><ul><ul><ul><li>     +'<vc:Chart xmlns:vc=&quot;clr-namespace:Visifire.Charts;assembly=Visifire.Charts&quot; '     +' Width=&quot;500&quot; Height=&quot;300&quot; AnimationDuration=&quot;2&quot; BorderThickness=&quot;0&quot; Theme=&quot;Theme1&quot; View3D=&quot;True&quot; AnimationEnabled=&quot;True&quot; AnimationType=&quot;Type5&quot; ColorSet=&quot;VisiRed&quot; UniqueColors=&quot;True&quot; Watermark=&quot;False&quot; 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&quot;/><vc:DataPoint AxisLabel=&quot;10/27/08&quot; YValue=&quot;73&quot;/>'     +'</vc:DataSeries>'     +'</vc:Chart>'; </li></ul></ul></ul><ul><ul><li>         var vChart = new Visifire(&quot;Visifire.xap&quot;,500,300);         vChart.setDataXml(chartXmlString);         vChart.render(&quot;VisifireChart&quot;);     </script> </li></ul></ul><ul><ul><li></div> </li></ul></ul>Static Data Scripting Example
    21. 21. chart.html <html xmlns=&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. 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. 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. 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 and extract files Silverlight / ASP.NET Example See Solution in Action
    25. 25. Page.xaml.cs <ul><li>using Visifire.Charts; </li></ul><ul><li>using Visifire.Commons; </li></ul><ul><li>… </li></ul><ul><li>public Page() </li></ul><ul><li>{ </li></ul><ul><li>InitializeComponent(); </li></ul><ul><li>CreateChart(); </li></ul><ul><li>} </li></ul><ul><li>… </li></ul><ul><li>private void CreateChart() </li></ul><ul><li>{ </li></ul><ul><li>LayoutRoot.Children.Clear(); // Remove all existing child elements </li></ul><ul><li>  Chart chart = new Chart(); // Create a Chart element </li></ul><ul><li>  chart.Width = 400; chart.Height = 300; // Set chart width and height </li></ul><ul><li>  DataSeries dataSeries = new DataSeries(); // Create new DataSeries </li></ul><ul><li>int intDataPts = 10; // Number of DataPoints to be generated </li></ul><ul><li>Random random = new Random(); // To set the YValues of DataPoint </li></ul><ul><ul><ul><li>for (int idx= 0; idx < intDataPts; idx ++) // Loop and add a few DataPoints </li></ul></ul></ul><ul><ul><ul><li>{ </li></ul></ul></ul><ul><ul><ul><li>DataPoint dataPoint = new DataPoint(); // Create a DataPoint </li></ul></ul></ul><ul><ul><ul><li>dataPoint.YValue = random.Next(1, 100); // Set the YValue using random number </li></ul></ul></ul><ul><ul><ul><li>dataSeries.Children.Add(dataPoint); // Add DataPoint to DataSeries </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><li>             </li></ul><ul><li>chart.Children.Add(dataSeries); // Add DataSeries to Chart </li></ul><ul><li>LayoutRoot.Children.Add(chart); // Add chart to the LayoutRoot for display </li></ul><ul><li>} </li></ul>ASP.NET Code Example
    26. 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;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. 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=&quot;Theme2&quot; Width=&quot;600&quot; Height=&quot;400&quot; xmlns:vc=&quot;clr-namespace:Visifire.Charts;assembly=Visifire.Charts&quot; >&quot; + &quot; &quot; + &quot; &quot;; myXAML = myXAML + &quot;<vc:Title Text=&quot;&quot; + chartTitle + &quot;&quot;/>&quot; + &quot; &quot;; myXAML = myXAML + &quot;<vc:Title Text=&quot;&quot; + chartSubTitle + &quot;&quot;/>&quot; + &quot; &quot;; myXAML = myXAML + &quot;<vc:AxisX Title=&quot;&quot; + axisXtitle + &quot;&quot;/>&quot; + &quot; &quot;; myXAML = myXAML + &quot;<vc:AxisY Title=&quot;&quot; + axisYtitle + &quot;&quot; ValueFormatString=&quot;#0.##'%'&quot;/>&quot; + &quot; &quot; + &quot; &quot;; myXAML = myXAML + &quot;<vc:DataSeries RenderAs=&quot;Column&quot;>&quot; + &quot; &quot;; //Constructing XAML fragment for DataSeries for (int dataPointIndex = 0; dataPointIndex <= numberOfDataPoints - 1; dataPointIndex++) { myXAML = myXAML + &quot;<vc:DataPoint AxisLabel=&quot;&quot; + dataSeries[dataPointIndex, 0] + &quot;&quot; YValue=&quot;&quot; + dataSeries[dataPointIndex, 1] + &quot;&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. 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. 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
    30. 30. <ul><ul><li>Sample Real-world Dashboard Solution </li></ul></ul>
    31. 31. <ul><li>Business Story: </li></ul><ul><ul><li>Client is looking for an inexpensive way to create value through adding simple product related dashboard functionality to it’s existing online customer portal. </li></ul></ul><ul><ul><li>Client already using SharePoint (WSS 3.0) to share internal product weekly sales information with vendors via a vendor portal implementation </li></ul></ul><ul><ul><li>Solution needs to be easy to implement into a SharePoint Site Definition to be implemented into the existing site taxonomy. </li></ul></ul><ul><li>Business Information: </li></ul><ul><ul><li>Over hundreds of customer portals, Excel Services & BDC not practical. </li></ul></ul><ul><ul><li>Need for a customization by end-customer minimal </li></ul></ul>Sample Real-world Dashboard Solution
    32. 32. Product Catalog Multiple Data Sources Challenge 1: Need Real-time information from multiple data sources Inventory Sales Sample Real-world Dashboard Solution
    33. 33. Overlapping Product Lines Multiple Portal Display Locations Challenge 2: Information Alignment Sample Real-world Dashboard Solution
    34. 34. <ul><li>Solution Components: </li></ul><ul><ul><li>VisiFire Chart Web Part (WSP) Simple Form Web Part with added to front page of solution which displays Sales Top Performers </li></ul></ul><ul><ul><li>VisiFire Runtime Binaries / Components </li></ul></ul><ul><ul><li>XMLPublisher.exe Console Server component </li></ul></ul><ul><ul><li>Console application designed to generate data (data.xml) to individual Vendor Sites </li></ul></ul><ul><ul><li>UploadFiles.exe PowerShell Server component* </li></ul></ul><ul><ul><li>PowerShell script designed to upload data.xml to individual vendor sites </li></ul></ul><ul><ul><li>* not shown in solution - included in solution published on Code Camp site </li></ul></ul>Sample Real-world Dashboard Solution
    35. 35. <ul><li>SharePoint/MOSS </li></ul><ul><li>Create smaller charts for use as KPIs on team sites (project task breakdown) </li></ul><ul><li>Associate charts workflow statistics in visually represent workflow status </li></ul><ul><li>Great for any portal implementation, for example WSS 3.0 or MOSS Standard environment where BDC and/or Excel Services may not be available </li></ul><ul><li>Automate certain components by wrapping the ASP.NET solution into a Web Part shown earlier with the MOSS SDK </li></ul><ul><li>Add MOSS item, document level functionality by writing a custom control </li></ul><ul><li>Combining this solution with a jQuery UI ( to add additional levels of interactivity (Menus </li></ul>Other Ideas and Opportunities
    36. 36. <ul><li>Strengths: </li></ul><ul><li>Great tool for getting a concept from idea to prototype in minutes not hours/days </li></ul><ul><li>Very inexpensive agile solution – can replace need for large project implementation </li></ul><ul><li>- Great for any portal implementation, for example WSS 3.0 or MOSS Standard environment where BDC and/or Excel Services may not be available </li></ul><ul><li>Drawbacks: </li></ul><ul><li>You still need to know your data (does that ever go away?) </li></ul><ul><li>Great for a SharePoint implementation where skillset required may be </li></ul>Final Thoughts
    37. 37. Learn more about… VisiFire Source on Google Code VisiFire Forums GNU GPL 3.0 License guide-gplv3.html References Ryan Oliveira Solutia Consulting SharePoint Service Line Manager email:
    38. 38. <ul><ul><li>Questions & Answers </li></ul></ul>
    39. 39. Thank You