Introducing Silverlight Polar Charts

Over the last few weeks we have added a whole new range of charting support for our Silverlight Elements control suite. Silverlight Elements now includes the PolarChart control along with 12 different polar coordinate chart series. Each of these chart series are polar versions of the cartesian series that you will be familiar with from our Chart control.

Here is an example of the rose chart and stacked rose chart (Polar bar charts).

Rose chart (left) Stacked rose chart (right)

Hold on. What’s a polar chart?

For those who don’t know, a polar chart plots data based on an angle (theta) and a distance (rho) from the center of the chart. This creates a circular charting canvas as seen in all the images, rather than a rectangular canvas seen on an X-Y cartesian chart. The theta axis sweeps around 360 degrees, but the range of the axis can be between any 2 numbers. The data you plot on the chart will contain the logical theta and rho values. The axes will then calculate the actual angle and distance of the data points based on the axis ranges. Silverlight Elements provides a PolarPoint struct which is convenient for plotting data on a polar chart. Alternativly, you can use any custom data objects you want and then set the ThetaBinding and RhoBinding properties of a polar data series to specify which properties hold the data you want to plot.

Polar scatter chart:

Polar scatter chart

What can I use this for?

Though polar charts are not as commonly used as cartesian charts, they bring a few more charting capabilities to your applications that cartesian charts do not support. In particular, polar charts are great for plotting data that is related to direction, or the 12 hours of a clock face. Radar charts are well known for comparing attributes of an object, for example, the speed, passenger limit, safty, comfort and populartity of different aircraft. And of course polar line charts are a must have for plotting mathematical polar equations. Here is an example of a radar chart comparing the attributes of a couple of character roles:

Radar chart

Polar chart grid

Just like the cartesian chart control, the polar chart control supports custom background and foreground elements. This is useful for adding grid lines or images behind the plotted data, and adding crosshairs and data tracking elements in the foreground. Silverlight elements comes with the PolarChartGrid which renders grid lines and stripe lines in the background based on the positions of the axis labels. various styling options allow you to change the color and dash array of the grid lines, and define what colors to use for the stripe lines if any. You can also specify whether to use circular or straight radial lines.

Polar chart grid options

Mouse events

As the mouse is used over the charting canvas of the polar chart control, events will be raised that provide you with polar informtation about the mouse position. The polar mouse event args will let you know the logical theta and rho values of the mouse position against the polar axes. You will also get the actual angle and distance of the mouse pointer from the center of the chart, as well as the X and Y positions from the top left corner of the charting canvas. These values can be used for displaying accurate values to the user, or aid in creating custom foreground elements.

Customizing

Using the power of Silverlight, you can customize every part of the polar chart control however you like. Various properties make it easy to change the look of the chart title or the position and style of the legend and legend items. Each of the different polar coordinate series provide options for changing the style of the lines, areas and chart symbols that they display. By customizing the look of the polar chart control, you can achieve some very nice results to fit the unique style of you applications.

Custom polar chart style

The polar chart control is available through the currently nightly builds of Silverlight Elements. You can grab the trial version here, or pick it up from the store if you’re a customer.

If you have any suggestions or want to see any of the polar charts in our WPF or Windows phone control suites, then let us know by leaving a comment on this blog, or come visit the forum.

2 Responses to “Introducing Silverlight Polar Charts”

Archives

Join our mailer

You should join our newsletter! Sent monthly:

Back to Top