WPF Blog

Real time charts in WPF

2009-12-04T03:13:11Z

Real time support is one of those features that had to be cut from 8.0 because of the schedule, but customer feedback in both our forums and email was loud and clear, there are some of you that need to update the chart often and need a high performance redraw strategy.

Before we go into the real time API and behavior in Chart FX for WPF 8.1 let’s discuss how the chart control responds to non-realtime changes in the data

Binding to objects that support INotifyPropertyChanged

When Chart FX receives a collection of CLR objects that support INotifyPropertyChanged, it will attach to the PropertyChanged event, then as soon as the event is fired because of a property change the chart will process the new value and mark itself as dirty. Note that this means that if you change more than one of your CLR objects quickly the chart will only “repaint” once. The quotes around repaint are because it is a little more complex than that, we will run our paint code but then detect that the changes do not need a full WPF redraw and instead animate the data changes.

Binding to a collection that support INotifyCollectionChanged

If the collection passed to Chart FX supports this interface we will also track changes to the collection, when the collection fires its Collection changed event the chart will process the new data and then mark itself as dirty, normally you will not get animations in this scenario. We will process the data changes immediately but delay the painting so it is also possible that if you add two objects to the collection quickly we will only repaint the chart once.

Real Time Support

In both these scenarios, Chart FX is going through a full repaint process which works fine for casual use but if the data changes often (e.g. once per second or quicker) it will probably generate high CPU usage, enter the real time API, when using this API you will first configure the maximum number of points the chart will hold, once this number is reached, each additional value will bump the oldest value out of the chart to keep memory usage steady.

chart1.RealTime.BufferSize = 120;
chart1.Data.Series = 1;
chart1.Data.Points = 120;

You will then run a code similar to this every time you want to add one or more points to the chart

chart1.RealTime.BeginAddData(1, RealTimeAction.Append);
chart1.Data[0, 0] = newValue;
//chart1.Data[0, 1] = newValue2;
chart1.RealTime.EndAddData(false, false);

The first parameter to BeginAddData indicates the number of points you plan to add, note that when adding the points you will use 0 based index for the points regardless of how many points have been added to the chart before this. The first boolean parameter to EndData specifies whether labels should be scrolled, the second specifies whether the chart should scroll to the end if scrolling is enabled.

Once we receive the data we do not a run a standard paint process but instead process the new data and move the visual objects accordingly, because of this we only support realtime in conjunction with certain gallery types (Bar, Line and Area), also several features such as stacked are currently unsupported in realtime.

Performance is still being tweaked but a chart holding hundreds of points and being updated 1 – 5 times per second will only use a small percentage of the CPU (1 – 10%) even on a laptop.

JuanC

Series Transform: Plotting the rate of change

2009-11-18T14:29:57Z

This post discusses functionality in Chart FX for WPF 8.1. For more information click here.

Chart FX for WPF 8.0 includes support for data transforms including OtherTransform and CrosstabTransform. These transforms work with the data as a whole and they will typically affect the shape of the data i.e. they will affect the number of series or points plotted in your chart. Sometimes to analyze the data more effectively you also need minor tweaks on how the data is plotted, to accomplish this we will be supporting a new concept called Series Transforms.

A series transform is a class that affects the values plotted for a single series, a very simple yet useful example would be to plot the percentage of change from the previous value, e.g. let’s plot the US gross domestic product since 1990

Even though this post is all about data analysis, we also want to show our visual capabilities, this look was heavily “inspired” on a chart about a certain golfer yearly earnings I saw some time ago on a news site. Note that all the visual attributes used here (a couple of templates plus some property manipulation) are supported in 8.0 as well, additionally we are using the “Helvetica Neue” font created by Linotype.

If you are analyzing this chart it is hard to draw any conclusions besides the fact that the GDP seems to grow linearly on the 90’s and then dips a little in the early 2000’s before retaking its previous almost linear trend. Let’s add the Rate of Change Transform and see what happens

  <cfx:SeriesAttributes.Transform>
    <cfxData:RateOfChangeTransform/>
  </cfx:SeriesAttributes.Transform>

You can see what a different picture is painted when we plot the percentage change year-over-year, note that in the 90’s the GDP actually go up and down between 4.6 and 6% and the dip in the early 200’s is considerable as it goes down from 6% to 3%. Also note that at the end of the plot there is a clear down trend that was almost impossible to detect on the original chart.

The transform also gets a chance to influence the axis labels (we are manually adjusting the title in our sample) and the tooltips as shown in the next figure.

This transform would also be very useful if you are plotting more than one series when the data range on the series are slightly off, for example if you are plotting sales for 2 products where product A sales range between 1 and 7 millions and product B sales range between 20 and 50 millions, it is very hard to compare growth but the rate of change as a percentage will clearly give you a normalized view of your data.

JuanC

Chart FX for WPF 8.1

2009-11-18T14:22:29Z

Chart FX for WPF 8.1 represents the next evolutionary step on our WPF charting tool, soon after 8.0 was released we branched out and started working on several features that either had to be cut from 8.0 because of the schedule or have been suggested by customer feedback. This post will serve as a centralized FAQ for this release.

Q. Release Date

The current plan is to release an open beta in the December/January timeframe, if you participated in the 8.0 beta don’t worry as we expect this beta program to be much shorter.

Q. Licensing

Licensing has not been formally established yet but it is very likely it will be a free upgrade.

Q. Migration

We expect that all projects using 8.0 will compile with no change.

8.1 and 8.0 can coexist on the same machine but because we use the same assembly names, they cannot be used simultaneously in the same app.

Drawing a WPF visual clipped by a rounded border

2009-10-26T02:43:00Z

Sometimes we write small classes to be used in the chart context but they could be useful in other scenarios. RoundClipBorder is one of these classes, it derives from Border but it will clip its content using a rounded border. Let’s see what happens if you try a regular WPF border around a rectangular object

<Border CornerRadius="5" BorderBrush="Black" BorderThickness="2">
  <Image Source="pack://siteoforigin:,,,/img/US.png"/>
</Border>

It actually looks very nice so you are probably wondering what all the fuss is about, if you look really closely the borders are thinner around the corners, let’s see what happens if we increase the CornerRadius to a bigger size.

Now you can clearly see what is going on, WPF is drawing the content and then drawing a rounded rectangle around it but its corners are getting into the content and what looked like a small thinner-around-the-corners issue has now turned into an overflow. RoundClipBorder works around this issue by creating a geometry and then clipping its child.

<cfxControls:RoundClipBorder CornerRadius="12"
                                             BorderBrush="Black" BorderThickness="2">
  <Image Source="pack://siteoforigin:,,,/img/US.png"/>
</cfxControls:RoundClipBorder>

This class lives in the ChartFX.WPF.Controls assembly so you might have to add a reference to it in your project, if you are wondering why we created this class let me show you how our design time wizard allows you to bind data to the chart and then customize the chart tooltips to display rich content in your data.

public class CountryData
{
    public string Name { get; set; }
    public double Population { get; set; }
    public string Language { get; set; }
    public string Flag { get; set; }
    public double Sales { get; set;}
}

