cvcc - data visualization and visifire

39
Chippewa Valley Code Camp 2008 Web-based Data Visualization A Focus on VisiFire Ryan Oliveira Solutia Consulting Technology Enablement Services

Upload: ryanaoliveira

Post on 28-Jan-2015

116 views

Category:

Technology


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: CVCC - Data Visualization and VisiFire

Chippewa Valley Code Camp 2008

Web-based Data Visualization A Focus on VisiFire

Ryan OliveiraSolutia Consulting

Room 103 12:45am-2:00pmSolutia Consulting

Technology Enablement Services

Page 2: CVCC - Data Visualization and VisiFire

Today’s Agenda

Greetings and Introduction

Business Intelligence and Visualization Overview

Business Intelligence and Data Visualization Strategies

Light / No Code Options Dynamic / Code Supported Options

VisiFire™ Product OverviewUsing the VisiFire™ Chart DesignerWeb Design Implementation & XML Data VisiFire™ API ExamplesLight / No Code Options

Quick Real-World Solution ExampleWalkthrough of Real World Dashboard Solution

Creation

Questions and Answers

Page 3: CVCC - Data Visualization and VisiFire

Greetings and Introductions

Page 4: CVCC - Data Visualization and VisiFire

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

Page 5: CVCC - Data Visualization and VisiFire

Business Intelligence and Data Visualization Overview

Page 6: CVCC - Data Visualization and VisiFire

Business Intelligence and Data Visualization

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

Page 7: CVCC - Data Visualization and VisiFire

Business Intelligence and Data VisualizationWhat 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

!!??

Page 8: CVCC - Data Visualization and VisiFire

• Traditional ChallengesPoor visibility of key performance indicators (KPI’s)Core reports took too long to createToo many people involved to get key reportsData located in multiple systems (financial, CRM, ERP, operations)Needed one spot for decision makers viewMaking data available to all in the organization

• GoalsEase of useBetter, more timely business response/actionOne stop shop for decision making

Business Intelligence and Data Visualization

Enter the Business Intelligence Portal / Dashboard

Page 9: CVCC - Data Visualization and VisiFire

Ease of UseSolution must be able to be used by office user and/or power user

CostLower is Better

Presentation FeaturesProduct should offer a number of visualization and presentation options including database drill down

Data FeaturesProduct should offer a number of ways of getting to various types of data within your organization

IntegrationProduct should integrate with a web platform

Measurement Criteria

Page 10: CVCC - Data Visualization and VisiFire

Looking at comparable product toolkits

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.

Page 11: CVCC - Data Visualization and VisiFire

The Players and how they measure up

Ease of Use CostPresentation

FeaturesData

Features Integration

Ease of UseSometimes frustrating to make changes in browser environment (New Chart development product created for charts)

CostNo Client Access licenses required –$1999 /server (discounts for multiple servers)

Presentation FeaturesEasy to make updates and preview graphs – no compiling and loading sites.

Data FeaturesLimited drill-down capabilities – must be done leveraging SharePoint’s Taxonomy structure

IntegrationProduct should integrate with proposed (WSS 3.0) platform

Ease of UseSolution must be able to be used by back office user and/or SharePoint power user.

CostCostly; $1599 per server license

Presentation FeaturesProduct should offer a number of visualization and presentation options.

Data FeaturesProduct should offer a number of ways of getting to various types of data within your organization

IntegrationProduct should integrate with proposed (WSS 3.0) platform

