Using RadChart with the RadRotator

5 posts, 0 answers
  1. Andrew Vanderven
    Andrew Vanderven  avatar
    5 posts
    Member since:
    Dec 2007

    Posted 08 Jan 2008 Link to this post

    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,
  2. Dwight
    Admin
    Dwight avatar
    475 posts

    Posted 09 Jan 2008 Link to this post

    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
  3. UI for WinForms is Visual Studio 2017 Ready
  4. ewart
    ewart avatar
    221 posts
    Member since:
    Jan 2007

    Posted 20 Aug 2008 Link to this post

    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
  5. ewart
    ewart avatar
    221 posts
    Member since:
    Jan 2007

    Posted 20 Aug 2008 Link to this post

    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
  6. Nikolay
    Admin
    Nikolay avatar
    1804 posts

    Posted 22 Aug 2008 Link to this post

    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.
Back to Top
UI for WinForms is Visual Studio 2017 Ready