ComponentArt

How to implement Drill-through functionality in Datazen

Marjan — Tue, 20 May 2014 18:01:00 GMT

On Datazen all Gauges and Datagrids and most of Charts can be configured to perform drill-through action to another dashboard or custom URL and based on the dashboards/URL different parameters can be passed to target dashboard or custom URL.

In this blog post I’m going to set drill-though functionality using two existing Datazen dashboards.

For configuring this feature I should first create both Source and target dashboards and here I have created two dashboards to visualize Sales metric for a store; an overview dashboard that clicking on the gauge in the dashboard transfers users to a details dashboard which lists transactions for the specific department and the selected time range.

I used an Excel datasheet structured as below for creating following dashboards using Datazen Windows8 publisher application:

And followings are two the dashboards called “Sales Overview” and “Sales Details”:

Our goal is to be able to click on the gauge on Sales Overview dashboard above and load details dashboard for selected Department and selected time range as below:

Now that both dashboards are created and related data exists for both dashboards I open Sales Overview (source) dashboard in edit mode and select Avg. Sales vs. Target gauge in Layout View:

In Visual Property there exists a feature called Drill-through Target. By clicking on that you can choose type of Drill-though and here I have selected Dashboard…

The next window is displaying a list of all existing dashboards and I selected Sales Details. As soon as you select a dashboard a list of accepting parameters in target dashboard will be displayed and you can link existing source dashboard parameters to target parameters:

When you set all passing context and apply two dashboards will link. For previewing the drill-through functionality you should save the dashboard and run it from home page and that cannot be performed in Run Preview while in edit mode.

An important note that for setting Drill-though functionality for published dashboards the published version of target dashboard should be selected during dashboard selection on source dashboard.

Also you can set more advanced drill-through features like passing default value from source dashboard to target and passing context to a Load on demand parameterized query on target dashboard when working with Datazen Enterprise.

For more details on using parameterized queries and Load on Demand feature you can check Filip’s post here.

Datazen: Load On Demand Data with Parameterized Queries

filipK — Mon, 28 Oct 2013 13:41:00 GMT

One of the great features of Datazen is its ability to download the entire data set onto the Windows 8 client and then perform all filtering and calculations locally. Not only does this make all interactions (after the initial load) instantaneous, but it also allows the dashboard to be fully functional when the connectivity is lost (as long as the administrator has allowed this for the data view being used). This makes Datazen dashboards truly mobile, as you are able to enjoy them on your mobile device on the go or while away from the office.

Even though this approach is great for most dashboards, it presents a problem when dealing with extremely large data sets. If the dashboard is dealing with hundred thousand or millions of records, downloading the entire data set can be a burden for the client, especially if it is a tablet with lower end hardware. On top of that, the time needed to transfer the data can make the initial load of the dashboard slow.

To solve this problem Datazen 2.0 has introduced parameterized queries. This allows the data views used by the dashboards to accept parameters from the dashboard and use them in the data queries (i.e. SQL, MDX) to return only the data need by the current view of the dashboard. When the end user interacts with the dashboard and changes a filter, the data queries are re-executed and again only the necessary data is sent back to be rendered in the dashboard.

Creating Dashboards with Load On Demand Data

Creating dashboards that load data on demand is a two step process. First you need to create the appropriate data views that allow parameters from the dashboards to be passed into the queries. Once this is done, you have to connect the parameters to the appropriate filters in the dashboards in order for the view to be properly used by the dashboard.

Creating Parameterized Views

Start off by creating a new data view inside your Data Source in the Control Panel. Currently parameterized views are supported for SQL and MDX queries. Note that you have to be logged in as admin or the hub owner to configure data sources in the hub.

Check the "Real Time" checkbox and then click on the "Define Parameters" link beside it. Note that since parameterized queries are executed every time the view changes in the client, they have to be real time and cannot be cached on the Datazen Server.

Here, we can configure all the parameters we need to pass from the dashboard into our query in order to optimize it. In our example we will use parameterized queries to return only results within the selected time range and only for the selected product.

Note that for the Product parameter we use the "%" symbol as a default value. This is a Transact SQL operator that will match any string, meaning that we want all values returned when nothing is specified in the parameter.

We can now click on "Done" and create our query.

In our SQL query we can now make use of the parameters by enclosing them in a set of double braces such as {{ @ParamName }}. Note that the Product WHERE clause has a special case for the empty string. The reason for this is that product selection will come from a Selection List control in a dashboard that has the "All" option enabled. When the user selects "All" the selection list will pass the empty string as a selection which we handle in our query to select all products.

We can click on Next to finish creating our query which ends the server part of the configuration.

Using Parameterized Views in a Dashboard

Once we have our parameterized view created, we can configure our dashboard to use it. In our Windows 8 Datazen client, we can create a dashboard that will have the Time Navigator for the time range selection and a Selection List to select a product. The idea is to pass the selected values to the parameterized query so that we only receive the data we need to display. Our sample dashboard can look like this:

We can go into the Data View and import the data source we created previously into our dashboard.

The data source will appear with a green P to denote that we can configure parameters on it. We can click on the gears icon beside the green P and select the Param option.

The parameter configuration screen will allow us to bind any of the available data parameters we have in our dashboard to each of the parameters available in the query.

We proceed by binding the Time Navigator selected start and end time to the two time parameters and the selected item in the Product selection list to the Product parameter.

By completing the parameter setup we have now successfully configured load on demand with parameterized queries.

We can now bind other visual controls to the Data for Product Time parameterized query. Each time one of the parameters changes through end user input, the data source will be refreshed, along with all the controls that use that data. With this approach, you do not need to configure the Product selection list to filter anything on the client since the filtering is done on the database and only the needed results are returned.

But the main advantage is that dealing with millions of records will not be any slower than dealing with a few hundred.

Create Dashboards; as sweet as Sugar!

Marjan — Wed, 27 Feb 2013 18:03:00 GMT

“Datazen” the latest ComponentArt product is so awesome that I couldn’t stop writing about it.

Here I will navigate you to create a powerful elegant dashboard just in minutes.

Simply down load the app from Datazen website or Windows store from here and install it on your windows8 machine.

Click on the live tile from start and you will see a collection of decent dashboards categorized in different concepts like below.

So if you are happy with any of them you are almost done with the design, grab one and enjoy!

If you would like to make your own customized dashboard, right click and create one or modify one of the existing.

The environment provides you the very ready to use tool box as you can build up a tailor made page in fraction of time with available most common used data visualization controls, all you need is to drag the desired item from left and drop it in designing canvas on the right and leave all the rest to adorable Datazen.

And during the design time you can play the preview to see how things are going on.

And congratulations, you are done with the design phase which has been always the most time consumer phase in a dashboard project.

In order to bind the dashboard to your data you can choose different data sources from Microsoft Excel to enterprise and cloud sources.

To integrate data simply click on the “Data View” and the smart wizard will take you through you can also save and run the dashboard, keep it as a live tile or send it over as an email attachment with all data.

Any time after you can modify the created dashboard and change the theme, color palette or design structure following the easy above steps.

Try one and enjoy, your points of view will totally be changed to dashboard creation!

Common Pitfalls in Dashboard Design

filipK — Thu, 22 Nov 2012 16:22:00 GMT

I ran across an excellent whitepaper recently. It was published a few years ago, but since it has nothing to do with technology, its content is very relevant.

In an article titled Common Pitfalls in Dashboard Design, Stephen Few outlines 13 points to be mindful of when designing dashboards. In his own words: "Knowing what to avoid isn’t everything, but it’s a good start".

The list of items to look out for is:

1.     Exceeding the boundaries of a single screen
2.     Supplying inadequate context for the data
3.     Displaying excessive detail or precision
4.     Expressing measures indirectly
5.     Choosing inappropriate media of display
6.     Introducing meaningless variety
7.     Using poorly designed display media
8.     Encoding quantitative data inaccurately
9.     Arranging the data poorly
10.    Ineﬀectively highlighting what’s important
11.    Cluttering the screen with useless decoration
12.    Misusing or overusing color
13.    Designing an unappealing visual display

From my experience with ComponentArt's Professional Services team, I can concur that a lot of these issues are common, especially for people or organizations trying to visualize their data for the first time.

Experience tells me that the key is to know who your target audience is. At the risk of sounding like a lazy middle manager trying to solving the problem without getting his hands dirty, I point you to another good article, Usable yet Useless: Why Every Business Needs Product Discovery.

Knowing your target audience, and what they need to see or what actions they need to perform will help you immensely with making the dashboard a success in its first iteration. And if that wish list becomes too long, then the key is to prioritize properly - make the most important data easily visible and the most common actions or filters obvious and accessible with the least number of clicks.

The good news is that just working with ComponentArt's Data Visualization controls will help you eliminate some of the items in the list above. And if you're still having trouble nailing the perfect look and feel, our Professional Services team can definitely help with advice.

Designing Dashboards with MVVM - Useful Patterns

filipK — Fri, 02 Nov 2012 14:07:00 GMT

The Model View ViewModel design pattern has become the de facto standard for all Business Intelligence applications created with any of the modern Microsoft frameworks. When learning to design interactive applications such as dashboards with MVVM, the most obvious annoyance is not being able to use event handlers to trigger code execution or create an entry point for user interaction.

However, one quickly learns how MVVM commands can be used to emulate event logic. It's not a steep learning curve to figure out how to port your events to commands: you create a command in the ViewModel, implement the logic of the command inside a method that the command triggers, and then in the View use the Interaction.Triggers tag inside controls to connect the control event to the ViewModel command.

Even though this works in most scenarios it has a downside - the amount of extra code needed in both the View and the ViewModel. Not only does it make the code files bloated and hard to find your way around with just a few commands, but the solution is far from elegant.

Data Bindings on the other hand are simple and clean. It would be ideal if we could accomplish everything with just Data Bindings.

The need for the event/command paradigm most commonly arises when implementing user interaction with ComboBoxes, RadioButtons, CheckBoxes or other interactive controls. But most of the commonly used interactive controls have a property such as SelectedItem or SelectedIndex that updates when a selection changes. Binding such a property with a TwoWay binding to a ViewModel property will allow you to detect an interaction in the setter of the property in the ViewModel.

Changing the View From the ViewModel

You may be thinking, yes, this is neat, but what if it is inappropriate to pile a lot of logic in the setter because the property may be set many times? Also, interactive controls such as the ones mentioned above can often totally change the UI the user sees, making many large changes to the View. How do I make changes to the UI in the View if the code entry point is in the ViewModel?