<Window.Resources>
  <ObjectDataProvider x:Key="countryData"
                      ObjectType="{x:Type localData:CountrySalesList}" />
</Window.Resources>
<Grid>
  <ChartFX:Chart>
  </ChartFX:Chart>
</Grid>

First step, let’s bind the chart to the object data provider in our page and pick the fields to be used in the plot and labels, to do this we start the chart wizard and select Configure Data

Now let’s configure the chart tooltips to display other data for the selected item, in the wizard we will now select Tooltips, after selecting all available fields in a similar page we get prompted for our tooltip configuration

Here is where our little control gets to be used, we will select Flag as the image field and for the Effect we will choose Round Clipped

Click Next and Accept, run your program and you will get the following chart and tooltip

JuanC

Chart FX for WPF Compatibility with VS2010 Beta 2

2009-10-23T15:20:19Z

Just a short post to let you know that Chart FX for WPF builds 3581 and later are compatible with Visual Studio 2010 Beta 2. From now on our builds will include the following additional files in the Design folder

ChartFX.WPF.Design.VS2010.dll
ChartFX.WPF.VisualStudio.Design.VS2010.dll
ChartFX.WPF.Controls.Design.VS2010.dll
ChartFX.WPF.Motifs.HandDrawn.Design.VS2010.dll

Note that these files are only required for design time purposes, even if you do not have them (or you have an older Chart FX build) you should be able to compile your application using VS2010 Beta 2 and run it against the .NET framework 4.0.

JuanC

Transforming Data: Combining small elements into an Other category

2009-10-03T21:16:40Z

Data Transforms are a somewhat hidden but very important feature in Chart FX for WPF, although in essence they are simply a class that receives an enumeration and returns another, they can make a big difference on your charts.

In this post we will discuss a simple transform called the OtherTransform, this transform groups small elements into an “Other” category for example if we try to plot carbon emissions for countries in 2006 would get a chart like this

Note that even though we limited the data to countries that contribute more than 0.5% that still results in about 30 countries which makes the chart hard to read. If we use the OtherTransform then we get the following

      <cfx:Chart.DataTransforms>
        <cfxData:OtherTransform/>
      </cfx:Chart.DataTransforms>

With a smaller number of slices we can even show the Point Labels which would not have looked good in the first chart because of the size of the slices. By default the other transform will group all values less than 5% into the “Other” bucket but you can customize this behavior using the MinPercentage property.

There is another advantage on using the OtherTransform instead of limiting how you retrieve your data, because we know the items represented in Other we can show a different tooltip with details for these items. We also switch our tooltip behavior to allow you to scroll through the elements in the itemscontrol, normally tooltips will disable all child elements so we use a home-grown tooltip implementation to support this.

We wanted this transform to be enabled by default in Pie, Doughnut and other gallery types used to display percentages, unfortunately we did not have enough time to make it work with multiple series for this release (to ship is to choose). We expect to add support for multiple series in future versions/builds.

JuanC

Minimize the chart legend space by showing it as a title

2009-09-21T14:10:00Z

Sometimes the size available to a chart imposes a restriction where the legend just takes too much space. In this post we will discuss a couple of possibilities on how to approach this problem

Style your title to mimic a legend

In Chart FX for WPF titles are fully stylable and although typically titles are just strings, you can in fact use any WPF visuals in the title. The problem with this approach is that you would have to code too much information into the title, for example the number of series, colors, etc. which makes this scenario not practical. Also note that things like highlight would not work.

Show the legend underneath the title

Just removing the legend box border and docking the legend box to the top might be sufficient in many scenarios

  <cfx:Chart.Titles>
    <cfx:Title>Sales in 1998</cfx:Title>
  </cfx:Chart.Titles>
  <cfx:Chart.LegendBox>
    <cfx:LegendBox cfx:Chart.DockBorder="None" DockPanel.Dock="Top" />
  </cfx:Chart.LegendBox>

Note that in our default style (Glass) the main title is drawn larger and outside the plotting area space, if you would rather have them both together you can change the target panel of the legend box, note that in older builds we did not support a way to specify the index so you might need an updated build if this does not generate the expected results

  <cfx:Chart.LegendBox>
    <cfx:LegendBox cfx:Chart.DockBorder="None" DockPanel.Dock="Top"
                   cfx:Chart.TargetPanel="Titles-0" />
  </cfx:Chart.LegendBox>

Combine the title and legend in one line

If the number of series is small we might be able to combine the title text and legend box in one line. To do this we will have to style the legend box and items so it will be a little more involved, hopefully the result will be worthwhile.

<Style x:Key="LegendTitleStyle" TargetType="{x:Type ItemsControl}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate>
        <StackPanel Orientation="Horizontal">
          <StackPanel Orientation="Horizontal" IsItemsHost="True"
                              VerticalAlignment="Top" />
          <TextBlock VerticalAlignment="Top" Text="{Binding Path=Tag}"/>
        </StackPanel>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
<DataTemplate x:Key="LegendTitleItem">
  <StackPanel Orientation="Horizontal">
    <StackPanel.Resources>
      <cfxConverters:BoolToVisibilityConverter x:Key="BoolToVisibility"/>
    </StackPanel.Resources>
    <StackPanel VerticalAlignment="Top" x:Name="textAndLine">
      <Border Background="Transparent">
        <ContentControl IsHitTestVisible="false" Content="{Binding Path=Content}"
                        ContentTemplate="{Binding Path=ContentTemplate}"
                        Foreground="{Binding Path=Foreground}"
                        FontFamily="{Binding Path=FontFamily}"
                        FontSize="{Binding Path=FontSize}"
                        FontStyle="{Binding Path=FontStyle}"
                        FontWeight="{Binding Path=FontWeight}"/>
      </Border>
      <Rectangle Fill="{Binding Path=Stroke}" Height="3"/>
    </StackPanel>
    <TextBlock Text=" "/> 
    <TextBlock Text="Vs " IsHitTestVisible="false"
               Visibility="{Binding Path=LastInGroup,
                            Converter={StaticResource BoolToVisibility},
                            ConverterParameter=false}"/>
  </StackPanel>
  <DataTemplate.Triggers>
    <DataTrigger Binding="{Binding Path=Dimmed}">
      <DataTrigger.Value>
        <sys:Boolean>True</sys:Boolean>
      </DataTrigger.Value>
      <Setter Property="Opacity" Value="0.25" TargetName="textAndLine" />
    </DataTrigger>
  </DataTemplate.Triggers>
</DataTemplate>

  <cfx:Chart.LegendBox>
    <cfx:LegendBox cfx:Chart.DockBorder="None" DockPanel.Dock="Top"
                   Tag="Sales in 1998"
                   ContainerStyle="{StaticResource LegendTitleStyle}">
      <cfx:LegendBox.ItemAttributes>
        <cfx:LegendItemAttributes cfx:LegendItemAttributes.LegendItemType="Series"
                                  Template="{StaticResource LegendTitleItem}"/>
      </cfx:LegendBox.ItemAttributes>
    </cfx:LegendBox>
  </cfx:Chart.LegendBox>

