This is a migrated thread and some comments may be shown as answers.

Using RadChart with the RadRotator

4 Answers 166 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Andrew Vanderven
Top achievements
Rank 1
Andrew Vanderven asked on 09 Jan 2008, 02:50 AM
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,

4 Answers, 1 is accepted

Sort by
0
Dwight
Telerik team
answered on 09 Jan 2008, 09:06 AM
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
0
ewart
Top achievements
Rank 1
answered on 21 Aug 2008, 01:48 AM
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
0
ewart
Top achievements
Rank 1
answered on 21 Aug 2008, 04:01 AM
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
0
Nikolay
Telerik team
answered on 22 Aug 2008, 02:26 PM
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.
Tags
Rotator
Asked by
Andrew Vanderven
Top achievements
Rank 1
Answers by
Dwight
Telerik team
ewart
Top achievements
Rank 1
Nikolay
Telerik team
Share this question
or