NetAdvantage for Silverlight Data Visualization 2009.2

[Infragistics] Devin Rader / Sunday, October 11, 2009

Today Infragisics released version 2009.2 of NetAdvantage for Silverlight Data Visualization.  This release includes a number of great improvements to the existing map, timeline and chart controls and the addition of a brand new control, the XamWebBulletGraph.

Geoimagery Integration

One of the top requests for the xamWebMap was providing a way to integrate existing map services like Microsofts bing Maps into the control so that you could integrate road or satellite imagery into your application.  We’ve added the ability to do this not only for bing, but also two other map data services, CloudMade and OpenStreetMap.  The xamWebMap can now download and synchronize imagery from these services with other layers loaded in the map.  The image below shows an example of showing street level data from using the maps OpenStreetMapTileSource:

 image

The code to add the imagery integration is amazingly simple.  For the sample above, you simply create an instance of the OpenStreetMapTileSource object and assign it to the maps new MapTileSource property:

<igMap:XamWebMap x:Name="theMap" Width="800" Height="500"
       Margin
="227,84,15,0" IsAutoWorldRect="False" 
       Background
="Transparent" ViewportBackground="#FFDBEDFF"  
       WindowZoomMaximum
="40" MapProjectionType="SphericalMercator"  
       Loaded
="theMap_Loaded" WindowRectChanged="theMap_WindowRectChanged"> 

   
<igMap:XamWebMap.MapTileSource>  
       
<igMap:OpenStreetMapTileSource /> 
    </
igMap:XamWebMap.MapTileSource> 

   
<igMap:XamWebMap.Layers>  
       
<igMap:MapLayer x:Name="mapLayer" Brushes="Transparent" /> 
    </
igMap:XamWebMap.Layers> 
   
</igMap:XamWebMap>

The CloudMade and bing tile source objects follow the same pattern, though they do require you to provide a set of user credentials.  You can find out how to obtain credentials for CloudMade and bing here or here.

The tile source objects are also designed to be extensible, allowing you to create your own custom tile sources to support your own tile servers.

SQL Server Shape Data Source

Another highly requested feature for the xamWebMap was the ability to use SQL Server 2008 as a source of shape data, instead of or in addition to shapefiles.  To enable this, the xamWebMap now includes the new SqlShapeReader class which, like the ShapeFileReader, provides a mechanism for loading map shapes and shape data.  The SqlShapeReader is specialized to load data that is stored in the SQL Servers GEOMETRY and GEOGRAPHY types.

Like the ShapeFileReader, the SqlShapeReader is added to a MapLayer and allows you to set a data mapping on it to map data values from your data source objects into map shapes.  This is shown in the following snippet:

<igMap:MapLayer LayerName="CountryLayer" FillMode="Chloropleth">
   
<igMap:MapLayer.Reader>
       
<igMap:SqlShapeReader
               DataMapping="Name=Name;Data=SpatialValue;
               Value=Value;Caption=CountryCode"
 />
    </
igMap:MapLayer.Reader>
   
<igMap:MapLayer.ValueScale>
       
<igMap:LinearScale />
    </
igMap:MapLayer.ValueScale>
</igMap:MapLayer>

In this sample, you can see that one of the Key/Value pairs being defined is Data=SpatialValue.  Data is the map property that accepts the shape data, and SpacialValue is the property of the bound data object that holds the actual SQL shape data.

To provide the data to the SqlShapeReader, you can simply set up a web service to pass the data into your application, then set that data as the readers data source, as shown below:

   1:  reader.DataSource = e.Result.MapData;
   2:  theMap.Layers["CountryLayer"].ImportAsync();

 

During data binding, the Map will parse the Key/Value pairs defined in the DataMapping and attempt to map properties from the bound object to properties of the map.

BulletGraph

The XamWebBulletGraph is a new control to the product.  If you are unfamiliar with a bullet graph, its an information display format similar to a gauge or progress bar designed by noted data visualization expert Stephen Few primarily for information dashboards.  A primary advantage of the Bullet Graph is its fantastic ability to show a lot of information in a very compact form which is ideal for dashboards.  You can read more about BulletGraphs here.

