Using RadChart with the RadRotator

[Andrew Vanderven]

Hi,

I'm trying to figure out how to get the radChart to display in the RadRotator.. it would be nice to have a series of charts of data that rotates over time... How would I go about this, since the rotator only seems to take RadItems?

Thanks,

[Dwight]

Hi Andrew,

Thank you for writing. In order to add a RadChart into the RadRotator, you need to create a RadHostItem that contains the chart and add it to the RadRotator:

	namespace RotatorAndChart_Example
	{
	public partial class Form1 : Form
	{
	public Form1()
	{
	InitializeComponent();
	RadChartItem chartItem = new RadChartItem();
	this.radRotator1.Items.Add(chartItem);
	}
	}
	// RadChart control host class
	public class RadChartItem : RadHostItem
	{
	public RadChartItem()
	: base(new RadChart())
	{
	}
	public RadChart Chart
	{
	get { return (RadChart)this.HostedControl; }
	}
	}
	}

Unfortunately, this way of using the chart will not allow you to use the design-time to configure it.

You can overcome this using the following steps: using the design-time, add a chart to the form (say radChart1) and configure it. Then, the following code will move the chart to the rotator:

	namespace RotatorAndChart_Example_2
	{
	public partial class Form1 : Form
	{
	public Form1()
	{
	InitializeComponent();
	// Remove the radChart1 control from the form
	this.Controls.Remove(this.radChart1);
	// Add the radChart1 to the rotator, using the RadChartHostItem
	this.radRotator1.Items.Add(new RadChartHostItem(this.radChart1));
	}
	}
	public class RadChartHostItem : RadHostItem
	{
	public RadChartHostItem (RadChart chart)
	: base(chart)
	{
	}
	public RadChart Chart
	{
	get { return (RadChart)this.HostedControl; }
	}
	}
	}

Note: In both cases the chart's databinding will not work and you will have to set the series and values through code or design-time (in the second case).

The two examples above can be further generalized for hosting all kinds of controls:

	namespace RotatorAndChart_Example_3
	{
	public partial class Form1 : Form
	{
	public Form1()
	{
	InitializeComponent();
	// Remove the radChart1 control from the form
	this.Controls.Remove(this.radChart1);
	// Add the radChart1 to the rotator, using the RadControlHostItem
	this.radRotator1.Items.Add(new RadControlHostItem<RadChart>(this.radChart1));
	// Add new chart to the rotator
	RadControlHostItem<RadChart> chart = new RadControlHostItem<RadChart>();
	this.radRotator1.Items.Add(chart);
	// access to the chart control is achieved through
	// the Control property of RadControlHostItem
	RadChart chartControl = chart.Control;
	}
	}
	public class RadControlHostItem<T> : RadHostItem
	where T: Control, new()
	{
	// This constructor takes no parameters and constructs
	// the required control using parameterless constructor
	public RadControlHostItem()
	: base(new T())
	{
	}
	// This constructor takes as parameter the control that is to be hosted
	public RadControlHostItem(T control)
	: base(control)
	{
	}
	// Property to access the hosted control
	public T Control
	{
	get { return (T)this.HostedControl; }
	}
	}
	}

