Telerik blogs

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.

Let’s start with the new Multi-Axes support.

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 = new CategoricalAxis();
 
LinearAxis pressureVerticalAxis = new LinearAxis();
pressureVerticalAxis.Title = "Sea-level pressure, Pa";
pressureVerticalAxis.AxisType = AxisType.Second;
 
LinearAxis temperatureVerticalAxis = new LinearAxis();
temperatureVerticalAxis.HorizontalLocation = AxisHorizontalLocation.Right;
temperatureVerticalAxis.Title = "Temperature, °C";
temperatureVerticalAxis.AxisType = AxisType.Second;
 
LineSeries pressure = new LineSeries();
pressure.HorizontalAxis = horizontlaAxis;
pressure.VerticalAxis = pressureVerticalAxis;
pressure.Spline = true;
pressure.PointSize = SizeF.Empty;
pressure.CategoryMember = "Month";
pressure.ValueMember = "Value";
pressure.DataSource = pressureStats;
 
LineSeries temperature = new LineSeries();
temperature.HorizontalAxis = horizontlaAxis;
temperature.VerticalAxis = temperatureVerticalAxis;
temperature.Spline = true;
temperature.PointSize = SizeF.Empty;
temperature.CategoryMember = "Month";
temperature.ValueMember = "Value";
temperature.DataSource = temperatureStats;
 
this.radChartView1.Series.Add(pressure);
this.radChartView1.Series.Add(temperature);

 

The output of the code above is the following chart:

Weather 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:

ChartView Multi-Axes support

Now let’s dive into the new Drill-Down feature’s capabilities.

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:

  • We have an MVVM application;
  • DrillDownViewModel is our ViewModel;
  • DrillDownDataInfo is a class representing a single unit of data.

First we need to setup the initial view and then add two other views for the lower levels:

radChartView1.Views.AddNew();
radChartView1.Views.AddNew();
radChartView1.Title = "Revenue by Years";  
 
DrillDownController controller = new DrillDownController();
this.radChartView1.Controllers.Add(controller);
this.radChartView1.Drill += radChartView1_Drill;
this.radChartView1.ShowDrillNavigation = true;
 
DateTimeContinuousAxis horizontalAxis = new DateTimeContinuousAxis();
horizontalAxis.MajorStepUnit = Telerik.Charting.TimeInterval.Year;
horizontalAxis.MajorStep = 1;
horizontalAxis.LabelFormat = "{0:yyyy}";
horizontalAxis.Title = "Year";
 
LinearAxis verticalAxis = new LinearAxis();
verticalAxis.AxisType = AxisType.Second;
verticalAxis.Title = "USD";
 
BarSeries barSerias = new BarSeries();
barSerias.ValueMember = "Value";
barSerias.CategoryMember = "Date";
barSerias.DataSource = DrillDownViewModel.ParseDataByYear();
barSerias.HorizontalAxis = verticalAxis;
barSerias.VerticalAxis = horizontalAxis;
 
radChartView1.Series.Add(barSerias);

 

Then we add the logic in the drill event handler:

private void radChartView1_Drill(object sender, DrillEventArgs e)     
{                 
    CartesianSeries series = new BarSeries();      
    series.ValueMember = "Value";          
    series.CategoryMember = "Date";       
 
    DateTimeCategoricalAxis horizontalAxis = new DateTimeCategoricalAxis();
 
    switch (e.Level)
    {
        case 0:       
            series.DataSource = DrillDownViewModel.ParseDataByYear();
            radChartView1.Title = "Revenue by Years";
            break;
        case 1:
            int year;
            if (e.SelectedPoint != null)
            {
                year = ((DrillDownDataInfo)e.SelectedPoint.DataItem).Date.Year;
            }
            series.DataSource = DrillDownViewModel.ParseDataByMonth(year);
            radChartView1.Title = "Revenue by Months";
            horizontalAxis.LabelFormat = "{0:MMMM}";
            horizontalAxis.Title = "Months";
            break;
        case 2:
            int month;
            if (e.SelectedPoint != null)
            {
                month = ((DrillDownDataInfo)e.SelectedPoint.DataItem).Date.Month;
            }
            series = new LineSeries();
            series.ValueMember = "Value";
            series.CategoryMember = "Date";
            series.DataSource = DrillDownViewModel.ParseDataByDay(year, month);
            radChartView1.Title = "Revenue by Days";
            horizontalAxis.LabelFormat = "{0:dd}";
            horizontalAxis.Title = "Days";
            break;
    }
     
    e.View.Axes.Clear();
    series.HorizontalAxis = horizontalAxis;
    e.View.Series.Clear();
    e.View.Series.Add(series);
}

 

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.

Drill-Down for ChartView

Finally, I’ll present you the Smart labels functionality of RadChartView.

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:

this.radChartView1.ShowSmartLabels = true;

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:

Smart Pie Labels

chartview_smart-lines

chartview_smart-scatter
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.

Happy coding!

Download RadControls for WinForms by Telerik


About the Author

Ivan Petrov

Ivan Petrov was a Senior Software Developer working at the Telerik WinForms DevLabs.

Related Posts

Comments

Comments are disabled in preview mode.