Ease of UseRequires .NET Development skillset (VB/C#), although claim of simple Chart in 10 lines of code.

CostSite license $395 per server license

Presentation FeaturesVery pretty presentation. Does offer database drill down capabilities

Data FeaturesGreat API.

IntegrationProduct should integrate with proposed (WSS 3.0) platform

Ease of UseFound it very easy to use and abuse. First graph done in a couple of minutes

CostDid 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 FeaturesProduct does not present direct drill down capabilities without manual or scripted intervention

Data FeaturesVery limited features in integrating to with data components. Needs to be done via code

IntegrationVery quick to integrate and use within SharePoint for static components. Any API work would need to be wrapped into SP Webpart framework.

Page 12: CVCC - Data Visualization and VisiFire

Other honorable mentions

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.

Page 13: CVCC - Data Visualization and VisiFire

Other products worth looking at

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.

Page 14: CVCC - Data Visualization and VisiFire

VisiFire™ Product Overview

Page 15: CVCC - Data Visualization and VisiFire

Chart Designer

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 HTMLDisplay the embed HTML that can be used to add this graph to any web page

View XMLBuilds the sample XML to be associated with the Chart.

Render ChartRebuilds the Chart online and renders the sample data

Page 16: CVCC - Data Visualization and VisiFire

VisiFire™ Chart Designer Demo

Page 17: CVCC - Data Visualization and VisiFire

VisiFire’s Dual License

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.

Page 18: CVCC - Data Visualization and VisiFire

Configure Visifire for Scripting on Web ServerBasic configuration for scripting implementation includes uploading two files to your web server

Visifire.jscontains required JavaScript rendering libraries

Visifire.jscontains required JavaScript rendering libraries

Visifire.xapSilverlight Application Package file containing binaries required to render charts.

Visifire.xapSilverlight Application Package file containing binaries required to render charts.

How do you do it?Step 1. Download install from VisiFire.comStep 2. Extract two key files and upload to location (root) on web server.

Page 19: CVCC - Data Visualization and VisiFire

‘Hello Chart’ Example

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.

Page 20: CVCC - Data Visualization and VisiFire

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

Page 21: CVCC - Data Visualization and VisiFire

Dynamic 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 Chart example Dynamic Chart example

Page 22: CVCC - Data Visualization and VisiFire

Embedding Events into Chart

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

Event Chart example Event Chart example

Page 23: CVCC - Data Visualization and VisiFire

Re-Rendering Chart Information

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 intervalsfunction UpdateChart(){ Chart.setDataXml(GenerateXML()); Chart.render("VisifireChart0"); setTimeout(UpdateChart,3000);}            // Checks if Silverlight plugin is loaded before//running the update routinefunction CheckAndUpdate(){ if(Chart.isLoaded())      UpdateChart();     else          setTimeout(CheckAndUpdate,100);}            // To display the first chart also initialize loading the Silverlight Pluginfunction onPageLoad(){ Chart.setDataXml(GenerateXML());     Chart.render("VisifireChart0");     CheckAndUpdate();}

(javascript) example.html

ReRender Chart example ReRender Chart example

Page 24: CVCC - Data Visualization and VisiFire

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

Silverlight / ASP.NET Example

See Solution in ActionSee Solution in Action* convert to Visifire.xap to Visifire.zip and extract files

Page 25: CVCC - Data Visualization and VisiFire

ASP.NET Code Example

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 generatedRandom 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 ChartLayoutRoot.Children.Add(chart); // Add chart to the LayoutRoot for display

}

Page 26: CVCC - Data Visualization and VisiFire

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

Page 27: CVCC - Data Visualization and VisiFire

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 SampleASP.NET Sample

Page 28: CVCC - Data Visualization and VisiFire

SharePoint Designer DataView WebPart Example

Use a DataView Web Part to connect to represent data from a SharePoint

Example: Represent a Hockey Teams Statistics (Goals and Assists)

Page 29: CVCC - Data Visualization and VisiFire

SharePoint Designer DataView Web Part ExampleHow do you do it

Step 1. Create List within SharePoint SiteColumn: 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="/"> <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(&quot;Visifire.xap&quot;); vChart2.setDataXml(xmlString); vChart2.render(&quot;myChart&quot;); </script> </div> </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(&quot;Visifire.xap&quot;); vChart2.setDataXml(xmlString); vChart2.render(&quot;myChart&quot;); </script> </div> </xsl:template>

A

BSPD ExampleSPD Example

Page 30: CVCC - Data Visualization and VisiFire

Sample Real-world Dashboard Solution

Page 31: CVCC - Data Visualization and VisiFire

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-

Page 32: CVCC - Data Visualization and VisiFire

ProductCatalog

Sample Real-world Dashboard Solution

Multiple Data

Sources

Challenge 1: Need Real-time information from multiple data sources

Inventory

Sales

Page 33: CVCC - Data Visualization and VisiFire

Sample Real-world Dashboard Solution

OverlappingProduct Lines

Multiple PortalDisplay

Locations

Challenge 2: Information Alignment

Page 34: CVCC - Data Visualization and VisiFire

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

Page 35: CVCC - Data Visualization and VisiFire

Other Ideas and Opportunities

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

Page 36: CVCC - Data Visualization and VisiFire

Final Thoughts

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

Page 37: CVCC - Data Visualization and VisiFire

References

Learn more about…

VisiFire http://www.visifire.com

Source on Google Codehttp://code.google.com/p/visifire/

VisiFire Forumshttp://www.visifire.com/forums

GNU GPL 3.0 License http://www.gnu.org/licenses/quick-

guide-gplv3.html Ryan OliveiraSolutia ConsultingSharePoint Service Line Manageremail: [email protected]

Page 38: CVCC - Data Visualization and VisiFire

Questions & Answers

Page 39: CVCC - Data Visualization and VisiFire

39

Thank You