image

The XamWebBulletGraph closely follows Fews specification allowing you to define Ranges, Feature Measures and Comparative Measures.  The API for the control also follows this simple pattern:

<igGauge:XamWebBulletGraph x:Name="BulletGraph1" Height="80">
   
<igGauge:XamWebBulletGraph.Scale>
       
<igGauge:QuantitativeScale Minimum="0" Maximum="30"
                 Background
="#FFF7944F" Interval="5">
           
<igGauge:QuantitativeScale.TickMarkGroup>
               
<igGauge:BulletGraphTickMarkGroup 
                         Stroke
="#FF999999" Thickness="1" /> 
            </
igGauge:QuantitativeScale.TickMarkGroup>  
           
<igGauge:QuantitativeScale.LabelGroup> 
               
<igGauge:BulletGraphLabelGroup StringFormat="{}{0} K" 
                         Foreground
="#FF666666" /> 
            </
igGauge:QuantitativeScale.LabelGroup> 
           
<igGauge:QuantitativeScale.Ranges>  
               
<igGauge:QualitativeRange 
                         Value
="14" Background="#FFD62F19" /> 
                <
igGauge:QualitativeRange 
                         Value
="25" Background="#FFEB5E28" /> 
            </
igGauge:QuantitativeScale.Ranges> 
       
</igGauge:QuantitativeScale>  
   
</igGauge:XamWebBulletGraph.Scale>  
   
<igGauge:XamWebBulletGraph.FeaturedMeasures>  
       
<igGauge:FeaturedMeasure Value="26" StartExtent="0.4" EndExtent="0.6" 
                 Background
="White" Width="0"  /> 
    </
igGauge:XamWebBulletGraph.FeaturedMeasures>  
   
<igGauge:XamWebBulletGraph.ComparativeMeasures> 
       
<igGauge:ComparativeMeasure Value="22" Background="White" Width="3" 
                 Thickness
="3" EndExtent="1" StartExtent="0" />
    </
igGauge:XamWebBulletGraph.ComparativeMeasures> 
</igGauge:XamWebBulletGraph>

XamWebChart – Crosshairs

Crosshairs, a small, but important feature has been added to the XamWebChart:

image

You can choose to have horizontal, vertical or both crosshair lines shown:

<igChart:XamWebChart.Crosshairs>
   
<igChart:Crosshairs Enabled="True">
       
<igChart:Crosshairs.VerticalCrosshair>
           
<igChart:CrosshairLine Fill="#FFB4B4B4" Thickness=".5" />
        </
igChart:Crosshairs.VerticalCrosshair>
       
<igChart:Crosshairs.HorizontalCrosshair>
           
<igChart:CrosshairLine Fill="#FFB4B4B4" Thickness=".5" />
        </
igChart:Crosshairs.HorizontalCrosshair>
   
</igChart:Crosshairs>
</igChart:XamWebChart.Crosshairs>

And of course you have complete control over styling the lines, which allows you to change the line style, color, width, etc.

 

 

 

XamWebTimeline - Anti-Collision Labels

Finally, we have enhanced the XamWebTimeline to prevent label collisions.  In version 2009.1, if your timeline included events that were spaced to close together, the event labels would begin to overlap, causing the label data to be clipped:

image

In version 2009.2, we have introduced logic into the control that prevents the labels from colliding by staggering the labels and altering their height and width as necessary:

image

This feature is enabled by default, so most users of this control will automatically be able to take advantage of it.

Summary

Along with the release, we have a bunch of new help topics and a series of videos created to provide a more complete introduction to the new features.  We are also well into our next development cycle and will be releasing as CTP in the next few week some really amazing new controls that we intend to ship in our 2010.1 release.

As always we would love to get your feedback on the controls and the new enhancements in our forums and you can check out the samples online as well.