Key points from the XAML

In LegendTitleStyle we set a template that has a horizontal stack panel (legend items) + the legend Tag, this allows to reuse this style as all we have to change is the LegendBox tag property.
In LegendTitleItem we are showing the legend content with a line under it that uses the series stroke instead of fill, this makes the line a little darker.
To hide the separator text (Vs) we used a ChartFX converter because it allows us to set Visibility to Collapsed when the bool property (LastInGroup) is true by setting ConverterParameter to false. The built-in BooleanToVisibilityConverter only seems to convert True to Visible.
By using a ContentControl instead of a TextBlock our template should work even if you use Series.ContentTemplate to a more complex visual.

Please note that the legend box can show much more than just the series as it can display information about conditional attributes, axis sections, axis custom gridlines, etc. but in simple scenarios this approach generates a simpler chart while still providing contextual information to your users.

JuanC

Creating Win/Loss charts in WPF

2009-09-15T04:00:00Z

Although Win/Loss charts can obviously be used to display win/loss/tie records they are also being increasingly used in dashboard scenarios to show a collection of values where there is a binary condition and you want to quickly see which values met such condition, e.g. to display a list of several products where you plot sales per month and want to easily see if the sales quota was met.

We will use as a sample and starting point a sparkline chart we created in this post, but will change the gallery to WinLoss and make sure we specify a goal for each product. If you do not specify a goal we will use 0 if there are positive and negative values or half the range if all values are positive/negative.

  <cfx:Chart.AllSeries>
    <cfx:AllSeriesAttributes>
      <cfx:AllSeriesAttributes.GalleryAttributes>
        <cfxwinloss:WinLoss Goal="30" />
      </cfx:AllSeriesAttributes.GalleryAttributes>
    </cfx:AllSeriesAttributes>
  </cfx:Chart.AllSeries>

The WinLoss gallery will try to choose a couple of colors in the current palette close to red and blue but you can assign precise colors by using the LossFill, LossStroke, WinFill and WinStroke properties. Additionally we can use ConditionalAttributes to color the biggest and smallest value, note that we use the AndCondition and MaximumValueCondition from the ChartFX.Data assembly, we use the AndCondition to make sure we only mark the biggest/smallest value if it was greater/smaller than the goal.

  <cfx:Chart.AllSeries>
    <cfx:AllSeriesAttributes>
      <cfx:AllSeriesAttributes.GalleryAttributes>
        <cfxwinloss:WinLoss Goal="30"
                            LossFill="#FF8B89" LossStroke="#FF8B89"
                            WinFill="#909090" WinStroke="#909090"/>
      </cfx:AllSeriesAttributes.GalleryAttributes>
    </cfx:AllSeriesAttributes>
  </cfx:Chart.AllSeries>
  <cfx:Chart.ConditionalAttributes>
    <cfx:ConditionalAttributes Fill="#007010" Stroke="#007010">
      <cfx:ConditionalAttributes.Condition>
        <cfxData:AndCondition>
          <cfx:RangeCondition From="30"/>
          <cfxData:MaximumValueCondition/>
        </cfxData:AndCondition>
      </cfx:ConditionalAttributes.Condition>
    </cfx:ConditionalAttributes>
    <cfx:ConditionalAttributes Fill="Red" Stroke="Red">
      <cfx:ConditionalAttributes.Condition>
        <cfxData:AndCondition>
          <cfx:RangeCondition To="30"/>
          <cfxData:MinimumValueCondition/>
        </cfxData:AndCondition>
      </cfx:ConditionalAttributes.Condition>
    </cfx:ConditionalAttributes>
  </cfx:Chart.ConditionalAttributes>

Finally, we will use WinLoss to show a new feature implemented in Chart FX for WPF which is also useful in bar charts when because of chart size, number of points or the combination of both generates thin bars, the issue is that we calculate sizes and positions using doubles, this allows WPF zoom and pixel independent architecture to work as expected but might generate an issue where the space between the bars is clearly not constant. For example if we now switch to 24 points per product and set the chart size to 120 pixels we might get something like this

A new property in PlotArea called PixelSnapMethod now supports three values:

None: Default value which uses double for all operations
Full: We make sure that the size of the bars and the space between them is constant, note that this might generate white space to the sides of the chart.
Marker: Space between bars is kept constant but size of the markers might vary slightly, this approach will not suffer from the same white space issue when using Full

  <cfx:Chart.PlotArea>
    <cfx:PlotAreaAttributes Margin="0" AxesStyle="None"
                            Background="{x:Null}" Stroke="{x:Null}"
                            PixelSnapMethod="Full"/>
  </cfx:Chart.PlotArea>

You can see all bars and white spaces sizes have been rounded to integers but because the number of pixels was not evenly divisible by the number of points there is some wasted space around the chart, if you switch PixelSnapMethod to Marker we will only make sure all spaces are the same, by making some bars wider than others it will not generate the empty areas around the plot area. Note that even though in this sample the space wasted by the Full method is not too bad, it could increase as the number of points increase.

JuanC

Gallery types supported in Chart FX for WPF

2009-09-11T19:15:00Z

In Chart FX for WPF we try to support the most common gallery types in our core DLL (ChartFX.WPF.dll) but at the same time we want to be very agile supporting additional gallery types, we do this in separate satellite assemblies which allows us to keep our library at a reasonable size but still allowing users to easily create other not-so-common gallery types.

If you check the Gallery enumeration which is the list of gallery types we support in our core dll, you will find the following galleries:

public enum Gallery
{
    Bar,
    Area,
    Line,
    Curve,
    Pie,
    Scatter,
    Bubble,
    Radar,
    Polar,
    Doughnut,
    Gantt,
    OpenHighLowClose,
    Candlestick,
    HighLowClose,
    TreeMap,
    CurveArea,
    Step,
    Pyramid,
    Cube,
    Funnel,
    Surface,
}

Note that we use gallery type in a strict sense, so we are not counting here any variations such as stacked/stacked100, 2D/3D, etc, the galleries will try to honor as many of these common properties as possible. Also note that each gallery in the enumeration is backed up by a class and sometimes these classes will expose additional properties, for example when you create a Radar chart you will get lines connecting the points but you can also paint the area as follows

  <cfx:Chart.AllSeries>
    <cfx:AllSeriesAttributes>
      <cfx:AllSeriesAttributes.GalleryAttributes>
        <cfxGalleries:Radar Gallery="Area"/>
      </cfx:AllSeriesAttributes.GalleryAttributes>
    </cfx:AllSeriesAttributes>
  </cfx:Chart.AllSeries>

Other classes also add interesting functionality, the Bar class allows bar charts to use X values, the Pie class allows you to create 3D pie charts where the height of each slice depends on another variable, etc. You can also set the GalleryAttributes property on a per-series basis, which allows you to use different settings for different series in your chart.

In addition to this set of built-in galleries we have developed the following assemblies that support extra gallery types

