Home / Community & Support / Developer Productivity Tools Forums / WinForms > Rotator > Using RadChart with the RadRotator

• Andrew Vanderven

  Posted on Jan 8, 2008 (permalink)

  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,

  Reply

• Dwight Dwight

  Posted on Jan 9, 2008 (permalink)

  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:
  
  

  1	namespace RotatorAndChart_Example
  2	{
  3	public partial class Form1 : Form
  4	{
  5
  6	public Form1()
  7	{
  8	InitializeComponent();
  9
  10	RadChartItem chartItem = new RadChartItem();
  11	this.radRotator1.Items.Add(chartItem);
  12	}
  13	}
  14
  15	// RadChart control host class
  16	public class RadChartItem : RadHostItem
  17	{
  18	public RadChartItem()
  19	: base(new RadChart())
  20	{
  21	}
  22
  23	public RadChart Chart
  24	{
  25	get { return (RadChart)this.HostedControl; }
  26	}
  27	}
  28	}

  
  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:
  
  

  1	namespace RotatorAndChart_Example_2
  2	{
  3	public partial class Form1 : Form
  4	{
  5
  6	public Form1()
  7	{
  8	InitializeComponent();
  9
  10	// Remove the radChart1 control from the form
  11	this.Controls.Remove(this.radChart1);
  12
  13	// Add the radChart1 to the rotator, using the RadChartHostItem
  14	this.radRotator1.Items.Add(new RadChartHostItem(this.radChart1));
  15	}
  16	}
  17
  18	public class RadChartHostItem : RadHostItem
  19	{
  20	public RadChartHostItem (RadChart chart)
  21	: base(chart)
  22	{
  23	}
  24
  25	public RadChart Chart
  26	{
  27	get { return (RadChart)this.HostedControl; }
  28	}
  29	}
  30	}

  
  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:
  

  1	namespace RotatorAndChart_Example_3
  2	{
  3	public partial class Form1 : Form
  4	{
  5	public Form1()
  6	{
  7	InitializeComponent();
  8
  9	// Remove the radChart1 control from the form
  10	this.Controls.Remove(this.radChart1);
  11
  12	// Add the radChart1 to the rotator, using the RadControlHostItem
  13	this.radRotator1.Items.Add(new RadControlHostItem<RadChart>(this.radChart1));
  14
  15	// Add new chart to the rotator
  16	RadControlHostItem<RadChart> chart = new RadControlHostItem<RadChart>();
  17	this.radRotator1.Items.Add(chart);
  18
  19	// access to the chart control is achieved through
  20	// the Control property of RadControlHostItem
  21	RadChart chartControl = chart.Control;
  22	}
  23	}
  24
  25	public class RadControlHostItem<T> : RadHostItem
  26	where T: Control, new()
  27	{
  28	// This constructor takes no parameters and constructs
  29	// the required control using parameterless constructor
  30	public RadControlHostItem()
  31	: base(new T())
  32	{
  33	}
  34
  35	// This constructor takes as parameter the control that is to be hosted
  36	public RadControlHostItem(T control)
  37	: base(control)
  38	{
  39	}
  40
  41	// Property to access the hosted control
  42	public T Control
  43	{
  44	get { return (T)this.HostedControl; }
  45	}
  46	}
  47	}

  
  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

  Reply

• ewart Master

  Posted on Aug 20, 2008 (permalink)

  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

  Reply

• ewart Master

  Posted on Aug 20, 2008 (permalink)

  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

  Reply

• Nikolay Nikolay

  Posted on Aug 22, 2008 (permalink)

  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.

  Attached files

  • ChartInRotator.zip

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / WinForms > Rotator > Using RadChart with the RadRotator