This is a common problem, but the good news is that it can also be solved with bindings. What it requires though, is a change in philosophy of the design of the application.

Instead of thinking that you have to instantiate, change, add or remove UI elements when the user action takes place, one can add the code for all the possible elements a user may see at some point in the View. The key is then to control the Visibility of each element, depending on the user selection. This is done by binding the Visibility property of the FrameworkElement to the appropriate ViewModel property. It may sound complicated at first, but in reality it creates code that is clean, easy to follow and easy to manage.

The final piece of the puzzle, that makes this approach very smooth, is to use a Value Converter to connect the Visibility property of the UI element to the selected property of the interactive UI control. In most cases, this eliminates any extra code that may be needed to make the Visibility property value compatible with the ViewModel property being set.

For example, let's say we have a ComboBox, where the user can choose 'Chart View', to see a chart with the data, or 'Data View', to see a GridView with the data. The following code is needed in the View:

<ComboBox Name="ViewCombo" SelectedItem="{Binding SelectedView, Mode=TwoWay}">
  <ComboBoxItem Content="Chart View" />
  <ComboBoxItem Content="Data View" />
</ComboBox>

<Grid x:Name="ChartContainer"
      Visibility="{Binding SelectedView, Converter={StaticResource EqualToVisibilityConverter}, ConverterParameter='Chart View'}" >                  
    <charting:XYChart ....                 
</Grid>

<Grid x:Name="GridViewContainer"
      Visibility="{Binding SelectedView, Converter={StaticResource EqualToVisibilityConverter}, ConverterParameter='Data View'}" >
    <DataGrids:GridView ...           
</Grid>

Of course, we need to have the SelectedView property in the ViewModel, and implement the value converter:

public class EqualToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value != null && value.Equals(System.Convert.ChangeType(parameter, value.GetType(), culture)) ? 
                         Visibility.Visible :
                         Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Now you are armed with a technique that will allow you to change the View from the ViewModel. If you think about it, anything can be 'changed' in the view by implementing all of the possibilities and controlling their Visibility. Also, there are no performance handicaps with this approach, at least with Microsoft's technologies Silverlight, WPF and Win RT applications, as controls that have their Visibility set to Hidden are not rendered and CPU cycles are not wasted on them.

But best of all, you do not have to deal with the cumbersome commands.

DeltaIndicator in ComponentArt DataVisualization 2012

Marjan — Tue, 09 Oct 2012 18:18:00 GMT

DeltaIndicator is introduced in ComponentArt DataVisualization 2012 which is a very useful control especially in financial statistics analysis dashboards.

It is a bundle of triangle indicator, value and a percentage next to each other as I added three of them below:

The .xaml tag to have a DeltaIndicator would be as:

 <common:DeltaIndicator Value="{Binding TotalAmount}"   Target="{Binding TotalTarget}"
                    FontFamily="Segoe UI" FontSize="12" FontWeight="Bold" 
                    VerticalAlignment="Center" HorizontalAlignment="Left"/>

The logic of DeltaIndicator is covering the basic mathematics delta definition via two “Value” and “Target” properties which will indicates the color and triangle direction next to demonstrated value in the visualization.

The showing value is the difference of “Value” and “Target” which have been assigned and the percentage is the difference value compared to target value.

What I really like about this control is that color conversion is handled automatically based on the Value and Target amounts.
If the difference result turns to be negative it will be shown in red with down side triangle, when the result is positive the color would be green with upside triangle and if the result becomes zero it will be populated in yellow which indicates neutral.
DeltaIndicators can be integrated with other ComponentArt DataVisualization 2012 such as XYChart and it is also available in KPINavigationTiles .

KPINavigationTiles is a member of KPI Concepts which have been introduced in ComponentArt DataVisualization 2012, for more details you can read Jeremy Rodgers blog post.

For implementing DeltaIndicator in XYChart you can check ComponentArt DataVisualization 2012 Online Documentation.

Tablet Sales Projections for 2013 - Are Analysts Missing the Big Picture?

miljan — Wed, 03 Oct 2012 20:15:00 GMT

I'll start with a disclaimer: ComponentArt does have a horse in this race. Even though our BI dashboards can target any device via HTML5, we see the biggest opportunity in Windows 8 and have invested heavily into delivering a premium BI experience for this platform through our set of native XAML-based technologies. Perhaps the fact that I want Windows 8 to succeed is clouding my judgement about where things are going, but nevertheless please bear with me as I share my contrarian view on this.

A couple of weeks ago, IDC published their forecast for media tablet sales. They are projecting 6% market share for Windows 8 in 2013, totalling less than 10 million tablets sold:

That number seems awfully low to me. Even a moderately successful Microsoft Surface RT tablet alone should be able to get close to 10 million units sold in 2013. Since market adoption of MS Surface is a big question mark at this point (I think a lot hinges on how awesome that keyboard cover will be), let's zoom out a bit. Surface won't stand as the only Windows 8 tablet. It will be joined by tablets from other vendors including Samsung, HP, Lenovo, Dell, Asus:

These are big companies with a lot of marketing muscle and they have pretty decent hardware lined up, especially for enterprise use. The more successful among them should be able to move a few million units each. But even that doesn't tell the whole story.

Laptop-Tablet Convergence – The Big Story for 2013?

The line between tablets and laptops is definitely blurring with Windows 8. Let's start with MS Surface: it is a tablet with an integrated keyboard and MS Office running on it. That covers a large number of laptop usage scenarios for a lot of people right there. Then we have MS Surface Pro coming out in Q1 2013, which will actually run *any* PC app, including such powerful pieces of software like Adobe Photoshop. On top of that, we have an unprecedented lineup of interesting portable computer hardware ready to ship this fall: laptop-tablet hybrids, clamshell laptops with touch screens, and crazy new concept creations like Lenovo Yoga or that Asus dual screen gizmo:

Why is the laptop-tablet convergence story significant?

Well, let me show you another chart:

This brings me to my main point:

Laptops are not growing that fast, but in absolute terms they still outnumber tablets handily. Since the new hybrid devices cover the same functionality as laptops, it is reasonable to expect that they will get a healthy portion of those 200M+ would-have-been-laptops sold in 2013.

Given all of these factors, it is difficult for me to see how the total number of Windows 8 tablets sold in 2013 can be merely 10M. On the contrary, we may see an entirely different storyline emerge by the end of next year.

While we are talking about big numbers, it's worth mentioning that Microsoft is targeting a total of 400M Windows 8 installations (across all device types) by mid-2013. I'll explain in a follow-up post why I think this is realistic (hint: half of the answer is already obvious from the chart above).

Dashboard Data and KPI Concepts

jrodgers — Wed, 03 Oct 2012 17:31:00 GMT

ComponentArt DataVisualization 2012 introduces two new data manipulation classes called GenericTable and KPIData, respectively. If you've ever had to write complex code-behind to massage your data into a format suitable for display you will appreciate the ease with which this can now be accomplished. In this blog post I'll walk you through some common usage patterns for these new performance-optimized classes. Keep in mind that these classes are suitable for manipulating primarily time-based data.

KPIData Objects

KPIData objects implement what are commonly known as "Numeric Key Performance Indicators". KPIData objects are, internally, a collection of KPIVariables, each KPIVariable represents the variation of a numeric value over a period of time for example: daily sales, monthly targets, quarterly expenses, yearly projections, etc. KPIData objects are able to contain any number of metrics(KPIVariables) all joined on a DateTime field, regardless of the granularity or time unit of the input data. For instance monthly data for one metric and daily data for another metric can both be contained in one KPIData object as they relate on their DateTime fields.

When queried for a value in a time unit that is larger than that of the input data the KPIData object will 'roll-up' or aggregate the input data, conversly, if queried for a value in a time unit smaller than that of the input data the KPIData object will 'roll-down' or divide the the larger time unit values equally into the requested time unit.

By plotting KPIVariable values along a unified date/time range and providing the ability for developers to query those values for any date/time range and in any time unit, KPIData objects eliminate the need for complex LINQ statements and allow ComponentArt controls to work directly with multiple sets of additive time based data with minimal code.

Instantiating KPIData objects

In order to generate KPIData objects data should first be used to populate a GenericTable. GenericTables parse and store data as well as information relating to the data fields, types and date/time relationships. A GenericTable can be populated with an IEnumerable collection as follows.

GenericTableFromIEnumerable myGenericTable = new GenericTableFromIEnumerable(myIEnumerable)
{
    InputDataTimeUnit = TimeUnit.Month,
    DateFieldName = "Month"
};

By specifying the input data TimeUnit or granularity the GenericTable is able to properly generate KPIData based on the DateTime field and TimeUnit. If the IEnumerable contains only one DateTime field, that field will be used to plot the objects in time, otherwise the first DateTime field will be used unless specified as it is in the example above.

Once data has been loaded into a GenericTable KPIData can be extracted in a number of ways.

GenericTable.GetKPIData

The simplest way to generate KPIData from a GenericTable is to call its GetKPIData() method. This will return a KPIData object which contains one KPIVariable for each numeric value field in the GenericTable.

KPIData myKPIData = myGenericTable.GetKPIData()

GenericTable.KPIDataByCategory

In some cases the data contained within a GenericTable should be grouped or pivoted by a field when generating KPIData. This can be done by calling the KPIDataByCategory(string valueColumnName, string pivotColumnName) method of GenericTable. This will return a KPIData object with a KPIVariable for each unique value in the pivot column. The resulting KPIData is suitable for use with MicroGroupSeries MicroCharts. The following code will create a KPIData object with numeric KPIVariables for each unique string in the "Products" field of the dataset.

// "Date","Sales","Product"
// "01/01/2012","2503","Product A"
// "01/01/2012","7920","Product B"
// ...

KPIData myPivotedKPIData = myGenericTable.KPIDataByCategory("Sales", "Product");

// "TimeRange","Product A","Product B"
// "01/01/2012 - 31/01/2012","2503","7920"
// ...

This pivot can be reversed later in order to populate controls which cannot consume KPIData directly. By first pivoting the data you can make use of KPIData objects and their ability to roll-up, roll-down and interpolate data for any TimeUnit before reversing the pivot. The KPIData methods GetItemsWithPivotInRange(DateTime start, DateTime end, TimeUnit timeUnit) and GetItemsWithPivotPerTimeUnit(TimeUnit timeUnit) will return IEnumerable collections with TimeRange, value and "Pivot" fields suitable for use with XYChart and SeriesPath.