Rose: Sometimes also called wind chart
HighLow: Displays 2 series filling the area between the 2 where the color depends on which series is bigger
Bullet: Used in dashboards to compare performance against comparative measures.
XYZ: Includes support for XYZ surface as well as XYZ scatter plots
WinLoss: Used for Win/Loss records and also show values that meet a specific condition.

Using these extra gallery types is straightforward, the manual way would be to add a reference to the DLL in your project, then setting (in XAML or code) the SeriesAttributes.GalleryAttributes property to point to the class that implements the new gallery type. Our design time wizard can automate these steps if you use the gallery option

Please note that in both Visual Studio 2008 and 2010 our wizard will automatically add the required references to your project but in Blend 3 this is not supported so you have to manually add the reference before running the wizard. We will not show external galleries (or chart styles) if the reference is not present.

JuanC

Creating bullet charts in WPF

2009-09-02T14:19:00Z

A bullet chart - designed by Stephen Few from PerceptualEdge - allows you to compare a performance measure against a comparative measure (e.g. compare year revenues against target values), optionally displaying qualitative ranges.This post will describe a new assembly to be included in Chart FX for WPF that will help you create bullet charts.

This gallery requires at least 2 series, so let’s say you want to plot YTD revenues against last-year revenues, you would code your XAML as follows

    <cfx:Chart Style="{x:Static cfxMotifs:Basic.Style}" FontFamily="Calibri"
               Palette="{x:Static cfx:Palettes.Monochrome}">
      <cfx:Chart.AllSeries>
        <cfx:AllSeriesAttributes>
          <cfx:AllSeriesAttributes.GalleryAttributes>
            <cfxBullet:Bullet/>
          </cfx:AllSeriesAttributes.GalleryAttributes>
        </cfx:AllSeriesAttributes>
      </cfx:Chart.AllSeries>
      <cfx:Chart.ItemsSource>
        <Binding Source="{StaticResource MyData}" XPath="BulletData/BulletPoint" />
      </cfx:Chart.ItemsSource>
      <cfx:Chart.Series>
        <cfx:SeriesAttributesCollection>
          <cfx:SeriesAttributes BindingPath="@ActualRevenue" Content="Actual"/>
          <cfx:SeriesAttributes BindingPath="@TargetRevenue" Content="Target"/>
        </cfx:SeriesAttributesCollection>
      </cfx:Chart.Series>
      <cfx:Chart.AxisX>
        <cfx:Axis Foreground="Black">
          <cfx:Axis.Labels>
            <cfx:AxisLabelAttributes BindingPath="@Region"/>
          </cfx:Axis.Labels>
          <cfx:Axis.Grids>
            <cfx:Grids>
              <cfx:Grids.Major>
                <cfx:GridLine Visibility="Collapsed" TickMark="None"/>
              </cfx:Grids.Major>
            </cfx:Grids>
          </cfx:Axis.Grids>
          <cfx:Axis.Line>
            <cfx:LineAttributes Visibility="Collapsed"/>
          </cfx:Axis.Line>
        </cfx:Axis>
      </cfx:Chart.AxisX>
      <cfx:Chart.AxisY>
        <cfx:Axis>
          <cfx:Axis.Grids>
            <cfx:Grids>
              <cfx:Grids.Major>
                <cfx:GridLine Visibility="Collapsed"/>
              </cfx:Grids.Major>
            </cfx:Grids>
          </cfx:Axis.Grids>
        </cfx:Axis>
      </cfx:Chart.AxisY>
      <cfx:Chart.PlotArea>
        <cfx:PlotAreaAttributes AxesStyle="Math" ClipToBounds="False"/>
      </cfx:Chart.PlotArea>
      <cfx:Chart.LegendBox>
        <cfx:LegendBox Visibility="Collapsed"/>
      <cfx:Chart.LegendBox>
      <cfx:Chart.Titles>
        <cfx:Title HorizontalAlignment="Left"
                   cfxControls:SpacingDockPanel.AlignToPlotArea="False"
                   FontWeight="Bold" FontSize="32" Margin="12,0,0,6">
              Revenue YTD
         </cfx:Title>
      </cfx:Chart.Titles>
    </cfx:Chart>

Most of the XAML here is making sure that we remove all non-essential elements including axis gridlines, borders, etc. We are also using a new palette called monochrome that tries to minimize the colors used in the chart and use darker shades for the most important pieces of data. Note that you can still use bullet charts with other styles (Glass, Simple, etc.) as well as other more colorful palettes but this feels more closer to the original intention of the design “designed to convey a rich story clearly in little space”

An interesting thing about this chart is that with the proper alignment, we can show the numerical data and give the appearance of a table that mixes numbers and multiple bullet charts, to do this we can use an stretched data view, note that we will also add a title for the plot which will increase the table effect. The new AlignToMarkers property makes sure that the values in the data view are aligned inside the plot area which means the data view headers will be drawn outside the plot area.

  <cfx:Chart.DataView>
    <cfx:DataView DockBorder="None" DockPanel.Dock="Right" Visibility="Visible"
                  Background="Transparent" VerticalAlignment="Stretch"
                  AlignToMarkers="True">
      <cfx:DataView.Points>
        <cfx:DataViewItemAttributes>
          <cfx:DataViewItemAttributes.GridLines>
            <cfx:GridLine Visibility="Collapsed"/>
          </cfx:DataViewItemAttributes.GridLines>
        </cfx:DataViewItemAttributes>
      </cfx:DataView.Points>
      <cfx:DataView.Fields>
        <cfx:DataViewFieldAttributes>
          <cfx:DataViewFieldAttributes.GridLines>
            <cfx:GridLine Visibility="Collapsed"/>
          </cfx:DataViewFieldAttributes.GridLines>
          <cfx:DataViewFieldAttributes.Headers>
            <cfx:FieldHeaderAttributes Visibility="Visible" Background="Transparent"/>
          </cfx:DataViewFieldAttributes.Headers>
          <cfx:DataViewFieldAttributes.Items>
            <cfx:SeriesField SeriesIndex="0" MarkerVisibility="Collapsed"/>
            <cfx:SeriesField SeriesIndex="1" MarkerVisibility="Collapsed"/>
          </cfx:DataViewFieldAttributes.Items>
        </cfx:DataViewFieldAttributes>
      </cfx:DataView.Fields>
    </cfx:DataView>
  </cfx:Chart.DataView>
  <cfx:Chart.Titles>
    <cfx:Title HorizontalAlignment="Left" cfxControls:SpacingDockPanel.AlignToPlotArea="False"
               FontWeight="Bold" FontSize="32" Margin="12,0,0,6">
        Revenue YTD
    </cfx:Title>
    <cfx:Title HorizontalAlignment="Left">Actual vs. Target</cfx:Title>
  </cfx:Chart.Titles>

If you want to display ranges you can use the Sections property exposed by the Bullet class. In this sample we are also switching the volume for the sections and displaying both the default section colors as well as a customized version. Note that the fact that we want 3 sections means that our chart will now require 5 series so we are setting the Chart.Series collection accordingly.