This last example demonstrating generic control host usage should be used with caution as the control behavior will change (as the RadChart's databinding behavior). Once the RadChart issues are addressed, we will further extend the RadRotator to natively include RadChart that will be editable through design-time.

I hope that helps.

If you have any additional questions, please contact us.

Kind regards,
Evtim
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[ewart]

Awesum, this thread is exactly what I was looking for - I wondered before I get started, if this is still the approach for 2008 Q2 given Teleriks comment below suggested there may be changes.

regards
ewart

This last example demonstrating generic control host usage should be used with caution as the control behavior will change (as the RadChart's databinding behavior). Once the RadChart issues are addressed, we will further extend the RadRotator to natively include RadChart that will be editable through design-time

[ewart]

Actually, something this cool, i couln't help but try it out right away :)  I really want to use databinding to a <list> and would be interesed to here your comment son that..  but for others telerik users I've got a non databinding version working now -here's a full sample which is based on the telerik samples:

using System;
using System.Collections.Generic;
using System.Text;

using Telerik.WinControls.UI;
using Telerik.Charting;
using Telerik.WinControls;

namespace Phoenix
{
    // RadChart control host class
     public class RadChartItem : RadHostItem
     {
         public RadChartItem()
             : base(new RadChart())
         {
         }

        public RadChartItem (RadChart chart)
             : base(chart)
         {
         }



         public RadChart Chart
         {
             get { return (RadChart)this.HostedControl; }
         }
     }

     public class makechart
     {

        public RadChart make()
        {

           // Define chart and title
           RadChart radChart = new RadChart();
           radChart.ChartTitle.TextBlock.Text = "My RadChart";
           radChart.ChartTitle.TextBlock.Appearance.TextProperties.Color =
           System.Drawing.Color.Blue;
           // Define chart series
           ChartSeries chartSeries = new ChartSeries();
           chartSeries.Appearance.LabelAppearance.Visible = false;
           chartSeries.Name = "GDP";
           chartSeries.Type = ChartSeriesType.Line;
           chartSeries.Appearance.LineSeriesAppearance.Color =
           System.Drawing.Color.BlueViolet;
           // Define the items in the series
           chartSeries.AddItem(1);
           chartSeries.AddItem(1.5);
           chartSeries.AddItem(2.0);
           chartSeries.AddItem(2.5);
           chartSeries.AddItem(3.5);
           // visually enhance the data points
           chartSeries.Appearance.PointMark.Dimensions.Width = 5;
           chartSeries.Appearance.PointMark.Dimensions.Height = 5;
           chartSeries.Appearance.PointMark.FillStyle.MainColor =
           System.Drawing.Color.Black;
           chartSeries.Appearance.PointMark.Visible = true;
           // Define chart series
           ChartSeries chartSeries2 = new ChartSeries();
           chartSeries2.Appearance.LabelAppearance.Visible = false;
           chartSeries2.Name = "GNP";
           chartSeries2.Type = ChartSeriesType.Line;
           chartSeries2.Appearance.LineSeriesAppearance.Color =
           System.Drawing.Color.Green;
           // Define the items in the series
           chartSeries2.AddItem(2);
           chartSeries2.AddItem(3);
           chartSeries2.AddItem(3.5);
           chartSeries2.AddItem(4);
           chartSeries2.AddItem(4.5);
           // visually enhance the data points
           chartSeries2.Appearance.PointMark.Dimensions.Width = 5;
           chartSeries2.Appearance.PointMark.Dimensions.Height = 5;
           chartSeries2.Appearance.PointMark.FillStyle.MainColor =
           System.Drawing.Color.Black;
           chartSeries2.Appearance.PointMark.Visible = true;
           // set the plot area gradient background fill
           radChart.PlotArea.Appearance.FillStyle.FillType =
           Telerik.Charting.Styles.FillType.Gradient;
           radChart.PlotArea.Appearance.FillStyle.MainColor =
           System.Drawing.Color.FromArgb(65, 201, 254);
           radChart.PlotArea.Appearance.FillStyle.SecondColor =
           System.Drawing.Color.FromArgb(0, 107, 186);
           // Set text and line for X axis
           radChart.PlotArea.XAxis.AxisLabel.TextBlock.Text = "Years";
           radChart.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color =
           System.Drawing.Color.Red;
           radChart.PlotArea.XAxis.Appearance.Width = 3;
           radChart.PlotArea.XAxis.Appearance.Color = System.Drawing.Color.Red;
           // Set text and line for Y axis
           radChart.PlotArea.YAxis.AxisLabel.TextBlock.Text = "%";
           radChart.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color =
           System.Drawing.Color.Red;
           radChart.PlotArea.YAxis.Appearance.Width = 3;
           radChart.PlotArea.YAxis.Appearance.Color = System.Drawing.Color.Red;
           // Add the series to the chart, chart to page.
           radChart.Series.Add(chartSeries);
           radChart.Series.Add(chartSeries2);

           return radChart;

        }
     }
  }

and I've created a form to dump it on, using the following:

         makechart mc = new makechart();
         Telerik.WinControls.UI.RadChart rc = mc.make();

         // Add the radChart1 to the rotator, using the RadChartHostItem
         radRotator1.Items.Add( new RadChartItem(rc));

initially I screwed this up and it appeared that it wasn't working until I realised that I needed to call radRotator1.Start() somewhere in the process.. redfaces all around :P

ps I noted there were some CLS compliance warnings when compliing this with VS 2008 SP1 (not fx-cop), per the below link I understand you guys will get to these at some point though.

http://www.telerik.com/community/forums/thread/b311D-hkhdt.aspx

this really looks snazzy, great job telerik.  next week: carousel with live charts? :)

cheers
ewart

[Nikolay]

Hello Ewart,

Here, at Telerik, we are always happy to have customers as enthusiastic about our products as you are.

We have tested the RadChart binding when placed in a RadRotator, and it works fine. You can find the demo project attached (based on our Q2 2008 release), although I doubt you will need one as it seems you are quite familiar with our products.

As for the CLS-compliance errors, could you please elaborate a bit more information on the warnings you are getting in Visual Studio 2008 SP1? It will be best if you send us a full list of the warnings which we will analyze further.

I am looking forward to your response.

Greetings,
Nikolay
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.