Here comes another dose of our “What’s new in Q1 2013” series. After we showed you how to get the most out of our PDF Viewer, we’ll present to you top three new features you’ll love about RadChartView.
The enhancements that we demo below will help you deliver richer dataviz applications more quickly and easily. You get all these new features out-of-the-box with RadControls for WinForms Q1 2013.
There are many cases that require two or more charts plotted in one view. Whether you’re dealing with lack of screen estate, finding the best way to pinpoint data trends, display values progression over time, compare stats, or visualize data in different dimensions, this new feature will surely suit your needs. I am sure you can come up with many more practical scenarios and this is where RadChartView can help you. Let’s look at an example:
You have a weather application and you want to visualize the trends and fluctuations in the climatic records along the year. Here is how you can easily do that in no time:
CategoricalAxis horizontlaAxis =
LinearAxis pressureVerticalAxis =
"Sea-level pressure, Pa"
pressureVerticalAxis.AxisType = AxisType.Second;
LinearAxis temperatureVerticalAxis =
temperatureVerticalAxis.HorizontalLocation = AxisHorizontalLocation.Right;
temperatureVerticalAxis.AxisType = AxisType.Second;
LineSeries pressure =
pressure.HorizontalAxis = horizontlaAxis;
pressure.VerticalAxis = pressureVerticalAxis;
pressure.PointSize = SizeF.Empty;
pressure.DataSource = pressureStats;
LineSeries temperature =
temperature.HorizontalAxis = horizontlaAxis;
temperature.VerticalAxis = temperatureVerticalAxis;
temperature.PointSize = SizeF.Empty;
temperature.DataSource = temperatureStats;
The output of the code above is the following chart:
There are a couple of very important things to note about the code. First, you must set the axes to the series before you add the series to the chart as otherwise axes will be generated automatically for the series you add. And second, you must have one axis with AxisType set to AxisType.First and one axis with AxisType set to AxisType.Second. If you do not set the AxisType properties correctly nothing will be plotted. The default value of the property is AxisType.First so you only need to change it for the secondary axis.
Of course you are not limited to one additional axis. You can add as many series with their own axes as you need. You can also combine axes in any way as long as each series has a first and second axis. Here are some more examples:
If you have a hierarchical data where higher levels are aggregation of the data in the lower levels you can easily display this hierarchy in RadChartView employing its new Drill-Down functionality. Here follows an example in which in order to keep the code simpler we make the following assumptions:
First we need to setup the initial view and then add two other views for the lower levels:
"Revenue by Years"
DrillDownController controller =
.radChartView1.Drill += radChartView1_Drill;
DateTimeContinuousAxis horizontalAxis =
horizontalAxis.MajorStepUnit = Telerik.Charting.TimeInterval.Year;
horizontalAxis.MajorStep = 1;
LinearAxis verticalAxis =
verticalAxis.AxisType = AxisType.Second;
BarSeries barSerias =
barSerias.DataSource = DrillDownViewModel.ParseDataByYear();
barSerias.HorizontalAxis = verticalAxis;
barSerias.VerticalAxis = horizontalAxis;
Then we add the logic in the drill event handler:
sender, DrillEventArgs e)
CartesianSeries series =
DateTimeCategoricalAxis horizontalAxis =
series.DataSource = DrillDownViewModel.ParseDataByYear();
year = ((DrillDownDataInfo)e.SelectedPoint.DataItem).Date.Year;
series.DataSource = DrillDownViewModel.ParseDataByMonth(year);
"Revenue by Months"
month = ((DrillDownDataInfo)e.SelectedPoint.DataItem).Date.Month;
series.DataSource = DrillDownViewModel.ParseDataByDay(year, month);
"Revenue by Days"
series.HorizontalAxis = horizontalAxis;
The result is a chart which can be drilled up and down with a single click on a chart element or on the navigation bar at the top.
More often than not, you have data points whose labels overlap each other and prevent users from clearly distinguishing between their values. To avoid this, RadChartView is now offering an automated overlapping labels resolution. To enable this feature all you have to do is write a single line of code:
The Chart View will then reposition overlapping labels automatically. Here are several examples, showing the result with disabled Smart labels feature on the left and enabled Smart labels on the right:
Disabled vs. Enabled Smart labels feature
I hope you'll enjoy all the enhancements presented to RadChartView. As always, we'd love to hear your feedback. Don't hesitate to share your thoughts in our forums or in the comments section below.
Ivan Petrov is a Senior Software Developer working at the Telerik WinForms DevLabs. He joined the company back in 2010 after graduating from Telerik Academy. He holds a master's degree in Computer Systems and Technologies. In his spare time, Ivan is a motorsports fan, an avid gamer, a snowboarder and a mountain biker.”