All volumes (Actual, Target and Section) are expressed as percentages of the space available for each bar, remember that there is also a volume property in AllSeries which defaults to 75% and this is applied first, this means that by default even if you set SectionVolume to 100 they will have some space between them unless you set AllSeries.Volume to be 100.

  <cfxBullet:Bullet Sections="3" SectionVolume="100" TargetVolume="80" ActualVolume="50" />

  <cfx:Chart.Series>
    <cfx:SeriesAttributesCollection>
      <cfx:SeriesAttributes BindingPath="@ActualRevenue" Content="Actual"/>
      <cfx:SeriesAttributes BindingPath="@TargetRevenue" Content="Target"/>
      <cfx:SeriesAttributes BindingPath="@Bad"/>
      <cfx:SeriesAttributes BindingPath="@Satisfactory"/>
      <cfx:SeriesAttributes BindingPath="@Good"/>
    </cfx:SeriesAttributesCollection>
  </cfx:Chart.Series>

The image with the color sections was achieved by setting Fill and Stroke for the 3 extra series, if you do not set any colors we will use the recommended section colors in the Bullet Graph Design Spec. Finally you can plot more than 1 actual/target group, in the following chart also displayed in “Information Dashboard Design” we are now plotting revenue as well as units sold. We are customizing the second set of series to use a different X axis in C# code

Axis axis = new Axis();
axis.Position = AxisPosition.Far;
axis.Grids.Major.Visibility = Visibility.Collapsed;
chart1.AxesY.Add(axis);
chart1.Series[2].AxisY = axis;
chart1.Series[3].AxisY = axis;
axis.Title = new Title("Units in 00s");
chart1.AxisY.Title = new Title("Revenue in 000s");

In future builds we also plan to expose this new gallery through our design time wizard, which means you will be able to create fully customized bullet charts from Visual Studio or Expression Blend 3.

JuanC

Minimizing Ink (Part 2)

2009-08-19T20:50:12Z

This post will add features to the sparkline chart built on our previous minimizing ink post and it is driven by comments and emails we have received about this topic.

Q: One reader asks “The value being plotted will have a min and max range. I would like to draw a light gray rectangle in the back ground using these ranges and overlap the plot on top. If any of the values are out of range I can easily looking at the sparkline. do you have any idea how to do this?”

A: There are two important issues in order to implement this feature, first our Y axis was not visible in order to minimize space but if we want to show this range using Axis sections we have to make sure the axis is visible without showing any labels or gridlines. The XAML required to hide the labels and gridlines looks like this

<cfx:Chart.AxisY>
  <cfx:Axis Separation="0">
    <cfx:Axis.Labels>
      <cfx:AxisLabelAttributes Visibility="Collapsed"/>
    </cfx:Axis.Labels>
    <cfx:Axis.Grids>
      <cfx:Grids>
        <cfx:Grids.Major>
          <cfx:GridLine Visibility="Collapsed" TickMark="None"/>
        </cfx:Grids.Major>
        <cfx:Grids.Minor>
          <cfx:GridLine Visibility="Collapsed" TickMark="None"/>
        </cfx:Grids.Minor>
      </cfx:Grids>
    </cfx:Axis.Grids>
  </cfx:Axis>
</cfx:Chart.AxisY>

Hopefully how to hide gridlines and labels was intuitive but setting Separation to 0 is key to minimize the space we assign to the axis. Now we are ready to create an axis section, I will assume that the min and max range is calculated per product (per chart) so we will assume that our data layer class ProductInfo has 2 extra properties called MinDownloads and MaxDownloads.

    <cfx:Axis.Sections>
      <cfx:AxisSection From="{Binding Path=MinDownloads}"
                       To="{Binding Path=MaxDownloads}" Background="#A0A0A0" />
    </cfx:Axis.Sections>

This results in a range shown per product, note that AxisSection.From and AxisSection.To were not Dependency Properties on previous builds so you will have to make sure you are using build 3516 or later in order to get the bindings to work.

Q: An email asks the following “Is it possible to display a marker on the max value on each line?”

A: In order to implement this we have added a MaximumValueCondition and MinimumValueCondition classes in build 3517 or later, this will allow you to use our conditional attributes as follows

  <cfx:Chart.ConditionalAttributes>
    <cfx:ConditionalAttributes>
      <cfx:ConditionalAttributes.Condition>
        <cfx:MaximumValueCondition/>
      </cfx:ConditionalAttributes.Condition>
      <cfx:ConditionalAttributes.Marker>
        <cfx:MarkerAttributes Visibility="Visible" Fill="Red"
                              Size="6" Shape="Circle" />
      </cfx:ConditionalAttributes.Marker>
    </cfx:ConditionalAttributes>
  </cfx:Chart.ConditionalAttributes>

Now you can quickly see when the number of downloads for each product peaked. Note that our MaximumValueCondition class might flag more than 1 point if 2 or more points share the max value, also note that in a multi series chart we will default to calculate the max per series but you can change this behavior setting the PerSeries property to false.

Finally we can use the same class but bind it to the X value if we want to display a point label showing the last value on each chart.

      <cfx:ConditionalAttributes>
        <cfx:ConditionalAttributes.Condition>
          <cfx:MaximumValueCondition BindingPath="X"/>
        </cfx:ConditionalAttributes.Condition>
        <cfx:ConditionalAttributes.PointLabels>
          <cfx:PointLabelAttributes Visibility="Visible" Offset="3,0"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Center" FontSize="7"/>
        </cfx:ConditionalAttributes.PointLabels>
      </cfx:ConditionalAttributes>

Note that in this case we are showing the point labels for the point that matches this condition and we are making sure the label is properly aligned to the right of the line.

JuanC

Comparing multiple variables using a pane matrix (Part 2 of 2)

2009-08-15T19:52:00Z

In part 1 we showed how to use the crosstab transform and the GridPanePanel to create a pane matrix where users can quickly compare multiple variables, in this post we will try to improve other aspects of the chart, one of the main differentiators WPF brings to the table is the use of data templates to include rich information about your data in any control. In our sample let’s assume that instead of sales per region, we are tracking sales per country, this means that our data layer could easily add a string property that returns a URI with the flag for such country. When crosstab returns the per-dimension information we keep track of the first element that belongs to each dimension, e.g.

DataTemplate regionTemplate = (DataTemplate) FindResource("regionTemplate");

foreach (CrosstabDimensionValue columnDimension in crosstab1.Dimensions[0]) {
    GridPanePanelColumnDefinition columnDefinition =
                            new GridPanePanelColumnDefinition();
    // columnDefinition.Header = columnDimension.Name;
    ContentControl contentControl = new ContentControl();
    contentControl.Content = columnDimension.DataItem;
    contentControl.ContentTemplate = regionTemplate;
    columnDefinition.Header = contentControl;
    gridPanePanel.ColumnDefinitions.Add(columnDefinition);
}

<DataTemplate x:Key="regionTemplate">
  <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
    <Image Source="{Binding Path=Image}" Width="15" Height="20" Margin="0,0,4,0"/>
    <TextBlock Text="{Binding Path=Region}" VerticalAlignment="Center"/>
  </StackPanel>
