Corey Cahill

Silverlight Chart Data-Point Markers and Mouse Events

2009-11-19T10:53:00Z

When using line charts, it is often desirable to further highlight the data-point in context by superimposing a marker on top.

In this post, I will illustrate how to easily display data-point markers while utilizing mouse events.

Basic Chart

Start with your basic line chart (in this example we will use a chart with two series):

<ca:Chart x:Nam e="Chart1" XValue="Month" ChartKind="Line" Width="600" Height="400" HighlightDataPointOnHover="False">
    <ca:Chart.DataSeries>
        <ca:Series YValue="High" />
        <ca:Series YValue="Low" />
    </ca:Chart.DataSeries>
</ca:Chart>

In your code-behind, create a simple data class and set your chart's data-source:

public class ChartData 
{
    public string Month { get; set; }
    public double High { get; set; }
    public double Low { get; set; }
}

void Chart1_Loaded(object sender, RoutedEventArgs e)
{
    Chart1.DataSource = new ChartData[]
    {
        new ChartData() { Month = "Jan", High = 1451, Low = 1237 },
        new ChartData() { Month = "Feb", High = 2356, Low = 1954 },
        new ChartData() { Month = "Mar", High = 5212, Low = 4241 },
        new ChartData() { Month = "Apr", High = 4088, Low = 3956 },
        new ChartData() { Month = "May", High = 6421, Low = 5264 },
        new ChartData() { Month = "Jun", High = 4986, Low = 2999 }
    };
}

If you compile and run your application, you should now have a chart that looks like the following:

Displaying Markers on Data-Point Mouse Events

To display a marker when hovering over a data-point, first define your marker style on your series:

<ca:Series YValue="High" MarkerStyle="CircleSimple" MarkerVisible="False" MarkerSize="16" MarkerFill="Red" MarkerStrokeThickness="0" />
<ca:Series YValue="Low" MarkerStyle="CircleSimple" MarkerVisible="False" MarkerSize="16" MarkerFill="Green" MarkerStrokeThickness="0" />

Notice that we set MarkerVisiblie="False". This is because we only want to display the markers on mouse hover.

Next, we simply create event handlers for Chart's MouseEnterDataPoint and MouseLeaveDataPoint events:

void Chart1_MouseEnterDataPoint(object sender, SelectedDataPointEventArgs e)
{
    DataPoint dp = e.DataPointContext.DataPoint;
    dp.MarkerVisible = true;
}

void Chart1_MouseLeaveDataPoint(object sender, SelectedDataPointEventArgs e)
{
    DataPoint dp = e.DataPointContext.DataPoint;
    dp.MarkerVisible = false;
}

Now, if you compile and run your application, when you hover over a data-point, you should have a chart that looks like the following:

You can easily define a different brush for each data-point by setting the DataPoint.MarkerFill property.

Displaying Markers on Series Mouse Events

If we want to display markers on a whole series, we can utilize Chart's MouseEnterSeries and MouseLeaveSeries events:

void Chart1_MouseEnterSeries(object sender, SelectedSeriesEventArgs e)
{
    Series series = e.Series as Series;
    foreach (DataPoint dp in series.DataPoints)
        dp.MarkerVisible = true;
}

void Chart1_MouseLeaveSeries(object sender, SelectedSeriesEventArgs e)
{
    Series series = e.Series as Series;
    foreach (DataPoint dp in series.DataPoints)
        dp.MarkerVisible = false;
}

At this point, if you compile and run your application, you should have a chart that looks like the following when hovering over a data-point on a series:

Using Coordinate System Hover Events

A final method for responding to mouse hover events is by handling Chart's MouseHoverOverCoordinateSystem event. As might be implied by its name, the MouseHoverOverCoordinateSystem event fires every time the mouse position changes over the chart's coordinate system; hovering over the axis annotations has no effect.

To highlight data-points on all series where the mouse position corresponds to a particular x-coordinate, you can create event handlers for both the MouseHoverOverCoordinateSystem and MouseLeave events as such:

// stores current x-coordinate
string xCoord = null;

// helper method
void SetMarkerVisibility(string xCoord, bool isVisible) 
{
    foreach (Series series in Chart1.DataSeries)
    {
        DataPoint dp = series.GetPointAtX(xCoord);
        dp.MarkerVisible = isVisible;
    }
}

