Simple Chart

Thread is closed for posting
4 posts, 1 answers
  1. Warren
    Warren avatar
    24 posts
    Member since:
    May 2008

    Posted 16 Feb 2009 Link to this post

    With two items retrieved from database Open and PastDue, Horizontal Bar Chart, looking at example in PDF documentation Page #47.
    What I want as output is something like

    TotalOpen =========================================  301
    TotalPast ========= 13

    Problem is that I can't seem to figure out how to get the YColumn Text, the example below is
    like the 10th variation



    <telerik:RadChart ID="RadChart1" runat="server"



    Skin="WebBlue" AutoLayout="true" Height="350px" Width="680px" SeriesOrientation="Horizontal">







    <telerik:ChartSeries DataYColumn="Open" Name="Total Open"></telerik:ChartSeries>



    <telerik:ChartSeries DataYColumn="Past" Name="Total Past"></telerik:ChartSeries>







    <PlotArea >



    <XAxis AutoScale="True">






    <telerik:ChartAxisItem TextBlock-Text="Open" />



    <telerik:ChartAxisItem TextBlock-Text="Past TAT" />













    <Legend Appearance-Position-AlignedPosition="right" Visible="false"></Legend>





  2. Velin
    Velin avatar
    391 posts

    Posted 17 Feb 2009 Link to this post

    Hi Warren ,

    First, I want to make a quick note - setting the SeriesOrientation property of RadChart to Horizontal effectively swaps the positions of XAxis and YAxis. In other words, this makes RadChart to have a vertical X axis and a horizontal Y axis.

    Supposing your data source contains a column containing the numeric data to be shown and a separate column containing the labels data which is to be displayed on the X axis, there are a few more steps to achieve the desired result:

    1. Create a chart series object of type "Bar" and set its DataYColumn property to the name of the numeric data column from your data source.
    2. Set the DataLabelsColumn property of the X axis to the name of the label data column from your data source.

    Following is a sample code :

    RadChart1.SeriesOrientation = ChartSeriesOrientation.Horizontal;  
    ChartSeries series1 = RadChart1.CreateSeries("Series1", Color.Blue, Color.Silver, ChartSeriesType.Bar);  
    series1.DataYColumn = "Numeric Data";  
    RadChart1.PlotArea.XAxis.DataLabelsColumn = "Label Data";  
    RadChart1.DataSource = MyDataSource;  

    Hope this will help.

    Best wishes,
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. DevCraft R3 2016 release webinar banner
  4. James
    James avatar
    20 posts
    Member since:
    Oct 2008

    Posted 17 Feb 2009 Link to this post

    The chart still does not display the 'Label' but rather the data value. What I expect in the chart is something like

    Open   ===============================   134
    Past    ============ 34

    And it displays

    134 ==================================   134

    .aspx code  
    <rad:RadChart ID="RadChart1" runat="server" Skin="Office2007" AutoLayout="false" ></rad:RadChart> 





    'Get data from database



    'Results will look like



    'Open      Past



    '====      ====



    '134           34











    Me.RadChart1.ChartTitle.TextBlock.Text = "Current Status: " + System.DateTime.Now  
    Me.RadChart1.SeriesOrientation = Telerik.Charting.ChartSeriesOrientation.Horizontal  
    Dim series1 As Telerik.Charting.ChartSeries = RadChart1.CreateSeries("Series1", Drawing.Color.Blue, Drawing.Color.Silver, Telerik.Charting.ChartSeriesType.Bar)  
    series1.DataYColumn = "Open" 
    Me.RadChart1.PlotArea.XAxis.DataLabelsColumn = "Open Minutes" 
    RadChart1.DataSource = results 

    Wish there was a method where I could display the results. Thanks, if you could respond to as he has taken over this portion of the application. Thanks

  5. Answer
    Velin avatar
    391 posts

    Posted 18 Feb 2009 Link to this post


    Here is an exact copy of my answer to James' support ticket:

    Let me start with a small example showing how your declarative presentation of RadChart should look like:

            <telerik:RadChart ID="RadChart1" runat="server" SeriesOrientation="Horizontal" AutoLayout="true" Skin="Vista" OnBeforeLayout="RadChart1_BeforeLayout"
                <%--This Chart Series will use the column named "Data" from your data source to calculate the lenght of the bars.--%> 
                    <telerik:ChartSeries DataYColumn="Data" Type="Bar" /> 
                    <YAxis AxisMode="Extended" /> 
                <%--The X axis will use the column named "Labels" from your data source and will place a label in front of every bar.--%> 
                    <XAxis DataLabelsColumn="Labels" /> 
                <Legend Visible="false" /> 

    The points of interest are highlighted.

    A short explanation on the code above:
    1. You shouldn't create 2 separate ChartSeries objects to bind the 2 values from the data source. You should create a single ChartSeries and bind it to the column containing the numeric data (in this example the column is named just "Data").
    2. The X axis should be bound to another column in your data source from which it will retrieve the labels to display.

    For all of this to work you should rework your stored procedure to return data in the following format:

    | "Data" || "Labels" |
    |   134   ||  Open     |
    |    34    ||  Past       |

    If you do the things this way you'll get the two bars in the same colors and maybe you'll want to customize their appearance. Since the bars are dynamically generated objects you should register to the BeforeLayout event of RadChart and manually adjust the colors in the event handler. Here is how to do this:

           public void RadChart1_BeforeLayout(object sender, EventArgs e) 
                RadChart1.Series[0].Items[1].Appearance.FillStyle.MainColor = Color.FromArgb(235, 140, 104); 
                RadChart1.Series[0].Items[1].Appearance.FillStyle.SecondColor = Color.FromArgb(214, 110, 90); 

    This event handler is the right place for other customizations too. Supposing you want to retrieve the labels on the X axis not from the database but from a hard-coded array of strings you could use code like this:

            public void RadChart1_BeforeLayout(object sender, EventArgs e) 
                string[] labels = new[] { "Open", "Past" }; 
                for (int i = 0; i < labels.Length; i++) 
                    RadChart1.PlotArea.XAxis.Items[i].TextBlock.Text = labels[i]; 

    Attached is a sample runnable project containing all the code shown above. Hope this will help.

    All the best,
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top