</DataTemplate>

Note the images on top which will help when trying to locate a specific country, by hovering over a specific point I wanted to point out 2 details where the trick in which each series represents a combination of Region+Product+Year is leaking out. First note that the first line of the tooltip reads “Japan, ABC Widget, 2007” , also note that no other 2007 plot is highlighted even though we created a fake legend and made sure all lines that represent 2007 have the same color.

To fix the first issue we will use the fact that crosstab will automatically assign to each series the first object that matched that series as the Series.Content so all we need to do is provide a template and use it as the Series.ContentTemplate

<DataTemplate x:Key="seriesTemplate">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="4" />
      <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TextBlock Text="Region:" Grid.Row="0" Grid.Column="0"/>
    <TextBlock Text="{Binding Path=Region}" Grid.Row="0" Grid.Column="2"/>
    <TextBlock Text="Product:" Grid.Row="1" Grid.Column="0"/>
    <TextBlock Text="{Binding Path=Product}" Grid.Row="1" Grid.Column="2"/>
    <TextBlock Text="Year:" Grid.Row="2" Grid.Column="0"/>
    <TextBlock Text="{Binding Path=Year}" Grid.Row="2" Grid.Column="2"/>
  </Grid>
</DataTemplate>

  <cfx:Chart.AllSeries>
    <cfx:AllSeriesAttributes ContentTemplate="{StaticResource seriesTemplate}"/>
  </cfx:Chart.AllSeries>

I combined 2 screenshots so that you can see that our solution works well both when you hover over a point and over the line connecting 2 points, there is an alternate solution where you can set the AllSeries.ToolTips Template and ConnectedTemplate independently, this would give finer control over the information shown in both cases.

To improve highlighting we will use a new feature introduced in build 3515 or later. Internally we use an interface called IHighlightResolver to allow different implementations of what should be dimmed/highlighted, although this interface has always been public we did not have an easy entry point where you could plug your own highlighter. Now there is an event in Chart.Highlight called CreatingResolver which allows just that, to make this scenario even easier we also created a CrosstabDimensionResolver in the ChartFX.WPF.Data assembly that knows about how crosstabs joins multiple series.

private void PageLoaded (object sender, EventArgs e)
{
    chart1.DataBound += new EventHandler(OnChartDataBound);
    chart1.Highlight.CreatingResolver +=
               new HighlightResolverEventHandler(OnCreatingResolver);
}

private void OnCreatingResolver (object sender, HighlightingEventArgs args)
{
    args.Resolver = new CrosstabDimensionResolver(args, crosstab1);
}

Now highlight works and you can see all the 2007-related series, now let’s assume that your data really contains several sales per month for each region+product, crosstab will automatically accumulate on a per-month basis (because you are creating a row per month) but these details will be hidden on the chart. To show these details (you could call this drill-down) we will take the following steps

Crosstab.AggregateElements: When this property is true, crosstab will group all data items that form a specific series/row.
Chart.Selection: We need to tell Chart FX that we want to keep track of the selected item
Chart.ClickCommand: Allows us to specify what will happen when the user clicks a marker
Chart.InfoWinfow: We will show this tool and it will be templated to show the details of the selected item
AllSeries.Marker.Template: Provide a new template that will draw a rounded rectangle around the selected marker.

<cfx:Chart Template="{StaticResource chartTemplate}"
           ClickCommand="{x:Static cfx:Chart.SelectCommand}">
  <cfx:Chart.AllSeries>
    <cfx:AllSeriesAttributes>
      <cfx:AllSeriesAttributes.Marker>
        <cfx:MarkerAttributes Template="{StaticResource markerMarbleSelection}"/>
      </cfx:AllSeriesAttributes.Marker>
    </cfx:AllSeriesAttributes>
  </cfx:Chart.AllSeries>
  <cfx:Chart.InfoWindow>
    <cfx:InfoWindow Background="Transparent" Visibility="Visible"
                    ContentTemplate="{StaticResource infowindowTemplate}"/>
  </cfx:Chart.InfoWindow>
  <cfx:Chart.Selection>
    <cfx:SelectionAttributes IsEnabled="true"/>
  </cfx:Chart.Selection>
</cfx:Chart>

I omitted the templates for both the marker and the infowindow to keep the length of this post under control, you can download the attachment that contains all the necessary XAML and code included as an attachment.

We hope this post will allow you to see the power that Chart FX for WPF exposes to implement BI solutions in your WPF application.

JuanC

Plotting Geographical Data as a Contour

2009-08-06T22:02:55Z

Note: This post makes use of the XYZExtension, which at the time the post was written was not available on the public version of Chart FX for WPF. If you are interested in using the extension before its release with the next Service Pack you may download the hotfix at http://support.softwarefx.com/cfxwpf/update/hotfix/hotfix.htm.

Chart FX for WPF is about to introduce a brand new feature: the XYZExtension. This extension will allow us to add and control a third axis (Z axis) on a 3D chart. For the first time it will be possible to plot X, Y and Z values to a Chart FX chart. Right out of the gate there are two different galleries that can use this extension: SurfaceXYZ and ScatterXYZ. Multiple series of each or even combinations are also possible.

One of the cool things I was able to accomplish with the new SurfaceXYZ chart was create geographically accurate surface with data from different cities. I can see multiple uses for a chart like this, from temperature plotting, revenue per county or even sales per store in one state.

Suppose for the sake of this example that we need to plot the customer satisfaction rating on a little more than 800 stores across Florida. Plotting it on a bar chart will create more than 800 bars. And even if we order the cities alphabetically, while locating the score of a specific store should be easy, it is not so simple to understand which areas of the state are doing better than the others. Plotting it on a surface, on the other hand, will group all the stores by proximity allowing us to locate the best and worse regions. Particularly if we can do so over a map of the state. Here is what our final surface chart should look like.

Looking at that map it is very easy to spot that the cities stores around Jacksonville and the west coast are doing better than the ones on the east coast of Florida. Let’s look at what was necessary to obtain that great chart, shall we?

First thing we need is a map. I have selected a Mercator projection of the state, with no county lines. If you have not noticed yet, we are laying the map on top of our surface. That is done because the triangulation used for our surface will interpolate all the data passed to our chart, creating a false impression that data was collected from stores located in the Gulf of Mexico. To take care of that, we lay a map over the surface where the state itself is transparent. That way the non-transparent ocean will cover the interpolated data that does not make sense. Here is what our map looks like without our surface.

Now that we have selected a map, let’s look at a slice of our data.

<Store CITY="MIAMI" LATITUDE="25.64" LONGITUDE="-80.32" SCORE="91" />
<Store CITY="NORTH MIAMI BEAC" LATITUDE="25.94" LONGITUDE="-80.14" SCORE="89" />
<Store CITY="NORTH MIAMI" LATITUDE="25.89" LONGITUDE="-80.18" SCORE="91" />
<Store CITY="NORTH MIAMI BEAC" LATITUDE="25.93" LONGITUDE="-80.18" SCORE="91" />
<Store CITY="OLYMPIA HEIGHTS" LATITUDE="25.74" LONGITUDE="-80.36" SCORE="92" />
<Store CITY="MIAMI SPRINGS" LATITUDE="25.82" LONGITUDE="-80.30" SCORE="92" />