void Chart1_MouseHoverOverCoordinateSystem(object sender, CoordinateSystemPointEventArgs e)
{
    string newCoord = (string)e.XCoordinate;

    // call helper to hide markers
    if (xCoord != null && xCoord != newCoord) 
        SetMarkerVisibility(xCoord, false); 
                        
    xCoord = newCoord;
    // call helper to show markers
    SetMarkerVisibility(xCoord, true); 
}

void Chart1_MouseLeave(object sender, MouseEventArgs e)
{
    if (xCoord != null)
    {
        // call helper to hide markers
        SetMarkerVisibility(xCoord, false); 
        xCoord = null;
    }
}

Note: If your x-coordinate data type is not of type string (ie. DateTime, double, int), the CoordinateSystemPointEventArgs.XCoordinate property will return a continuous value that lies between the calculated minimum and maximum values of the x-axis. In order to take advantage of the Series.GetPointAtX() method, you may need to massage the value of the XCoordinate property.

Finally, if you compile and run your application, your chart should resemble the following when hovering over the coordinate system:

Conclusion

By utilizing the mouse events provided by Chart, especially in conjunction with data-point markers, you can provide added visual stimuli and context as the end-user interacts with the chart data. Putting in a little extra effort will let you achieve fantastic results.

Silverlight Chart Data-Point Selection and Highlighting

2009-11-16T21:23:00Z

Often, when you are viewing visual data, it is necessary to highlight and select a data-point to obtain context specific information for more granular analysis.

In this post, I will illustrate how to highlight and select a specific data-point with ease.

Create a Basic Chart

As always, start with a basic chart:

<ca:Chart x:Name="Chart1" XValue="Area" ChartKind="RoundedBlock" Width="600" Height="400">
    <ca:Chart.DataSeries>
        <ca:Series YValue="Total" />
    </ca:Chart.DataSeries>
</ca:Chart>

In your code-behind, create a simple data class and set your chart's data-source:

public class ChartData 
{
    public string Area { get; set; }
    public double Total { get; set; }
}

void Chart1_Loaded(object sender, RoutedEventArgs e)
{
    Chart1.DataSource = new ChartData[]
    {
        new ChartData() { Area = "North America", Total = 451 },
        new ChartData() { Area = "South America", Total = 466 },
        new ChartData() { Area = "Europe", Total = 732 },
        new ChartData() { Area = "Asia/Pacific", Total = 4088},
        new ChartData() { Area = "Africa", Total = 973 }
    };
}

If you compile and run your application, you should now have a chart that looks like the following:

By default, data-point highlighting (on mouse hover) is turned on. You can toggle this by setting Chart's HighlightDataPointOnHover property to true or false.

Selecting a Data-Point on Mouse Click

To visually select a data-point, create a private member of type DataPoint in your UserControl and add an EventHandler for Chart's MouseLeftButtonUpOnDataPoint event:

private DataPoint activeDataPoint = null;

void Chart1_MouseLeftButtonUpOnDataPoint(object sender, SelectedDataPointEventArgs e)
{
    // cast the current data-point
    DataPoint dp = e.DataPointContext.DataPoint;
    // check for match
    bool isMatch = (dp == activeDataPoint);

    // clear the previously selected data-point
    if (activeDataPoint != null) 
    {
        activeDataPoint.ClearValue(DataPoint.ColorProperty);
        activeDataPoint = null;
    }

    // if the current data-point doesn't match the previously selected data-point, 
    // highlight it; otherwise, we assume the previous data-point to be un-selected
    if (!isMatch)
    {
        activeDataPoint = dp;
        activeDataPoint.Color = Colors.Green;
    }
}

Now, if you compile and run your application then click on a data-point, you should have a chart that looks like the following:

Clicking on a data-point that is not already highlighted will select and highlight the new data-point. Clicking on a data-point that is already highlighted with remove the highlight.

Conclusion

Although it is rather trivial to implement data-point selection and highlighting, it is an extremely useful visual cue for providing data-point context.

Creating Custom DataPoint Popups for Silverlight Chart

2009-11-12T22:40:00Z

One of Chart's most powerful features is the ability to define custom templates for data-point popups.

