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

    Thanks!



     

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

     

     

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

     

     

     

    <Series>

     

     

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

     

     

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

     

     

    </Series>

     

     

     

    <PlotArea >

     

     

    <XAxis AutoScale="True">

     

     

    <Items>

     

     

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

     

     

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

     

     

    </Items>

     

     

    </XAxis>

     

     

    </PlotArea>

     

     

     

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

     

     

    </telerik:RadChart>

     

  2. Velin
    Admin
    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;  
    RadChart1.DataBind(); 

    Hope this will help.

    Best wishes,
    Velin
    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. UI for ASP.NET Ajax is Ready for VS 2017
  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 
     
    RadChart1.DataBind()  
     
     

    Wish there was a method where I could display the results. Thanks, if you could respond to james.douglas@genesis-software.com as he has taken over this portion of the application. Thanks

  5. Answer
    Velin
    Admin
    Velin avatar
    391 posts

    Posted 18 Feb 2009 Link to this post

    Hello,

    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"
                <Series> 
                <%--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" /> 
                </Series> 
                <PlotArea> 
                    <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" /> 
                </PlotArea> 
                <Legend Visible="false" /> 
            </telerik:RadChart>  

    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,
    Velin
    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