We have the latitude and longitude data for the store. While that makes it perfect to locate it via GPS, it does not make for a surface friendly data. So we are going to have to convert it to pixel values on our selected map. Since this is a Mercator projection, we use the formulas bellow to convert the data (where φ is the latitude and λ is the longitude).

To keep this a short post (or try to) I won’t post the full code for the conversion. But I will make it available as a sample on the next Service Pack (or you can ask support for it, at support [at] softwarefx [dot] com).

Once we have our data formatted in a way we can use, let’s pass it to the chart and see what we get.

SurfaceXYZ surfaceXYZ = new SurfaceXYZ();
surfaceXYZ.ShowPointsGridlines = false;
surfaceXYZ.ShowSeriesGridlines = false;
surfaceXYZ.ShowContourLines = true;
chart1.ItemsSource = chartData;

SeriesAttributes series0 = new SeriesAttributes();
SeriesAttributes series1 = new SeriesAttributes();

series0.GalleryAttributes = surfaceXYZ;
series1.GalleryAttributes = surfaceXYZ;

series0.BindingPath = "Score";
series0.BindingPathX = "X";
series1.BindingPath = "Y";

chart1.Series.Add(series0);
chart1.Series.Add(series1);

Note how we need two series for an XYZ chart. The second series is bound to the Z data, but since we are looking to our surface from above in a two dimensional way, we will call it “Y” (or latitude, on a map). The Y axis represents the value we are plotting, the Score. If this was not a 2D representation of the chart (or contour) it would represent the depth or height. This is what we end up with.

I am sparing you from the cosmetic code, that can also be available if requested. If we make a few changes to our chart to make it a contour, this is what we will have.

ChartFX.WPF.View3D view3D = chart1.View3D;
view3D.IsEnabled = true;
view3D.AngleX = -90;
view3D.AngleY = 0;
view3D.Projection = Projection.Orthographic;
view3D.BackWallVisibility = Visibility.Collapsed;
chart1.AxisX.Line.Visibility = Visibility.Hidden;
chart1.AxisX.Grids.Major.Visibility = Visibility.Hidden;
view3D.Lights.Clear();
System.Windows.Media.Media3D.AmbientLight ambLight = 
    new System.Windows.Media.Media3D.AmbientLight(Color.FromRgb(0xD0, 0xD0, 0xD0));
view3D.Lights.Add(ambLight);

If you have very sharp sight you will notice something. The “Florida shape” looks a little distorted. That happens because our contour was placed on a square, not keeping the ratio set by our chosen map. Also, the Max value of both the X and Z axis are not the values we used in our map. All that will distort our surface, making an unrealistic representation of our data. To fix that, here is the code necessary.

chart1.AxisX.Max = 820; //Height of the bitmap
chart1.AxisX.Min = 0;

XYZExtension xyzExtension = new XYZExtension();
xyzExtension.AxisZ.Max = 772; //Width of the bitmap
xyzExtension.AxisZ.Min = 0;
chart1.Extensions.Add(xyzExtension);

chart1.View3D.Depth = 94.1463; //Width divided by Height

Note that we use the XYZExtension to control the Max and Min of our Z axis. We then set both X and Z axis’ Max and Mix to the size of the map. We also changed the Depth property to the ratio of our map (almost a square, but not really). Changing the Depth property will control the size of the Z axis.

All we need now is to put the map on top! And here is the trick. We will create an ImageBrush out of the map, use it to paint the bottom of the chart (the X Axis) and relocate the bottom of the chart to the top.

chart1.AxisX.Position = AxisPosition.Far;

ImageBrush mapBrush = new ImageBrush();
mapBrush.Stretch = Stretch.Fill;
mapBrush.ImageSource = 
    new BitmapImage(new Uri("pack://siteoforigin:,,,/Resources/FloridaMap.png"));
chart1.AxisX.Background = mapBrush;
chart1.View3D.Wall.Thickness = 1;

Voilà! Our chart is ready. As mentioned before (more than a couple times, i guess), the necessary API to create a chart like this will be available on our next Service Pack, but if you can’t wait to play with it, download the hotfix at http://support.softwarefx.com/cfxwpf/update/hotfix/hotfix.htm.

Comparing multiple variables using a pane matrix (Part 1 of 2)

2009-08-05T19:17:00Z

There are many cases when the data to be plotted must be analyzed considering multiple variables, for example you might want to track sales of multiple products in multiple regions and encompassing multiple years. Let’s assume our data layer looks like this

public class ProductSalesInfo
{
    public double Sales { get; set; }
    public string Region { get; set; }
    public DateTime Date { get; set; }
    public string Product { get; set; }

    public int Year
    {
        get { return Date.Year; }
    }

    public int Month
    {
        get { return Date.Month; }
    }

    public string MonthName
    {
        get { return Date.ToString("MMM"); }
    }
}

We have added some helper properties (Year, Month and MonthName) as these will help us setting up our bindings. Our first approach to the problem includes using the crosstab data transform to make sure Chart FX plots one series per each unique combination of variables.

<cfx:Chart Gallery="Line" x:Name="chart1" Style="{x:Static cfxMotifs:Basic.Style}">
  <cfx:Chart.DataTransforms>
    <cfxData:CrosstabTransform x:Name="crosstab1" 
                               RowPath="Month" ColumnPath="Region,Product,Year"
                               ValuePath="Sales" />
  </cfx:Chart.DataTransforms>
</cfx:Chart>

As promised, we got a series per variable combination but it would be very difficult to detect trends in this picture, what we need is to layout multiple panes in such a way that each column in our grid represents a region and each row represents a product. Although we include a GridPanePanel as a way to layout multiple panes inside the chart, it has no knowledge about the nature of the data so it will just calculate a “round” number of rows and columns to accommodate the total number of panes. Also note that we do not sell ABC Widgets in Asia but if we want to create a matrix we will need to make sure we account for this.

To help in this common scenario we have added some properties to CrosstabTransform, the most important one is a Boolean property called JoinOnColumns, when set to true, Crosstab will make sure that the series combinations are such that they can be easily plotted in a matrix, so it will add fake series where needed and also make sure that the ordering of the series is always the same. Crosstab also exposes a Dimensions property that allows you to query for each dimension found in the data, i.e. you can get a list of all the regions, products and years in your dataset.

This chart will give you a better way to spot trends for a particular product or region. The labels for the columns and rows were achieved querying the Crosstab Dimensions on the DataBound chart event and using the GridPanePanel ColumnDefinitions and RowDefinitions collections. We have also removed the gridlines to reduce clutter. We have also hidden the series from the legend box and created a couple of custom legend items that show our third series dimension (year).