In this post, I will cover defining a basic data-point popup, as well as attaching and displaying more complex data.

Start Simple

Start with a simple chart:

<ca:Chart x:Name="Chart1" XValue="Area" ChartKind="RoundedBlock" Width="600" Height="400">
    <ca:Chart.DataSeries>
        <ca:Series YValue="Total" />
    </ca:Chart.DataSeries>
</ca:Chart>

In your code-behind, create a simple data class and set your chart's data-source:

public class ChartData
{
    public string Area { get; set; }
    public double Total { get; set; }
}

void Chart1_Loaded(object sender, RoutedEventArgs e)
{
    Chart1.DataSource = new ChartData[]
    {
        new ChartData() { Area = "North America", Total = 451 },
        new ChartData() { Area = "South America", Total = 466 },
        new ChartData() { Area = "Europe", Total = 732 },
        new ChartData() { Area = "Asia/Pacific", Total = 4088},
        new ChartData() { Area = "Africa", Total = 973 }
    };
}

If you compile and run your application, you should now have a chart that looks like the following:

Define A Custom DataPointPopup

You can add a custom data-point popup by first defining it as a resource:

<ca:DataPointPopup x:Key="CustomDataPointPopup">
    <ca:DataPointPopup.DataTemplate>
        <DataTemplate>
            <Border Background="#70000000" CornerRadius="4" Padding="10">
                <Grid Width="130">
                    <Border Background="{Binding DataPoint.Brush}" Opacity="0.6" CornerRadius="3" Margin="-5 -2 -5 -2"/>
                    <TextBlock Text="{Binding DataPoint.X}" Foreground="White" HorizontalAlignment="Left" FontWeight="Bold" />
                    <TextBlock Text="{Binding DataPoint.Y}" Foreground="White" HorizontalAlignment="Right" FontWeight="Bold" />
                </Grid>
            </Border>
        </DataTemplate>
    </ca:DataPointPopup.DataTemplate>
</ca:DataPointPopup>

And then binding the DataPointPopup property of your series to it:

<ca:Series YValue="Total" DataPointPopup="{StaticResource CustomDataPointPopup}" />

Notice that the template binds to properties of a DataPoint object. In fact, the DataContext of the popup is an instance of the DataPointContext class. As well as providing information about the current DataPoint, it also provides information regarding the Series, Chart and more.

If you compile and run your application, you should now have a chart that looks like the following:

Attaching And Displaying Complex Data

If we want to display more advanced information in the popup, we can add additional data to each DataPoint object via its Tag property. Do this by hooking into the Chart's DataStructureCreated event:

void Chart1_DataStructureCreated(object sender, EventArgs e)
{
    Series series = Chart1.DataSeries[0] as Series;
    foreach (DataPoint dp in series.DataPoints)
    {
        switch (dp.X as string)
        {
            case "North America":
                dp.Tag = new ChartData[]
                {
                    new ChartData() { Area = "Canada", Total = 33 },
                    new ChartData() { Area = "Mexico", Total = 111 },
                    new ChartData() { Area = "USA", Total = 307 }
                };
                break;

            case "South America":
                dp.Tag = new ChartData[]
                {
                    new ChartData() { Area = "Argentina", Total = 40 },
                    new ChartData() { Area = "Brazil", Total = 191 },
                    new ChartData() { Area = "Venezuela", Total = 26 },
                    new ChartData() { Area = "Others", Total = 239 },
                };
                break;

            case "Europe":
                dp.Tag = new ChartData[]
                {
                    new ChartData() { Area = "France", Total = 65 },
                    new ChartData() { Area = "Germany", Total = 82 },
                    new ChartData() { Area = "UK", Total = 61 },
                    new ChartData() { Area = "Others", Total = 524 }
                };
                break;
   
            case "Asia/Pacific":
                dp.Tag = new ChartData[]
                {
                    new ChartData() { Area = "China", Total = 1368 },
                    new ChartData() { Area = "Japan", Total = 127 },
                    new ChartData() { Area = "India", Total = 1198 },
                    new ChartData() { Area = "Others", Total = 1395 }
                };
                break;

            case "Africa":
                dp.Tag = new ChartData[]
                {
                    new ChartData() { Area = "Egypt", Total = 77 },
                    new ChartData() { Area = "Morocco", Total = 31 },
                    new ChartData() { Area = "South Africa", Total = 49 },
                    new ChartData() { Area = "Others", Total = 816 }
                };
                break;
        }
    }
}