// "TimeRange","Product A","Product B"
// "01/01/2012 - 31/01/2012","2503","7920"
// ...

IEnumerable myIEnum = myPivotedKPIData.GetItemsWithPivotPerTimeUnit(TimeUnit.Month);

// "TimeRange","Value","Pivot"
// "01/01/2012 - 31/01/2012","2503","Product A"
// "01/01/2012 - 31/01/2012","7920","Product B"
// ...

Querying KPIData objects

Once a KPIData object has been populated it can then be queried to product an IEnumerable collection of its values for any date/time range and at any TimeUnit. There are a number of methods available with which to query KPIData objects.

KPIData.GetItemsPerTimeUnit

The KPIData method GetItemsPerTimeUnit(TimeUnit timeUnit) returns an IEnumerable collection of the values contained within the KPIData object along with a TimeRange field. When queried for a time unit that is larger than the input data TimeUnit the KPIData object will 'roll-up' or aggregate the input data, conversly, if queried for a time unit smaller than that of the input data the KPIData object will 'roll-down' or divide the the larger time unit values equally into the requested time unit.

IEnumerable myIEnum = myKPIData.GetItemsPerTimeUnit(TimeUnit.Month);

KPIData.GetItemsInRange

The KPIData method GetItemsPerTimeUnit() will return the entire range of values contained within the queried KPIData, developers may also query for a specific date/time range using the GetItemsInRange(DateTime start, DateTime end, TimeUnit timeUnit) method.

IEnumerable myIEnum = myKPIData.GetItemsInRange(DateTime.Now.AddYears(-1), DateTime.Now, TimeUnit.Day);

KPIData.GetSumOfVariables

The method GetSumOfVariables() will sum the KPIVariables contained within a KPIData object and return a single KPIVariable of the aggregated fields. Once created this KPIVariable can be queried with its GetValueForRange(TimeRange range) method, or its override GetValueForRange(DateTime start, DateTime end), to access the aggregated value for a date/time range. These methods are perfect for quickly determining totals of a metric across any timespan.

KPIVariable myAggregatedValues = myKPIData.GetSumOfVariables();
double myAggregateDouble = myAggregatedValues.GetValueForRange(DateTime.Now.AddYears(-1), DateTime.Now);

Another handy method which can be used with KPIVariables is KPIVariable.ValueInRangeLastYear(TimeRange range) which will return the aggregated value for the specified period the previous year.

KPIVariable myAggregatedValues = myKPIData.GetSumOfVariables();
double myAggregateDoubleCurrent = myAggregatedValues.GetValueForRange(DateTime.Now.AddYears(-1), DateTime.Now);
double myAggregateDoubleLastYear = myAggregatedValues.ValueInRangeLastYear(new TimeRange(DateTime.Now.AddYears(-1), DateTime.Now));

KPIData.GetItemsWithPivotInRange, KPIData.GetItemsWithPivotPerTimeUnit

As mentioned above, KPIData objects may also return pivoted, or "ungrouped" data when KPIDataByCategory() was used to generate the KPIData object. The KPIData methods GetItemsWithPivotInRange(DateTime start, DateTime end, TimeUnit timeUnit) and

GetItemsWithPivotPerTimeUnit(TimeUnit timeUnit) will return IEnumerable collections with TimeRange, value and "Pivot" fields suitable for use with XYChart and SeriesPath.

// "TimeRange","Product A","Product B"
// "01/01/2012 - 31/01/2012","2503","7920"
// ...

IEnumerable myIEnum = myPivotedKPIData.GetItemsWithPivotPerTimeUnit(TimeUnit.Month);

// "TimeRange","Value","Pivot"
// "01/01/2012 - 31/01/2012","2503","Product A"
// "01/01/2012 - 31/01/2012","7920","Product B"
// ...

Populating Charts with KPIData

One of the most common uses of KPIData is for populating Chart and MicroChart controls. KPIData objects handling of date/time ranges make them ideal for use with time based charts.

MicroCharts

There are two basic types of MicroCharts which can be used with KPIData, the first can be referred to as static series charts this can be comprised of a single series or a number of series but these are statically defined series. These types can be populated with a KPIVariable extracted from a KPIData object as follows.

myKPIMicroChart.DataSource = myKPIData["Sales"].GetValuesForTimeUnit(TimeUnit.Day);

<charting:MicroBarSeries 
                  x:Name="myKPIMicroChart"
                  XPath="TimeRange"
                  YPath="Value" />

This MicroBarSeries is populated with a single KPIVariable source, because of this there is no need to refer to a specific field name other than "Value" for the YPath.

For dynamic MicroChart series, MicroGroupSeries can be used with KPIData sources directly to auto-generate series based on the available KPIVariables in the KPIData object used as a DataSource.

<charting:MicroGroupSeries 
    x:Name="myKPIMicroChart"
    XPath="TimeRange"
    CompositionKind="Stacked">
    <charting:MicroGroupSeries.ChildSeriesTemplate>
        <DataTemplate>
            <charting:MicroBarSeries />
        </DataTemplate>
    </charting:MicroGroupSeries.ChildSeriesTemplate>
</charting:MicroGroupSeries>

In this instance the YPath for each series is set automatically based on the available KPIVariables in the KPIData object driving the MicroGroupSeries. This DataTemplate is duplicated once for each KPIVariable and arranged in the specified CompositionKind, in this case the series will be Stacked.

XYCharts

Populating static series XYCharts with KPIData is a relatively straight forward task. The main concept to note is that the XPath and YPath may not match the original input data as when utilizing KPIData DateTime fields are replaced with a TimeRange field that is unified between KPIVariables, therefore the XPath on most KPIData driven XYCharts should be set to "TimeRange" rather than any specific DateTime field name.

myKPIXYChart.DataSource = kpiSeriesDataSource.GetItemsPerTimeUnit(TimeUnit.Month);

<charting:XYChart x:Name="myKPIXYChart"
                  XPath="TimeRange">
    <charting:AreaSeries YPath="Sales" />
    <charting:BarSeries YPath="Targets" />
</charting:XYChart>

Because this chart is populated from a KPIData object which contains multiple KPIVariables, the YPath must be set to a specific KPIVariable name (usually based on the field name from the original input data). By using KPIData and not KPIVariables the XYChart can have multiple series based on different KPIVariables plotted along the same date/time range.

In the case of dynamic XYCharts KPIData must be pivoted using KPIData.GetItemsWithPivotInRange or KPIData.GetItemsWithPivotPerTimeUnit as decribed above and assigned with the SeriesPath property.

<charting:XYChart x:Name="myKPIXYChart"
                  XPath="TimeRange">
    <charting:AreaSeries YPath="Value" SeriesPath="Pivot" />
</charting:XYChart>

When pivoting KPIData for use with XYChart it's important to note that the new pivoted field should be referenced as "Pivot" as any field name data would have been lost in the initial grouping or pivoting when creating the KPIData.

Thanks for reading this introduction to the new KPI classes in ComponentArt DataVisualization 2012, these techniques can be used in any of the three supported frameworks, WPF, Silverlight and the Windows Runtime. Once mastered you will not only be able to produce visualizations more quickly but you will also benefit from performance that bests LINQ for additive/cumulative data allowing you to deliver fast and fluid user experiences across the board.

Introducing MicroCharts to ComponentArt Data Visualization

milos — Wed, 03 Oct 2012 17:31:00 GMT

The latest release of Data Visualization for Visual Studio includes many additions and improvements over the previous iteration of the suite, all of which are aimed at streamlining the process of developing dashboard applications and improving the resulting experience.

MicroCharts were introduced as part of this strategy. The idea behind MicroCharts is to address some common cases where charting is used in a very stripped-down form, to make these cases easier to implement and more efficient to run. Column, line and area charts embedded within instances of TimeNavigator, NavigationTile or GridView are examples of such scenarios. The XYChart control does a great job of covering a vast set of charting functionality, but much of it is simply not needed in these cases and distracts from the main task: displaying a basic data shape quickly and lightly, without regard to coordinate system grids or annotations, legends, labels, popups or custom templates. Simple, clean, fast.

MicroCharts are also built to take advantage of KPIData, another new addition to the Data Visualization suite. KPIData can be used for combining, comparing and aggregating time-based data sets of any granularity, and is especially useful for managing automatic roll-ups in the context of time navigation. In cases where a rich visualization is called for inside a TimeNavigator, we can now use MicroChart instance. In the following example, we want a stacked column chart to appear, fed from a KPIData set with multiple KPIVariables. We use a MicroGroupSeries with a MicroBarSeries in the template to define a dynamic group of stacked columns to be created from the data:

<charting:MicroGroupSeries XPath="TimeRange" DataSource="{Binding MyKPIData}" CompositionKind="Stacked">
  <charting:MicroGroupSeries.ChildSeriesTemplate>
    <DataTemplate>
      <charting:MicroBarSeries />
    </DataTemplate>
  </charting:MicroGroupSeries.ChildSeriesTemplate>
</charting:MicroGroupSeries>

In conjuction with TimeNavigator, we will often want to use KPINavigationTiles, another newly added concept in Data Visualization. KPINavigationTiles is a control for visualizing TimeNavigator selection presets and allowing them to be interactively selected. It is another perfect fit for MicroCharts. In the ItemTemplate (the DataContext for which is KPIData), we can do something like this:

<charting:MicroGroupSeries XPath="TimeRange" DataSource="{Binding}" CompositionKind="Stacked">
  <charting:MicroGroupSeries.ChildSeriesTemplate>
    <DataTemplate>
      <charting:MicroBarSeries />
    </DataTemplate>
  </charting:MicroGroupSeries.ChildSeriesTemplate>
</charting:MicroGroupSeries>

Here again we've used a group of MicroBarSeries, generated from the data set. In addition to MicroBarSeries, MicroAreaSeries and MicroLineSeries may be used in the same way, to produce simple area and line graphs, respectively.

The lightweight nature of MicroCharts also makes them suitable for use in scenarios where they may be repeated many times in a templated control, like a GridView column:

<datagrids:GridViewTemplateColumn Header="Sales History">
  <datagrids:GridViewTemplateColumn.CellTemplate>
    <DataTemplate>
      <Grid>
        <charting:MicroAreaSeries Margin="3" Color="#FF9400" DataSource="{Binding SalesHistory}" XPath="Date" YPath="Sales" />
      </Grid>
    </DataTemplate>
  </datagrids:GridViewTemplateColumn.CellTemplate>