In this sample there is a potential problem, crosstab goes through the data and each time it finds a new Row (in this case a new Month) it adds it to a list but it will not order this list by default, this means that if the first element in your data is a sale in March this will become the first “row” so the X axis will show the months out of order, although you could maybe workaround this by making sure your data is ordered by month we have added a SortRows property that will take care of this for you, this also means we have made a Sorted property obsolete and replaced it with a hopefully more descriptive name SortColumns.

Additionally we have added a RowIDPath property which allows you to sort your rows using the Month index but show the Month Name in your axis.

<cfx:Chart.DataTransforms>
  <cfxData:CrosstabTransform x:Name="crosstab1"
          RowIDPath="Month" RowPath="MonthName" SortRows="True"
          ColumnPath="Region,Product,Year" JoinOnColumns="True"
          ValuePath="Sales" />
</cfx:Chart.DataTransforms>

At this point we have taken care of the X axis which now shows friendlier month abbreviations and will be ordered by month index regardless of the order in the data but we have manipulated our random data to show another issue, sales of “ABC Widget” are in the thousands while “Contoso Tool” sales are in the hundreds and because we are using a single Y axis it is very hard to note any trends in the lower row.

This issue can be solved in two ways, first you could use a different Y axis per row, this will still allow you to focus on a product and compare different regions using the same axis while making sure that each products gets its own Y axis.

Alternatively, you could decide that you want to have a different axis per pane, this will make same-row comparisons more difficult but might be helpful if a product sales varies widely by region. Instead of totally hiding the Y axis we will show only the min and max labels inside the plot area.

We hope this post along with the changes we have made to the crosstab transform will help you create charts where users can analyze the data more effectively, note that you need Chart FX build 3504 or later. The code used to configure these charts was not included in the text of the post to keep it to a manageable size but it is provided as an attachment.

JuanC

Creating a chart where each bar shows a region of a bitmap

2009-07-21T00:54:00Z

This one is a little hard to describe but I am sure you have seen it before in magazines or newspapers. Although our API allows you to set brushes in code we will try to do all it XAML as it will allow more tweaking later. Here is our first attempt at showing an image on each bar

<cfx:Chart Gallery="Bar">
  <cfx:Chart.Series>
    <cfx:SeriesAttributes/>
  </cfx:Chart.Series>
  <cfx:Chart.AllSeries>
    <cfx:AllSeriesAttributes>
      <cfx:AllSeriesAttributes.Template>
        <DataTemplate>
          <Canvas>
            <Rectangle Width="{Binding Path=Width}" Height="{Binding Path=Height}">
              <Rectangle.Fill>
                <ImageBrush ImageSource="C:\Temp\WorldMap.png"/>
              </Rectangle.Fill>
            </Rectangle>
          </Canvas>
        </DataTemplate>
      </cfx:AllSeriesAttributes.Template>
    </cfx:AllSeriesAttributes>
  </cfx:Chart.AllSeries>
</cfx:Chart>

Nothing earth shattering, we are binding width and height of the rectangle to the Width and Height of the logical items we will create, note that we do not need to worry about Left and Top, this is handled internally. We are creating a Canvas because we plan to add more visual elements later. And this is what we get.

Obviously this is not what we are looking for, actually there is no feature that I am aware of in WPF that allows you to draw a rectangle and specify the “region” of the ImageBrush/DrawingBrush that you would like to use for the visual. Even if we try to set Stretch to UniformToFill we will have all bars showing the same part of the world.

So the idea is to make sure all bars actually draw the bitmap in the full plot area but clipped to the geometry of the bar. Our logical items support a PlotWidth and PlotHeight that return the full dimensions of the plot area but because our canvas is automatically moved to the bar position we will have to undo this movement. Our logical items expose Left and Top but not as negative so we will have to build a simple converter

public class NegateConverter : IValueConverter
{
    object IValueConverter.Convert (object value, Type targetType,
                                    object parameter, CultureInfo culture)
    {
        if (value is double)
            return -((double) value);
        else
            return value;
    }

    object IValueConverter.ConvertBack (object value, Type targetType,
                                        object parameter, CultureInfo culture)
    {
        if (value is double)
            return -((double) value);
        else
            return value;
    }
}

And modify our template as follows

<DataTemplate>
  <Canvas>
    <Canvas.Resources>
      <local:NegateConverter x:Key="negateConverter"/>
    </Canvas.Resources>
    <Rectangle Canvas.Left="{Binding Path=Left,
                                          Converter={StaticResource negateConverter}}"
               Canvas.Top="{Binding Path=Top,
                                    Converter={StaticResource negateConverter}}"
               Width="{Binding Path=PlotWidth}" Height="{Binding Path=PlotHeight}"
               Clip="{Binding Path=BoundsGeometry}">
      <Rectangle.Fill>
        <ImageBrush Stretch="UniformToFill" ImageSource="C:\Temp\WorldMap.png"/>
      </Rectangle.Fill>
    </Rectangle>
  </Canvas>
</DataTemplate>

We are also setting the Clip property of the Rectangle to a brand new property in our logical item that will return a Geometry, to use this you need to be using ChartFX build 3488 or later, this gets us very close to our final look.

If you have read other posts in this blog you know we like to refine our designs incrementally, so first we will add a shadow to each bar (this is why we started with a Canvas instead of using the Rectangle as the only visual in the template).

<DataTemplate>
  <Canvas>
    <Canvas.Resources>
      <local:NegateConverter x:Key="negateConverter"/>
    </Canvas.Resources>
    <Rectangle Width="{Binding Path=Width}" Height="{Binding Path=Height}"
                      Fill="#404040" Stroke="#404040"
                      StrokeThickness="{Binding Path=StrokeThickness}">
      <Rectangle.BitmapEffect>
        <DropShadowBitmapEffect/>
      </Rectangle.BitmapEffect>
    </Rectangle>
    <Rectangle Canvas.Left="{Binding Path=Left,
                                          Converter={StaticResource negateConverter}}"
               Canvas.Top="{Binding Path=Top,
                                    Converter={StaticResource negateConverter}}"
               Width="{Binding Path=PlotWidth}" Height="{Binding Path=PlotHeight}"
               Clip="{Binding Path=BoundsGeometry}">
      <Rectangle.Fill>
        <ImageBrush Stretch="UniformToFill" ImageSource="C:\Temp\WorldMap.png"/>
      </Rectangle.Fill>
    </Rectangle>
  </Canvas>
</DataTemplate>

Which gives us this

If you asked me I would stop here but a coworker in the ChartFX for WPF team felt that depending on the value of the bars you might get to see too little of your bitmap, e.g. if the last 3 values were smaller than 20 you would not get to see much of the world map and maybe even lose the effect. If that is the case we could use the same bitmap in the plot area probably playing with the Opacity.

<cfx:Chart.PlotArea>
  <cfx:PlotAreaAttributes>
    <cfx:PlotAreaAttributes.Background>
      <ImageBrush Opacity="0.35" Stretch="UniformToFill"
                           ImageSource="C:\Temp\WorldMap.png" />
    </cfx:PlotAreaAttributes.Background>
  </cfx:PlotAreaAttributes>
</cfx:Chart.PlotArea>

JuanC