Note: Chart.DataStructureCreated is the earliest possible time that you can access the chart's internal data-structures.

Now, we can define a more advanced DataPointPopup:

<ca:DataPointPopup x:Key="CustomDataPointPopup">
    <ca:DataPointPopup.DataTemplate>
        <DataTemplate>
            <Border Background="#70000000" CornerRadius="4" Padding="10">
                <StackPanel Orientation="Vertical">
                    <Grid Width="130">
                        <Border Background="{Binding DataPoint.Brush}" Opacity="0.6" CornerRadius="3" Margin="-5 -2 -5 -2"/>
                        <TextBlock Text="{Binding DataPoint.X}" Foreground="White" HorizontalAlignment="Left" FontWeight="Bold" />
                        <TextBlock Text="{Binding DataPoint.Y}" Foreground="White" HorizontalAlignment="Right" FontWeight="Bold" />
                    </Grid>

                    <ListBox ItemsSource="{Binding DataPoint.Tag}" Margin="0" Padding="0">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Grid Width="120" Margin="10 0 0 0">
                                    <TextBlock Text="{Binding Area}" Foreground="White" HorizontalAlignment="Left" />
                                    <TextBlock Text="{Binding Total}" Foreground="White" HorizontalAlignment="Right" FontWeight="Bold" />
                                </Grid>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                        <ListBox.Template>
                            <ControlTemplate TargetType="ListBox">
                                <Grid>
                                    <ItemsPresenter Margin="0" />
                                </Grid>
                            </ControlTemplate>
                        </ListBox.Template>
                    </ListBox>
                </StackPanel>
            </Border>
        </DataTemplate>
    </ca:DataPointPopup.DataTemplate>
</ca:DataPointPopup>

Notice that we can now bind to DataPoint.Tag and use its data to further populate our custom popup.

If you compile and run your application, you should now have a chart that looks like the following:

Conclusion

By defining a custom DataPointPopup template and utilizing DataPoint's Tag property, you can create a custom popup that is able display additional information that is as complex and/or diverse as anything you can imagine! This is one feature that every developer should give adequate attention to!

ComponentArt Gauges for Silverlight Sneak Preview

2009-06-22T23:51:00Z

ComponentArt is pleased to announce a sneak preview of Gauge for Silverlight!

We have been working hard to bring you a flexible, themeable and customizable gauge control that delivers the same outstanding visual quality and ease of functionality that our ASP.NET AJAX gauges deliver.

Theming

ComponentArt Gauge for Silverlight has very robust theming capabilities that allow you to customize the visual display of your gauge in almost any way that you can possibly conceive of. Because Gauge has its themes defined entirely in XAML (vs. programmatic design), every visual element can be tweaked and/or replaced with very little effort! For those who like to get up and running quickly, Gauge will ship with a number of already complete themes.

Data Binding

Gauge for Silverlight is extremely flexible in its ability to be bound to other resources and objects. Since almost every property supports binding, the use of custom DataContexts will make your life much easier!

The following example illustrates both the theming and data binding capabilities of Gauge.

Click to launch example.

Interactivity & Animations

Gauge for Silverlight will bring a new level of interactivity to our Gauge suite by utilizing Silverlight events, storyboard animations and its flexible architecture. Custom and predefined animations can be used to smoothly (or wildly!) transition between states as the gauge's data changes.

The following example illustrates the use of a custom-animation to realistically transition the pointer from its old value to its new value.

Click to launch example.

More Features To Look For

Complete radial, linear, numeric and indicator gauge themes
Content area for embedded gauges, annotations and/or UI controls
Interactive mouse events for gauge feedback and manipulation

Keep an eye out for a Fall 2009 Beta of Gauge for Silverlight!

Corey Cahill

Silverlight Chart Data-Point Markers and Mouse Events

Silverlight Chart Data-Point Selection and Highlighting

Creating Custom DataPoint Popups for Silverlight Chart

ComponentArt Gauges for Silverlight *Sneak Preview*

ComponentArt Gauges for Silverlight Sneak Preview