</datagrids:GridViewTemplateColumn>

In this case, we used a MicroAreaSeries, which gives us a simple area chart in each cell of the templated column:

Developing Mobile Dashboards for ComponentArt Dashboard Server

milos — Fri, 14 Oct 2011 18:16:00 GMT

What is ComponentArt Dashboard Server?

Since our recent announcement of ComponentArt Dashboard Server, there has been a lot of interest and excitement about the technology, and understandably so:

We can now target any mobile device including iPads, iPhones, Android phones and tablets, BlackBerry phones, PlayBooks, upcoming Windows 8 tablets in addition to all desktop and laptop browser environments.
We can develop our entire application in the XAML environment we know and love.
We can use all of Data Visualization for .NET, with its extensive and mature feature set and high degree of graphical sophistication, and get pixel-perfect rendering and rich interactivity on all HTML5 devices.

How does Dashboard Server work?

A key part of the Dashboard Server system is the Dashboard Server SDK. Delivered as a Visual Studio extension package, the SDK provides a quick way to get started with a Mobile Dashboard project and proceed as one would with any XAML development. The Mobile Dashboards are developed entirely in this familiar environment.

At compile time, the SDK build environment produces a XAP containing Silverlight dashboards to be deployed to Silverlight-capable clients, as well as an EXE containing server-side (WPF) versions of the same dashboards to be processed on the server and translated to HTML5 and other formats at runtime. The procedure adds very little overhead to the compilation process and is entirely removed from the developer-facing experience.

The result is a web application ready to be deployed to an IIS web server. It includes all the assemblies it depends on and can be configured in its web.config file or by using a separate Dashboard Server Admin application.

Requests to the application are directed to the Dashboard Server HTTP handler, which determines the best possible output based on client capabilities, screen dimensions and orientation. Out of the box, Dashboard Server produces pixel-perfect rendering on any device, with interactive features where supported. In general, all Data Visualization for .NET controls have animation and interactivity support for HTML5 devices.

So, we have two parallel client output scenarios in each Dashboard Server web application: Silverlight XAP output and server-side rendering with custom HTML5 renderers for Data Visualization controls.

Developing Mobile Dashboards for DS

To ensure that a Mobile Dashboard application works perfectly in the Dashboard Server environment, we must satisfy three main requirements:

The application must strictly follow MVVM architecture. Using MVVM lets us abstract out the semantics of the application from its implementation (and client-side output) so we can ensure that XAML views can be processed, serialized, rendered and cached independently and safely. The SDK comes with starter templates and base view model classes which are useful for getting off the ground quickly.
The application must use Data Visualization for .NET controls for animated and/or interactive visualizations. All other controls will be static in HTML5.
The application must use UI controls that come with the Dashboard Server SDK for basic interactivity – these come with out-of-the-box HTML5 renderers. A mechanism exists for creating a custom HTML5 renderer for any XAML control, but this requires a non-trivial development effort.

Let’s Do This!

With the Dashboard Server SDK installed on our workstation, we can open Visual Studio 2010 and start a new project. We select a basic Dashboard Server project template and give the project a name:

The SDK produces a starter solution with a familiar layout: a Silverlight project, and a Web project to host the Silverlight application:

When we look inside, we notice some additions to the solution: references have been pre-configured, the projects are set up with automated build tasks for compile-time processing, and the web application is set up with the Dashboard Server HTTP handler and a useful start page with links to it.

In the Silverlight project, there is a folder named Xaml which contains a sample dashboard template, DashboardTemplate.xaml. This template implements a base class which facilitates rendering in the Dashboard Server environment; it is recommended that your application continue this practice. In DashboardTemplate.xaml.cs, we implement the ApplyDefaultView method, which is there to help us set up a fresh dashboard view and in this case is also used to populate the dashboard with some static sample data. Next to the template, in DashboardTemplateViewModel.cs, is a view model implementation, which inherits from DashboardViewModelBase. This base class is useful for implementing dashboards driven by TimeNavigator; it and others like it are provided in the project template as a development aid.

The template itself consists of a single instance of the DashboardLayout control, which contains a TimeNavigator at the top (with embedded XyChart visualization), another XyChart below that, bound to the data subset selected in TimeNavigator, and a RadialGauge, bound to the Value property of DashboardTemplateViewModel.

We can already compile and run this application, and examine its output in all the various formats supported by Dashboard Server.

In our browser, we can view and interact with the Silverlight dashboard.

We can also grab our tablet and visit the same application, which gives us HTML5 output and touch interaction.

From here, we can start setting up data access (preferably via WCF web services), re-designing our dashboard screen, and adding new screens to the application.

We hope you are excited as we are about our approach to mobile dashboard development, and we look forward to your feedback.

ComponentArt's Technology is Ready for Windows 8 Today

miljan — Thu, 22 Sep 2011 15:49:00 GMT

Last week at the 2011 BUILD conference Microsoft unveiled their grand strategy for Windows 8. In the process they really set the direction for all Microsoft-based client technologies for the next decade. It is worth acknowledging the magnitude of this occasion. We should also note the difficult position from which the Redmond-based software giant had to make its move. There is immense pressure from all of the modern, touch-centric tablet devices – most notably Apple’s iPad – that represent the fastest-growing segment in the industry and are actually starting to chip away from the PC market share. At the same time, Microsoft **must** support millions of applications already written for Windows that their legions of customers expect to work flawlessly in the next version of Windows. To remain relevant, Microsoft had to come up with an answer that somehow satisfies both extremes of the app spectrum.

As it turns out, Microsoft came up with something quite compelling:

Windows 8 will provide two UI operation modes or “shells”:

“Metro Style”. This is the new “immersive experience” mode, optimized for touch input and designed to compete with all modern tablet devices. Metro style applications can be built in HTML5 and JavaScript or XAML and C, C++, C#, or VB. Note that the Metro version of IE doesn’t allow plug-ins, so Silverlight or Flash are not supported in the Metro browser. Reasons cited for this are: battery life, security, reliability and privacy.
“Classic Desktop”. This mode will be very familiar to anyone using Windows 7. The classic mode will continue to be appropriate for “work at your desk” scenarios and all applications that run on Windows 7 will run happily in this mode. Silverlight and other browser plugins will continue to be supported the way they work today. Interestingly, when a user in Metro mode encounters a web page that requires a Silverlight plugin, they can instantly switch to desktop mode and run the Silverlight app.

To make things even more interesting, Microsoft is extending the Metro application model to Windows Phone and Xbox – making a truly unified development platform for all client devices. It is great to see that Microsoft is willing to make bold moves like this and declare a “multi-front war”, as our friend David Wihl from SoftArtisans put it.

What makes us at ComponentArt excited about Microsoft’s new direction is the fact that our technology perfectly fits into this model. In fact:

ComponentArt is the only vendor that provides the tools today to target both “Metro” and “Classic” Windows 8 experience through a single XAML code base, thanks to our new Dashboard Server product that converts XAML dashboards to HTML5 in real time without the need to write a single line of JavaScript code.

Anything you build with our XAML-based Data Visualization tools today will run on Windows 8, either as a native XAML application or HTML5 app – your choice! The key point is that you develop your dashboard only once in XAML and deploy either as XAML or HTML5 through ComponentArt Dashboard Server.

The best way to experience this XAML-HTML5 rendering parity delivered by our new Dashboard Server product is to try our live mobile dashboard demos in a desktop browser and switch between Silverlight and HTML5 outputs. As you will see, the product features pixel-identical rendering between XAML and HTML5 and near feature parity.

We hope that you will enjoy our new technology and are looking forward to your feedback!

MSDN Webcast: Leveraging DataMarket to Create Cloud-Powered Digital Dashboards

milos — Mon, 16 May 2011 19:08:00 GMT

Hi everyone,

The ComponentArt production team has been very busy wrapping up Data Visualization 2011, which is coming very soon, but I'll be taking some time out next Tuesday to talk about cloud-powered digital dashboards. If you'd like to learn a bit about Microsoft's Azure DataMarket, or just see some cool visualizations in action, go ahead and register for the webcast. Hope to see you all there!

UPDATE: Thanks to all who tuned in! Hope you found it informative. If you couldn't make it, no problem! You can see a replay of the webcast here.

Introducing Mobile Dashboards for Windows Phone 7

miljan — Mon, 14 Feb 2011 22:05:00 GMT

I am very pleased to announce our latest release -- ComponentArt Data Visualization for Windows Phone 7 -- the industry's first complete framework for building interactive mobile dashboards targeting Microsoft's new mobile operating system. There are several exciting elements of our product release, however, before I get into those details, I would like to start off by sharing some thoughts on the Windows Phone 7 platform itself.

My Quick Take on Windows Phone 7

We started playing around with WP7 late last year with relatively low expectations. Common sense would dictate that the feature set of the first release would leave a lot to be desired and that it would take Microsoft some time to catch up to Apple, Google or even RIM.

As it turns out, we were up for a series of pleasant surprises, first of which was Metro – WP7's amazing user interface paradigm. It is flat, smooth, modern-looking and it gives so much real estate and breathing room when developing apps through its vertical-scrolling-with-horizontal-swiping concept. Apps that take full advantage of Metro definitely come off big and powerful. To illustrate this point, take a side-by-side look at the official IMDB app for Windows Phone 7 and the official IMDB app for iPhone. After using these apps for a few minutes I think most people will agree that the iOS version feels dated. The notion that Microsoft would be beating Apple on user experience is unexpected and almost unbelievable, but it appears to be true.

