Simple Chart

[Warren]

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>

 

[Velin]

Hi Warren ,

[James]

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 [e-mail] as he has taken over this portion of the application. Thanks

[Velin]

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.