The deeper we looked into Windows Phone 7, the more apparent it became that the entire platform and the ecosystem behind it are real, ready for prime time and have immense potential. App developers are already there in large numbers through Silverlight and Visual Studio. The current lineup of apps in the Marketplace speaks for itself. Top notch games are also already plentiful thanks to the Xbox development community and XNA. Music and other media are available through the very clean Zune application (I sure don't miss the iTunes client!). As for the enterprise, it is no surprise that Microsoft comes through with great back office integration and productivity apps.

All in all, Windows Phone 7 is a real contender in the mobile space. Nokia's announcement on Friday should come as no surprise to anyone who has taken a deep look at Microsoft's new mobile platform. If you want to participate in the growth of the WP7 ecosystem, all you need to get started is Visual Studio 2010 and rudimentary Silverlight skills. Please see Jeremy's blog post for more details.

Our Windows Phone 7 Release

With Data Visualization for Windows Phone 7, our goal was to enable the development of next-generation mobile business intelligence applications. We have created specialized versions of Windows Phone 7 charts, gauges, maps, datagrids and time navigators by porting almost the entire Data Visualization for Silverlight codebase. This allowed us to deliver an extensive feature set from the very first release. Each component has been extensively optimized for smaller screens and mobile CPUs, touch interface support, including fine-tuned interactivity, pinch and flick gestures, customized skins and minified Map shape files.

Going beyond the standard data visualization controls, ComponentArt's TimeNavigator for Windows Phone 7 proves to be an invaluable element of interactive mobile dashboards. Designed to enable quick, easy and intuitive date range selections, the control has been re-engineered specifically for touch screens in order to deliver an optimal experience to end users.

The entire effort took about 6 man-months, which is relatively quick considering the size of our Data Visualization codebase. An important point is that our mobile and desktop Data Visualization product lines are now based on the same code, enabling new feature additions to both platforms simultaneously as well as customer code reuse between desktop and mobile applications.

To see our Windows Phone 7 controls in action (and to experience ComponentArt’s Metro implementation in our demo app) simply search for “ComponentArt” in the App Marketplace on your Windows Phone. If you don’t have access to a physical WP7 device, simply download our demo app and run it in the Windows Phone emulator within Visual Studio.

ComponentArt’s long-term goal is to deliver the most sophisticated data visualization technology available on any mobile platform. This is just the first of many releases to come, so please let us know your thoughts on how we can expanded and improve our current product.

Getting Started with DataVisualization for Windows Phone 7

jrodgers — Fri, 04 Feb 2011 19:37:00 GMT

Windows Phone 7 represents a huge advance in mobile technology from Microsoft, ComponentArt is proud to support this exciting new platform with a full suite of DataVisualization controls for Windows Phone 7 Apps.

GETTING STARTED

Windows Phone 7 development requires the Windows Phone Developer Tools for Visual Studio 2010. They can be downloaded from http://create.msdn.com/en-us/home/getting_started.

INCLUDED CONTROLS

The following is a list of the controls included in the Silverlight 4 and Windows Phone 7 editions:

DEVELOPMENT

Developing for Windows Phone 7 using the ComponentArt DataVisualization controls is very similar to developing for the Silverlight browser-based and OOB platforms. The API calls are identical and use the same documentation. One thing you will notice is that when you test a project it launches in the Windows Phone 7 Emulator, this is a virtual phone which really assists in development and debugging. One thing to keep in mind as you develop is that the performance of an app on the emulator can differ from that on an actual phone device – sometimes the animations are smoother on the actual phone, sometimes page loading times are shorter when using the Emulator. All screen shots in this post are from the emulator.

QUICK START

In this tutorial we'll go ahead and implement a simple chart using points from a binding to an ObservableCollection type. The source for this project is included in the CTP .zip file available at http://www.componentart.com/download/dv.aspx.

Step 1.

Create a new Project, under Installed Templates select Silverlight for Windows Phone, choose a Windows Phone Application.

Step 2.

Under References add a reference to ComponentArt.Silverlight.DataVisualization.Charting.

Step 3.

Open MainPage.xaml and add the following to the Namespace declarations at the top of the file:

xmlns:my="clr-namespace:ComponentArt.Silverlight.DataVisualization.Charting;assembly=ComponentArt.Silverlight.DataVisualization.Charting"

Step 4.

Add the following to the Grid marked “ContentGrid”:

    <my:XYChart EnableAnimation="False"
                DataSource="{Binding}"
                XPath="X" >
        <my:BarSeries YPath="Y" BarKind="Block" />
    </my:XYChart>

Step 5.

Add the following to make your MainPage.xaml.cs look like this:

using System;
using Microsoft.Phone.Controls;
using System.Collections.ObjectModel;

namespace QuickStart
{
    public partial class MainPage : PhoneApplicationPage
    {
        ObservableCollection<DataPoint> PointCollectionQ1 = new ObservableCollection<DataPoint>
        {
            new DataPoint { X = "January", Y=100},
            new DataPoint { X = "February", Y=300},
            new DataPoint { X = "March", Y=600},
        };

        public MainPage()
        {
            InitializeComponent();
            DataContext = PointCollectionQ1;
        }
    }

    public class DataPoint
    {
        public string X { get; set; }
        public int Y { get; set; }
    }
}

Step 6.

Test your project in the Emulator, it should end up looking like this:

This example demonstrates how easy it is to get up and running with ComponentArt DV for Windows Phone 7.

BONUS STEP

To change the colors of the bars add the following to the XYChart tag:

UseDifferentBarColors="True" Palette="VibrantB"

Try out the different palettes that ship standard with ComponentArt DV, the full list can be found here: http://docs.componentart.com/default.aspx?content=SlDataVisualization/2010/ComponentArt.Silverlight.DataVisualization/CommonConcepts_Theming.htm under Included Palettes.

LICENSING While testing the ComponentArt WP7 Demo application the DV controls will appear as licensed, however if you use the DV controls in your own project you will need to license them to get rid of the unlicensed overlay. See the following pages in the documentation to license your project.

Product Activation:
http://docs.componentart.com/default.aspx?content=SlDataVisualization/2010/ComponentArt.Silverlight.DataVisualization/GettingStarted_ProductActivation.htm
Deploying Licensed Controls (Manually adding the ComponentArt.Silverlight.DataVisualization.lic file):
http://docs.componentart.com/default.aspx?content=SlDataVisualization/2010/ComponentArt.Silverlight.DataVisualization/CommonConcepts_Deployment.htm

Hosting a ComponentArt Dashboard in SharePoint 2010

Chris — Tue, 11 Jan 2011 21:48:00 GMT

Hosting a ComponentArt dashboard in SharePoint 2010 is a scenario which comes up a lot in conversation with clients here at ComponentArt. This is very possible using our DataVisualization package as well as standard controls (by way of the Silverlight Web Part) already present in SharePoint 2010.

We will assume that we have already created a dashboard solution using ComponentArt DataVisualization technology and also a running SharePoint 2010 installation. For the purposes of this sample, I will be using our demo package as our running dashboard solution. First we will need to create a separate website to host our Dashboard DataLayer as well as our Silverlight Xap file.

In my scenario, I want to host the Dashboard DataLayer on the same site as the SharePoint application, so I will need to assign a different port number, so they can reside on the same IP address.

I can verify that my newly created website is working by navigating to the site:

Once we have verified this as working, we will need to login to our SharePoint environment and setup our new SharePoint page.

From the home page, I am going to click Site Actions, then New Page (which will create our page).

Give my page a name, then click Create.

Now we are presented with a new page, inside page content, I want to select Editing Tools, Insert.

Now the ribbon shows a web part option. Lets select this, and select Media and Content From the Categories. Once we have selected Media and Content, we have the option on the right to select Silverlight Web Part.

This will let us display any Silverlight application to the page. Click Add. Now we will be prompted to add the url of the Silverlight Xap File. You only need the xap reference because the Silverlight Web Part will create the required object for hosting the Silverlight Application. I know that my Xap file is located in the ClientBin sub folder of that website we just created, so I will enter it, and click OK.

Now you should have a Silverlight Web Part on your page, we'll need to make some adjustments now to get our dashboard to fit inside.

We will set some options to have the dashboard fit nicely.

Now let's check in our changes, once we have checked in, we will need to publish the page.

We will now be presented with the completed page.

Now we have a SharePoint Page hosting a ComponentArt Dashboard!

Next time, I will show how to create a dashboard using SharePoint 2010 Lists and Excel Services.

HOWTO: Plotting Points on a Map

milos — Thu, 23 Dec 2010 14:10:00 GMT

IMPORTANT: Some details of the following tutorial have been made obsolete by API changes introduced in Data Visualization 2011. An updated tutorial in the live docs reflects the new functionality. The old tutorial continues below.

A common scenario faced when building maps into data visualization apps is the need to plot points at specific locations on a base map. Visually, these are usually not simple points, but are templated to be descriptive, and often trigger a popup with more information when hovered or clicked. In this post, I will provide a quick overview of how such functionality is achieved with the ComponentArt Map control for Silverlight/WPF.

To begin, we set up our base map by defining the first layer on the map, pointing to the SHP file to be used for the base shapes:

	<mapping:Map ... >
	  <mapping:Map.Layers>
		 <mapping:MapLayer ShapeFile="ClientBin/basemap.shp" ... />
	  </mapping:Map.Layers>
	</mapping:Map>

The first layer will dictate not only the shapes which are rendered as the background of the map, but also the coordinate system and the bounding box of the entire display. We must make sure that the same types of coordinates (eg. longitudes and latitudes) are used for the base map as for the points we want to plot.

Next, we are ready to define the second layer, the one on which the templated points will appear:

	<mapping:Map ... >
	  <mapping:Map.Layers>
	    <mapping:MapLayer ShapeFile="ClientBin/basemap.shp" ... />
	    <mapping:MapLayer ItemsSource="{StaticResource PointData}" ItemPointXPath="Longitude" ItemPointYPath="Latitude" />
	  </mapping:Map.Layers>
	</mapping:Map>

In this layer definition, we specify a source for data to be plotted by setting the ItemsSource property to a static resource. This property can alternatively be set from code-behind, or even inline, to any kind of collection of objects. We then set ItemPointXPath and ItemPointYPath properties to the property paths within objects of that collection at which the control can find horizontal and vertical coordinates, respectively.

We have now provided all the data necessary for plotting our points. What we haven't provided is the visual appearance of those points. We will do that by defining an ItemTemplate on the layer:

	<mapping:Map ... >
	  <mapping:Map.Layers>
	    <mapping:MapLayer ShapeFile="ClientBin/basemap.shp" ... />
	    <mapping:MapLayer ItemsSource="{StaticResource PointData}" ItemPointXPath="Longitude" ItemPointYPath="Latitude">
	      <mapping:MapLayer.ItemTemplate>
		    <DataTemplate>
	          <Ellipse Fill="Red" Height="10" Width="10" Margin="-5,-5,0,0" />
			</DataTemplate>
		  </mapping:MapLayer.ItemTemplate>
	    </mapping:MapLayer>
	  </mapping:Map.Layers>
	</mapping:Map>

For this example, we have defined the points as a simple red circle with a diameter of 10 pixels. We use negative margins to centre the shape over its target location.

Because the data context of the template is the logical map item which also contains the data object originally provided, we can bind to other properties of that object to provide more richness and variation to the template. For example, the size and colour of the template could vary based on values of particular properties, or text (or visual) representations of other values can be embedded in the template. A common approach is to display whole pie charts over locations whose data they represent.

Now that the visualization is done, we can include an additional useful feature: hover popups. To do this, we define an additional popup template on the layer:

	<mapping:Map ... >
	  <mapping:Map.Layers>
	    <mapping:MapLayer ShapeFile="ClientBin/basemap.shp" ... />
	    <mapping:MapLayer ItemsSource="{StaticResource PointData}" ItemPointXPath="Longitude" ItemPointYPath="Latitude">
	      <mapping:MapLayer.ItemTemplate>
		    <DataTemplate>
	          <Ellipse Fill="Red" Height="10" Width="10" Margin="-5,-5,0,0" />
			</DataTemplate>
		  </mapping:MapLayer.ItemTemplate>
		  <mapping:MapLayer.PopupValueTemplate>
		    <DataTemplate>
			  <TextBlock Text="{Binding PropertyToDisplayInPopup}" />
			</DataTemplate>
		  </mapping:MapLayer.PopupValueTemplate>
	    </mapping:MapLayer>
	  </mapping:Map.Layers>
	</mapping:Map>

Clearly, the popup data template could contain much more elaborate XAML structures, including instances of other Data Visualization controls bound to data in the provided objects. The popup itself, the chrome surrounding the defined template, will have an appearance defined by the theme. Changing the theme on the Map, or containing DashboardPanel or DashboardLayout by changing the Theme property, will change the appearance of the default popup as well.

I hope you've found this post informative! We'd love to hear what you think.

XYChart's X-Coordinate Popups

hwan — Mon, 29 Nov 2010 15:40:00 GMT

XYChart's XCoordinatePopup is a popup that is shown when the user's cursor hovers over the main area i.e. the rectangular region where datapoints are rendered. The popup's contents generally reveal details about the datapoints that lie along that particular x-coordinate. Note the difference between this and the plain popup behavior -- in that case, the popup's context is the datapoint being hovered over, rather than the datapoints along the x-coordinate. As such, one can think of XCoordinatePopup as a summary of the datapoints that are contained in that columnar area.

Features

When EnableXCoordinatePopup is set to true, the XCoordinatePopup's default popup will appear with basic datapoint values, such as in Figure 1.

Figure 1. Default XYChart XCoordinatePopup

The popup consists of two parts: an index template (the upper, darker gray section of Figure 1's popup) and a data template (the lower, lighter gray section of Figure 1's popup). By defining a custom template for both or either section one can override these default templates. For example, the XCoordinatePopup in Figure 2 is achieved using the following XAML:

<ch:XYChart.XCoordinatePopup>
  <ch:XCoordinatePopup>
    <ch:XCoordinatePopup.DataTemplate>
      <DataTemplate>
        <Grid>
          <caCalc:CalcEngine x:Name="calc0" >
          <caCalc:CalcEngineInput Id="context" Value="{Binding}" />
            <caCalc:CalcEngine.Expression>
              <sys:String>
                var a[]; 
                a[0] = S0.DataPoint.Y; 
                a[1] = S0.DataPoint.Brush; 
                a[2] = S1.DataPoint.Y;
                a[3] = S1.DataPoint.Brush;
                a
              </sys:String>
            </caCalc:CalcEngine.Expression>
          </caCalc:CalcEngine>
          <StackPanel Orientation="Vertical">
            <TextBlock
              Text="{Binding Output[0], ElementName=calc0, StringFormat=\{0:$#\,0\}}" 
              Foreground="{Binding Output[1], ElementName=calc0}" 
              FontSize="10" />
            <TextBlock
              Text="{Binding Output[2], ElementName=calc0, StringFormat=\{0:$#\,0\}}" 
              Foreground="{Binding Output[3], ElementName=calc0}" 
              FontSize="10" />
          </StackPanel>
        </Grid>
      </DataTemplate>
    </ch:XCoordinatePopup.DataTemplate>
  </ch:XCoordinatePopup>
</ch:XYChart.XCoordinatePopup>

Figure 2. Customized XYChart XCoordinatePopup

Classes

RelativePositionX, RelativePositionY -- Translation on the xy plane to shift the popup from its default position as a percentage.
XOffset, YOffset -- Translation on the xy plane to shift the popup from its default position in pixels.
IndexTemplate, DataTemplate -- Templates for the index (top) and value (bottom) parts of the popup. The datacontext for both is a SeriesCrossSection object.
- SeriesCrossSectionContext -- Object which provides the set of datapoints that lie along (or closest to) the x-coordinate where the cursor is currently sitting. Derives from Dictionary<string, DataPointContext> and implements the IPropertyProvider interface. For each datapoint in the cross-section there is an item in the dictionary. The key is the Series name and the value is the DataPointContext object related to the datapoint. The IPropertyProvider interface also allows one to access dictionary items in Calc script, such as in a CalcContainer.

In-depth Explanation

Let's take a closer look at the markup to generate the XCoordinatePopup in Figure 2.

Figure 3. Customized XYChart XCoordinatePopup markup

This XCoordinatePopup XAML defines a DataTemplate, which will overwrite the default. However IndexTemplate is not defined and so Chart will provide its own default template for the upper region of the XCoordinatePopup.
The CalcEngine, "calc0", sets the DataTemplate context as its Input.
Since the context is a dictionary, a Calc expression of "self[‘S0’]" would access the datapoint context of the datapoint from series “S0”. In this case however the SeriesCrossSectionContext class implements IPropertyProvider so we can use property syntax instead -- the cleaner and simpler "S0", the name of the Series object.
The CalcEngine computes values and brushes and returns them in an array; in this simple example it doesn't actually do anything to them but pass them back.
The value section of the XCoordinatePopup consists of two TextBlocks. These blocks bind text and brushes to the Output of the CalcEngine.

In summary, XCoordinatePopup is a useful way to interactively compare individual datapoints across multiple series. It consists of an IndexTemplate and a DataTemplate, and as such it is highly customizable.

An Overview of XYChart Areas

hwan — Thu, 25 Nov 2010 19:55:00 GMT

The visual layout for ComponentArt's XYChart for DataVisualization control is composed of five regions called Areas. This article aims to give an idea of what these regions are, so that you can better customize your own.

Figure 1. shows the arrangement of XYChart's Areas:

Figure 1. XYChart Areas

(In pink) Legend - (Optional) Located at an edge of the chart, depending on the docking property
(Gray and white) The main chart area is represented by the XYChartMainArea; it holds the actual rendered graph (line, area, bar, etc.).
(In violet) There are four axis areas, one along each side of the main area: XAxisArea, YAxisArea, X2AxisArea, and Y2AxisArea.

By default XYChart populates the XYChartMainArea, XAxisArea and YAxisArea with content, such as axis annotations and coordinate system elements e.g. horizontal and vertical gridlines, stripes, etc. The secondary areas, X2AxisArea and Y2AxisArea, are left empty. All of these defaults can be overwritten with custom definitions. Setting DefaultAxisAnnotationsVisible to false also removes these built-in definitions. Note that if one defines an area, the default AxisAnnotation (or other element) can still be used by including an undefined instance of it.

e.g.

<ch:XYChart XPath="Date" Width="400" Height="300" ... >
  <ch:XYChart.XAxisArea>
    <ch:AxisCoordinates />  <!-- Including AxisAnnotation as undefined  will cause Chart to insert its default version -->
    <ch:ChartLabel>
      ... etc

Each Area is a Collection of elements. The visual tree of XYChartMainArea is defined by the elements of its underlying Collection, and these are displayed one on top of another. AxisAreas on the other hand are StackPanels are displayed in an inside-out order i.e. the first member is closest to the XYChartMainArea.

MainArea

XYChart's MainArea can be populated with the following classes:

Series Classes
- BarSeries - Datapoints are represented by individual bars (rectangles going left to right) or columns (rectangles going from bottom to top).
- AreaSeries - Datapoints are connected by a line, and the space between that line and the axis is given a fill.
- LineSeries - Datapoints are connected by a styled line.
- MarkerSeries - Datapoints are represented by a pre-defined graphic.
- CandleStickSeries - Financial stock datapoints are drawn using a "candlestick", a custom hybrid of line and bar charts.
- OHLCSeries - Financial stock datapoints are drawn using "Open-high-low-close" markers, which are similar to the candlestick marker.
- CompositeSeries - A series that is composed of a combination of other series.
Coordinate System Classes
- CoordinateLines - Horizontal and vertical lines used to demarcate intervals on the axes.
- CoordinateStripes - Horizontal and vertical regions between CoordinateLines.
- CoordinateSystemFrame - Border around the main area, as well as 3D considerations i.e. rendered depth.
Interaction Classes
- SeriesTracker - A reticle which highlights datapoints, following the user's cursor when on the chart main area.
- SeriesAnnotationTracker - A popup rendered over the series, following the user's cursor when on the chart main area.

I should mention that there is some overlap between the Series classes -- for example, AreaSeries also has a built-in LineSeries (though of course you can choose to turn this off), and Bar, Line, and Area series can have a MarkerSeries, so you don't need to add this series separately.

AxisAreas

The AxisAreas are generally comprised of the following classes:

AxisCoordinates - System used to uniquely determine the positions of datapoints. Inside an AxisArea, it includes the labels indicating value intervals.
AxisScrollBar - Scroll bar used to scroll and zoom through the main rendered area of datapoints, as shown in Figure 2.

Figure 2. Scroll bar

AxisLabel - Visual labels applied to the regions between intervals along the axis.
Example:

Figure 3. XAxisArea AxisLabel

In Figure 3 there are two custom AxisLabel definitions inside the XAxisArea. The first uses an in-line Calc expression to change the color of the AxisLabel instance background to red if the sum of the "Services", "DV" and "UI" datapoint Y values are less than "Expenses". The second simply outputs the Month string. The XAML that defines the above follows:

<ch:XYChart.XAxisArea>
  <ch:AxisLabels >
    <ch:DateTimeCoordinates From="1" Step="1" DateLevel="Month" />
    <ch:AxisLabels.Template>
      <DataTemplate>
        <common:CalcContainer> <!-- CalcContainer inside Common is only available in DataVisualization SP2+ -->
          <common:CalcContainer.Computing>
            <sys:String>
              var back = Black;
              var diff = Series.Services.DataPoints[Index].Y + Series.DV.DataPoints[Index].Y + Series.UI.DataPoints[Index].Y - Series.Expenses.DataPoints[Index].Y;
              if(0 > diff)
                  back=Red
              else
                  back=Black;
              Background = back;
              Data = diff
            </sys:String>
          </common:CalcContainer.Computing>
          <ch:FormattedTextBlock Format="$#,#" HorizontalAlignment="Stretch" Margin="0.5,1,0.5,1" TextAlignment="Center" FontSize="11" FontFamily="Calibri" Foreground="White"/>
        </common:CalcContainer>
      </DataTemplate>
    </ch:AxisLabels.Template>
  </ch:AxisLabels>
  <ch:AxisLabels >
    <ch:DateTimeCoordinates From="1" Step="1" DateLevel="Month" />
    <ch:AxisLabels.Template>
      <DataTemplate>
        <Border Margin="4">
          <TextBlock TextAlignment="Center" Text="{Binding FormattedStartValue}" />
        </Border>
      </DataTemplate>
    </ch:AxisLabels.Template>
  </ch:AxisLabels>
</ch:XYChart.XAxisArea>

ChartLabel - Custom XAML elements positioned between other axis area elements or between a legend and the rest of the axis area.
e.g.

Figure 4. ChartLabels

As you can see, XYChart is actually a pretty flexible control! I hope that this post has given you a better grasp of the vocabulary used to build an XYChart.

Using CalcEngine for Design-Time Data

phil — Wed, 24 Nov 2010 20:12:00 GMT

There are times during development when it is not possible for controls to access live data from within the Visual Studio Design-Time environment. When this occurs it can be advantageous to have sample data available during Design-Time which reflects the live data to a workable degree. To simplify this task the CalcEngine contains a number of options for providing relevant sample data at Design-Time to other controls while maintaining the proper runtime data bindings.

Adding a CalcEngine

The first step in this process is to add an instance of the CalcEngine to the page/form and configure one of it's CalcEngineInputs to connect with the real data source. Information regarding this step can be found in our documentation under Creating Your First CalcEngine.

Binding to a CalcEngine

The second step is to bind the desired control to the instance of the CalcEngine. This can be done with the following syntax.

<ComponentArt:XYChart ... DataSource="{Binding ElementName=calcEngine1, Path=Output}" ... />

In this instance the x:Name of the CalcEngine is calcEngine1. If the CalcEngineInput has been connected to a DataSource and the Expression has been set, it may already be providing relevant sample data to the bound control. If not, some further configuration may be required. The target control should be configured in regards to runtime data, once the proper design-time data type has been generated or specified templates and databound properties of the target control should populate.

Configuring Design-Time Data on CalcEngineInputs

Each CalcEngineInput defined on a CalcEngine may be configured to provide sample data during Design-Time. A number of options are available for describing and shaping this sample data.

DesignTimeDataType

By default CalcEngine will attempt to determine the desired type for sample data based on types and properties available from the DataSource bound to each CalcEngineInput. There is not always access to the required types and in some cases this is not the desired behavior. The DesingTimeDataType property of the CalcEngineInput allows one to specify the fully qualified type name of the sample data objects that CalcEngineInput should generate.

<ComponentArtCommon:CalcEngine 
  Expression="calcEngineInput1" 
  Name="calcEngine1">
  <ComponentArtCommon:CalcEngineInput 
    Id="calcEngineInput1" 
    DesignTimeDataType="System.DateTime" />
</ComponentArtCommon:CalcEngine>

<ComponentArtGridView:GridView 
  AutoGenerateColumns="True" 
  DataContext="{Binding ElementName=calcEngine1, Path=Output}" 
  ItemsSource="{Binding}" />

It's important to remember that when no Calc operations are desired the CalcEngine Expression should be set to the Id of the desired CalcEngineInput, this will pass the Value or generated Design-Time data as is through to the CalcEngine's Output property and, in turn, to bound controls. This code yields the following output.

One handy class for generating sample data is contained within both frameworks of the Data Visualization Suite,

ComponentArt.Silverlight.DataVisualization.Utils.DemoDataValue
ComponentArt.Win.DataVisualization.Utils.DemoDataValue

DesignTimeDataRecords

This CalcEngineInput property specifies the number of sample data records to create, either of the detected type or of the DesignTimeDataType. The default is 15 records.

DesignTimeDataAlgorithm

Each CalcEngineInput also has the potential to generate data based on a number of algorithms, specified through the DesignTimeDataAlgoritm property.

Fractal ( Default )

Random

Incremental

Sine

Design-Time Data at Runtime

CalcEngine automatically detects whether or not it is running in Visual Studio Design-Time. Outside of Visual Studio Design-Time sample data generation will not occur and the data bound to Values of the CalcEngineInputs will become the active context.

*Functionality available in ComponentArt Data Visualization 2010 SP2

Coloring a Map with Data

Chris — Mon, 22 Nov 2010 16:46:00 GMT

This tutorial will walk you through the steps necessary to get a ComponentArt DataVisualization for Silverlight Map control up and running. 1. Create a new Project In Visual Studio, create a new "Silverlight Application" project. Call it "MyFirstMap". Use the default Web site settings. Visual Studio will generate the Silverlight and .Web projects, and should open up the MainPage.xaml. 2. Adding the required Assembly Reference A quick way to add the required reference is to simply...(read more)

Visualizing Toronto's 2010 Mayoral Election with ComponentArt Data Visualization

phil — Thu, 28 Oct 2010 19:16:00 GMT

The City of Toronto has released their Official Election Results. ComponentArt being a Toronto based company I thought this data offered a great way to showcase our Map control and present an informative and intuitive view of the data.

Visualizing Toronto's 2010 Mayoral Election

ComponentArt DataVisualization & Visual Studio Design-Time

phil — Tue, 26 Oct 2010 18:59:00 GMT

With the full release of ComponentArt DataVisualization now in the hands of the public I thought I'd take a minute and talk about some of the features we've added in regards to Visual Studio Design-Time integration. Visual Studio 2010 comes with unprecedented options as far as design-time is concerned and we've tried to take advantage of them all. Many tasks which would previously require XAML editing, endless searching through the Visual Studio Property Grid or altering existing demo projects for inclusion can now be accomplished quickly and easily through our design-time adorners.

Using the ToolBox

Visual Studio users are probably already familiar with the Visual Studio control ToolBox. Once a project has been created it can be access through the File Menu > View > Toolbox. It contains controls which are available for use with the page or form which is currently being edited, Silverlight or WPF projects for example.

If one has installed ComponentArt DataVisualization for the current platform one will see a section dedicated to these controls. They can be placed on your page or form simply by dragging and dropping the icon onto the design surface. Alternately one can select the control by clicking on the icon, and then click on the design surface to drag a rectangle to which the new control should size*.*Not all controls will adhere to this sizing practice

Using Adorners

Once a ComponentArt DataVisualization control has been placed on the design surface most of it's common options can be configured easily through it's design-time adorner. This is a small rounded button which appears at the top right of the control and contains the control icon in it.

Rolling the mouse over this adorner will cause it to expand and reveal the control type. Clicking on the adorner will reveal the control's configuration panel.

Quick Start

Clicking on the adorner icon will reveal the initial panel for the control being designed. This initial panel has a number of sections, the first being the Quick Start section.

Within the Quick Start is everything one needs to ready a control instance for runtime.

Start from Gallery

For most DataVisualization controls the first option in the Quick Start section will be Start from Gallery this allows one to select a starting point from the most popular control settings, many of these templates are populated directly from our extensive demos. Once selected a template will replace the entire control instance on the design surface, it is for this reason that Start from Gallery should be one's first step in the design process.

Look and Feel

The second section in most designers is the Look and Feel section. This contains relevant options in regards to Themes and Palettes.

Themes define the chrome of your dashboard - corner radius, line thickness, text color, margins are all controlled by the Theme. Unlike Templates, selecting a Theme from the Theme Gallery will not overwrite the control instance but simply set the Theme and ThemeVariant properties of the control. The Theme and ThemeVariant properties are also inherited and overridable.

Much like Themes, Palettes are inherited and overridable. Palettes specify the color sets used to render data in the DataVisualization controls, whether it is a RadialGauge, an XYChart or a Map, Palettes harmonize your dashboard as each control in the suite is given careful attention when defining a new Palette for it.

Other Control Settings

While the Quick Start section can help one design a control instance which is ready for run time in short order, there are almost always additional settings. The most popular additional settings can be found categorized within this section of the designer.

Help

The Help section of the design time adorner offers links to our online forums as well as documentation.

Licensing

The final section in our design time adorner is the Licensing section. This section allows one to quickly find the license status of the current workstation as well as license the current project, or visit our site in order to purchase a license.

Selecting License Active Project will launch the ComponentArt License Manager in the background, export a License File ( .LIC ) and add that License File as an Embedded Resource in the current project. Adding a valid License File to the current project will prevent the controls from displaying the unlicensed watermark at runtime. Licensing projects for deployment has always been a sticky point of control suites, no longer, it couldn't be easier, just takes a single click and it's ready for launch.

Dashboards Made Easy - The DrillDownManager Control

filipK — Fri, 05 Mar 2010 20:23:00 GMT

The usability and value of most modern dashboards becomes seriously questioned if the data shown is fixed, and the user does not have the ability to zoom in or drill-down into the data to a more detailed view. Implementing this functionality can sometimes be a time consuming task - a lot of plumbing code is needed to connect all the components and handle the events to interpret the drill-down actions and the parameters. The whole purpose of the DrillDownManager is to make this task simple for the developer.

The Concept

The idea behind the control is the following:

The page will contain an instance of the DrillDownManager control which will define all the available levels the end user can drill into.
Each level will have a data source associated with it.
Every control displaying the current data will bind to the DrillDownManager's DataContext property.
Actions such as drill-down and drill-back will all be handled through the DrillDownManager, which will notify all the managed controls of the actions currently taking place.

The Simple Drill-Down demo is a perfect example of this concept in action. Here we use the WcfServiceDataProvider control to configure the data source for each of our four levels. Even though we'll be using the same WCF Service for each of our levels, we'll be using a different method from the service for each level. Because of this it is easiest to create four instances of the WcfServiceDataProvider, like we do in the example:

<CAdata:WcfServiceDataProvider x:Key="Service1" IsInitialLoadEnabled="False" EndPointConfigurationName="CustomBinding_SalesDataService" MethodName="GetAllData" ObjectTypeRef="{StaticResource SalesDataServiceClient}" />
<CAdata:WcfServiceDataProvider x:Key="Service2" IsInitialLoadEnabled="False" EndPointConfigurationName="CustomBinding_SalesDataService" MethodName="GetYearlyDataFromDecade" ObjectTypeRef="{StaticResource SalesDataServiceClient}" />
<CAdata:WcfServiceDataProvider x:Key="Service3" IsInitialLoadEnabled="False" EndPointConfigurationName="CustomBinding_SalesDataService" MethodName="GetMonthlyData" ObjectTypeRef="{StaticResource SalesDataServiceClient}" />
<CAdata:WcfServiceDataProvider x:Key="Service4" IsInitialLoadEnabled="False" EndPointConfigurationName="CustomBinding_SalesDataService" MethodName="GetDailyData" ObjectTypeRef="{StaticResource SalesDataServiceClient}" />

Now we can instantiate the DrillDownManager to use these instances as data sources for each of its levels:

<CAdata:DrillDownManager x:Name="DDManager" ManagedControls="Chart1">
	<CAdata:DrillDownManager.Levels>
	    <CAdata:DrillDownLevel x:Name="RootLevel" DataProvider="{StaticResource Service1}" />
	    <CAdata:DrillDownLevel x:Name="Decade" DataProvider="{StaticResource Service2}" />
	    <CAdata:DrillDownLevel x:Name="Year" DataProvider="{StaticResource Service3}" />
	    <CAdata:DrillDownLevel x:Name="Month" DataProvider="{StaticResource Service4}" />
	</CAdata:DrillDownManager.Levels>
</CAdata:DrillDownManager>

We can now instantiate the Chart control to bind to our DrillDownManager instance's DataContext property in order to automatically update the chart when the data is changed. Our chart code can look like this:

<Chart:Chart x:Name="Chart1" ChartKind="Rectangle" XValue="Date" Height="480" Width="640" EnableAnimation="True"
		MouseLeftButtonDownOnDataPoint="MyChart_MouseLeftButtonDownOnDataPoint"
		DataSource="{Binding DataContext, ElementName=DDManager}" 
		DrillDownTransitionDuration="0:0:1" BackUpTransitionDuration="0:0:1">

    <Chart:Chart.DataSeries >
	<Chart:Series Id="S0" YValue="Sales" MarkerStyle="Circle" />
    </Chart:Chart.DataSeries>
</Chart:Chart>

Note also that in addition to binding the DataSource and setting the drill down and back up animation transition durations, we also register a handler for the MouseLeftButtonDownOnDataPoint event. This is where we want to initiate the drill down action. The idea, as shown in the Simple Drill-Down demo, is that when a user clicks on a data point, we show a more granular view of that data. Our event handler from the demo looks like this:

private void MyChart_MouseLeftButtonDownOnDataPoint(object sender, SelectedDataPointEventArgs e)
{
    DDManager.DrillDown(e.DataPointContext.DataPoint.X);
}

This calls the DrillDownMnager and tells it to go into the next level, passing the DataPoint's X value to the call. The DrillDownManager will move to the next level and refresh that level's data with the provided parameter being passed directly to the method in the WCF Service that is registered as the data source of this level. As such we must make sure that the method in the WCF service registered with each level, can take the type of parameter being passed. In our case it is the X value of the DataPoints in the previous level.

We can go back up a level simply by calling the DrillUp() method on the DrillDownManager instance. In the Simple Drill-Down demo, this is done through the BreadCrumb control, which also makes use of DrillDownManagers Levels and CurrentLevel properties to show how deep we have drilled down. Additionally, we can bind any other control we have on the page to the DataContext property of the DrillDownManager, and it will update automatically when the level changes.

Simplifying the WCF Service Connection - The WcfServiceDataProvider control

filipK — Thu, 04 Mar 2010 15:25:00 GMT

WcfServiceDataProvider is a handy new control introduced to the Silverlight and WPF suite of controls in the 2010.1 release. The control is somewhat different from most of the other controls. It has no visual aspect to it (hence the pictureless blog post) and its sole purpose is to simplify the task of connecting and retrieving data from an existing WCF Data Service and make the data available to other controls on the page.

The idea is quite simple:

Instantiate the control in XAML by giving it the end-point configuration name of the WCF service, the service client's type and the method in the service used to retrieve the data.
Updating the MethodParameters property will automatically call the registered method on the WCF service with the provided parameters, refreshing the data. (Alternatively, you can just call Refresh() to update the data with the same parameters).
You can bind to the WcfServiceDataProvider's Data property to get the latest data retrieved from the web-service. (In WPF, binding directly to the WcfServiceDataProvider instance will have the same effect).

Example

The Simple Drill-Down demo makes extensive use of this control. In the Silverlight version, the WcfServiceDataProvider is instantiated like this:

<svc:SalesDataServiceClient x:Key="SalesDataServiceClient" />
<CAdata:WcfServiceDataProvider IsInitialLoadEnabled="False" x:Key="Service1" 
        EndPointConfigurationName="CustomBinding_SalesDataService" 
        MethodName="GetAllData" 
        ObjectTypeRef="{StaticResource SalesDataServiceClient}" />

The easiest way to look up the Service Client type is to use intellisense in a C# code file. Find the type by typing in the WebService class followed by a "." to look for the client type definition in the provided options. Then instantiate the client giving it a type, and use this reference to set the ObjectTypeRef property in the control. The EndPointConfigurationName can be looked up in the ServiceReferences.ClientConfig file in the project.

In WPF, the service client type can be looked up in the same way, but we can specify it directly in the control. The code will look like this:

<CAdata:WcfServiceDataProvider IsInitialLoadEnabled="False" x:Key="Service1" 
        EndPointConfigurationName="BasicHttpBinding_SalesDataService" 
        MethodName="GetAllData" 
        ObjectType="{x:Type svc:SalesDataServiceClient}" />

The EndPointConfigurationName can be looked up in the app.config file in the project.

The only thing that's needed to be done in the code behind is set the Remote address of the WCF Service. Then we can finally set some parameters and issue the first refresh call to get our data. This should be done in the Loaded handler of the UserControl:

string remoteAddress = new Uri(Application.Current.Host.Source, "../SalesDataService.svc").AbsoluteUri;

WcfServiceDataProvider dp = this.Resources["Service1"] as WcfServiceDataProvider;
dp.DeferRefresh();
dp.RemoteAddress = remoteAddress;
dp.MethodParameters.Clear();
dp.MethodParameters.Add(new DateTime(2009, 1, 1));
dp.MethodParameters.Add(new DateTime(2010, 1, 1));
dp.Refresh();

Finally, to make use of this data, we can bind a control to the Data property of the WcfServiceDataProvider instance. The code below binds a Chart control to the retrieved data:

<Chart:Chart x:Name="Chart1" ChartKind="Rectangle" XValue="Date"  
             DataSource="{Binding Data, Source={StaticResource Service1}}"
             ...>

</Chart:Chart>

This will cause the chart to auto update each time the WcfServiceDataProvider refreshes the data.

ItemFlow: Live XAML Content

phil — Tue, 23 Feb 2010 18:33:00 GMT

Along with ComponentArt UI Framework 2010.1 for Silverlight and WPF comes fantastic new funtionality for our ItemFlow control, the ability to utilize live XAML content within ItemFlowItems. This brings to bear endless possiblities, anything from a simple form wizard spanning multiple ItemFlowItems to nesting an entire ItemFlow within an ItemFlowItem.
Previously ItemFlow utilized a technique of overlapping skewed images in order to attain a perspective transform. Silverlight 3.0 has introduced these types of transforms natively both with 3D Matrix Transforms and the ProjectionPlane along with Writeable Bitmaps. These additional features allow ItemFlow to properly transform any content, not just images.

<ComponentArt:ItemFlow 
	 x:Name="myItemFlow"
          Height="300"
          Width="800"
          ItemHeight="200"
          ItemWidth="200"
          ShowShading="False">
  <ComponentArt:ItemFlow.Items>
    <ComponentArt:ItemFlowItem>
      <ComponentArt:ItemFlowItem.ItemTemplate>
       <DataTemplate>
         <Grid>
           <Border Height="200" Width="200" BorderBrush="Black" BorderThickness="2">
             <TextBlock Text="Hello World" VerticalAlignment="Center" HorizontalAlignment="Center" />
            </Border>
          </Grid>
        </DataTemplate>
      </ComponentArt:ItemFlowItem.ItemTemplate>
    </ComponentArt:ItemFlowItem>
  </ComponentArt:ItemFlow.Items>
</ComponentArt:ItemFlow>

This example illustrates how XAML content can be used within an ItemTemplate.

While this example does have the effect of adding a reflection to your XAML, ItemFlow requires a couple more items in order to shine. Tranditional ImageSource based items can be used along with items utilizing ItemTemplates, however an ItemTemplate specified for an item will override ImageSource.

Focus

When using ItemFlow with XAML content focus quickly becomes an issue. Depending on one's implementation they may require ItemFlow to prevent focus on XAML elements which are not contained within the currently selected ItemFlowItem. Take for instance the form wizard in the image at the top of this post, TextBoxes in flanking ItemFlowItems should not react to mouse clicks, instead these clicks should bring the flanking ItemFlowItem to the center where it can then be edited. This issue is solved by ItemFlow's shading, setting ShowShading="True" ( the default ) will prevent mouse interaction with flanking ItemFlowItems. When ShowShading is set to "False" the shading which overlaps items will not be shown and therefore will not prevent mouse events from interacting with XAML elements.

Loading

Another issue which arises along with XAML content is the question of load events and item sizing. ItemFlow is not aware of the current state of XAML content elements loaded into it's ItemTemplates. It is up to the developer to size the ItemWidth and ItemHeight properly and in some cases call ItemFlow.Initialize() from Loaded events of relevant elements.

Accessing Elements

XAML content within ItemFlowItems would not be of much use if we could not access elements in order to retrieve values, or apply changes. Finding elements within DataTemplates is not as simple as one might hope, however we have included a method in our ComponentArt.Silverlight.UI.Utils namespace which helps with this endeavor:

TextBlock myHelloWorldBlock = (TextBlock)ComponentArt.Silverlight.UI.Utils.Visual.FindElementByName(myItemFlow, "helloWorldBlock");

Elements may also register themselves with a pointer through their own Loaded events, or any other event in which they are a sender.

Final Notes

Although it may take some tweaking of settings and positions. Combining the techniques described above to create a unique ItemFlow implementation can result in some very interesting innovations.