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

Stacked Bars with Horizontal orientation.

8 Answers 193 Views

Chart (Obsolete)

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

Technology asked on 23 Dec 2010, 09:45 AM

ChartImage.png

Dear Telerik hello,

i have a problem with the values, in Stacked Bar (Horizontal orientation). See Attached image.
Can i change the position of the values to the end of the second bar (with different color), like the example in the image??

How can i fix this??
ASAP please.

Thank you in advance for your time.

Best Regards,
George.
Navarino Technology Dept.

8 Answers, 1 is accepted

Accepted

answered on 03 Jan 2011, 10:01 AM

Dear Ryan,

first of all, happy new year. :-)

I try your code but i cannot make it work with no error.
Can you please help me? Below you will find my code.

Thank you in advance.

Best Regards,
George.
Technology Dept.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Session("UserName") = Nothing Then

Response.Redirect("~/Default.aspx")

Exit Sub

End If

If (Not Page.IsPostBack) Then

chTotal.DataSource = GetChartData()

chTotal.DataBind()

chTotal.Series(0).DefaultLabelValue = "#Y{N2}"

chTotal.Series(1).DefaultLabelValue = "#Y{N2}"

Dim s1 As New ChartSeries("Total", ChartSeriesType.Bar)

s1.Appearance.LabelAppearance.LabelLocation = Styles.StyleSeriesItemLabel.ItemLabelLocation.Inside

Dim s2 As New ChartSeries("Total CCC", ChartSeriesType.Bar)

s2.Appearance.LabelAppearance.LabelLocation = Styles.StyleSeriesItemLabel.ItemLabelLocation.Outside

End If

End Sub

Private Function GetChartData() As DataTable

Dim pCustomerID As New SqlClient.SqlParameter("@CustomerID", 8)

Dim pFromPeriodID As New SqlClient.SqlParameter("@FromPeriodID", 8)

Dim pToPeriodID As New SqlClient.SqlParameter("@ToPeriodID", 8)

Dim pHasPPCTotals As New SqlClient.SqlParameter("@HasPPCTotals", SqlDbType.TinyInt)

pCustomerID.Value = Session("CustomerID")

pHasPPCTotals.Value = 1

pFromPeriodID.Value = cbDateFromChart.SelectedValue

pToPeriodID.Value = cbDateUntilChart.SelectedValue

Dim tblResults As DataTable = ExecuteDataTable(ConnectionStrings.WebConnString, "spGetCustomerSpendVessel", New Object() {pCustomerID, pFromPeriodID, pToPeriodID, pHasPPCTotals})

chTotal.Series(0).DataYColumn = "Total"

chTotal.Series(1).DataYColumn = "Total_PPC"

chTotal.PlotArea.YAxis.Appearance.ValueFormat = Styles.ChartValueFormat.Currency

chTotal.PlotArea.XAxis.DataLabelsColumn = "Vessel"

chTotal.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 0

chTotal.PlotArea.XAxis.Appearance.TextAppearance.TextProperties.Color = System.Drawing.Color.DarkBlue

chTotal.PlotArea.Appearance.Dimensions.Margins.Bottom = Telerik.Charting.Styles.Unit.Percentage(12)

If tblResults.Rows.Count <= 15 Then

chTotal.Height = 200

Else

chTotal.Height = tblResults.Rows.Count * 15

End If

'chTotal.ClientSettings.XScale = 1

'tblResults.Select("", "Vessel DESC")

GetChartData = tblResults

ChartAverage = tblResults.Compute("AVG(Total)", "")

MinValue = tblResults.Compute("MIN(Total)", "")

MaxValue = tblResults.Compute("MAX(Total)", "")

lblInfo.Text = "Average: " & ConvertStringToDecimal(ChartAverage, 2) & "<br />" & _

CCCChecks() & "<br />" & _

"Min Value: " & ConvertStringToDecimal(MinValue, 2) & "<br />" & _

"Max Value: " & ConvertStringToDecimal(MaxValue, 2)

End Function

answered on 04 Jan 2011, 08:54 AM

ChartImage.png

Dear Evgeni ,

first of all, thank you for your quick respond.

I deleted the vb code and i inserted the same code in ASPX page.
<telerik:ChartSeries Name="Business Traffic" Type="StackedBar" Appearance-LabelAppearance-LabelLocation="Inside">

It is working now but i have another problem now.
The value that is inside the label (Blue color), is not vertically align correct. (See attached image).

Is there any way to fix this??

Thank you in advance for your time.

Best Regards,
George.
Navarino Technology Dept.

answered on 05 Jan 2011, 09:56 AM

DesignMode.PNG

Dear Evgeni ,

I have the same problem in design mode (see attached image), so i think that the problem is in the HTML code.
Bellow you will find my ASPX page code.

I Use:
VB.NET 2008
ASP.NET AJAX v.2010.3.1215.35

Thank you in advance for you support.

Best Regards,
George.
Navarino Technology Dept.

<telerik:RadChart ID="chTotal"

runat="server"

Skin="Inox"

Width="1050px"

SeriesPalette="Mac"

Height="200px"

SeriesOrientation="Horizontal"

AlternateText="Please Wait"

DefaultType="StackedBar">

<Series>

<telerik:ChartSeries Name="Business Traffic" Type="StackedBar" Appearance-LabelAppearance-LabelLocation="Inside">

<Appearance>

<FillStyle FillType="ComplexGradient" MainColor="211, 185, 123">

<FillSettings>

<ComplexGradient>

<telerik:GradientElement Color="222, 202, 152" />

<telerik:GradientElement Color="211, 185, 123" Position="0.5" />

<telerik:GradientElement Color="183, 154, 84" Position="1" />

</ComplexGradient>

</FillSettings>

</FillStyle>

<LabelAppearance LabelLocation="Inside"></LabelAppearance>

<TextAppearance TextProperties-Color="White"></TextAppearance>

<Border Color="DarkBlue" />

</Appearance>

</telerik:ChartSeries>

<telerik:ChartSeries Name="CCC Traffic" Type="StackedBar" Appearance-LabelAppearance-LabelLocation="Auto">

<Appearance>

<FillStyle FillType="ComplexGradient" MainColor="149, 193, 204">

<FillSettings>

<ComplexGradient>

<telerik:GradientElement Color="172, 208, 217" />

<telerik:GradientElement Color="149, 193, 204" Position="0.5" />

<telerik:GradientElement Color="114, 162, 175" Position="1" />

</ComplexGradient>

</FillSettings>

</FillStyle>

<TextAppearance TextProperties-Color="160, 160, 160"></TextAppearance>

<Border Color="129, 180, 193" />

</Appearance>

</telerik:ChartSeries>

</Series>

<PlotArea>

<XAxis>

<Appearance Color="Transparent">

<MajorGridLines Color="213, 213, 213" />

<TextAppearance TextProperties-Color="17, 17, 17">

</TextAppearance>

</Appearance>

<AxisLabel>

<Appearance RotationAngle="270"></Appearance>

<TextBlock Text="">

<Appearance TextProperties-Color="17, 17, 17">

</Appearance>

</TextBlock>

</AxisLabel>

</XAxis>

<YAxis>

<Appearance Color="Transparent" MinorTick-Width="0">

<MajorGridLines Color="213, 213, 213" PenStyle="Dash" />

<MinorGridLines Color="213, 213, 213" Width="0" />

<TextAppearance TextProperties-Color="17, 17, 17">

</TextAppearance>

</Appearance>

<AxisLabel>

<Appearance RotationAngle="0"></Appearance>

<TextBlock>

<Appearance TextProperties-Color="17, 17, 17">

</Appearance>

</TextBlock>

</AxisLabel>

</YAxis>

<YAxis2>

<AxisLabel>

<Appearance RotationAngle="0"></Appearance>

</AxisLabel>

</YAxis2>

<Appearance Dimensions-Margins="50px, 12%, 50px, 150px" SeriesPalette="Mac">

<FillStyle FillType="Solid" MainColor="White">

</FillStyle>

<Border Color="142, 142, 142" />

</Appearance>

</PlotArea>

<Appearance Corners="Round, Round, Round, Round, 10">

<FillStyle FillType="Image">

<FillSettings BackgroundImage="{chart}" ImageDrawMode="Flip">

</FillSettings>

</FillStyle>

<Border Color="111, 111, 111" />

</Appearance>

<ChartTitle>

<Appearance Position-AlignedPosition="Right" Position-Auto="False"

Position-X="74.5" Position-Y="9">

<FillStyle MainColor="Transparent">

</FillStyle>

</Appearance>

<TextBlock Text="Total Monthly Spend">

<Appearance TextProperties-Color="17, 17, 17" TextProperties-Font="Arial, 16pt"

Dimensions-Margins="5px, 1px, 1px, 10px">

</Appearance>

</TextBlock>

</ChartTitle>

<Legend>

<Appearance Dimensions-Margins="16%, 3%, 1px, 1px"

Position-AlignedPosition="TopRight">

<ItemTextAppearance TextProperties-Color="Black">

</ItemTextAppearance>

<FillStyle MainColor="Transparent">

</FillStyle>

<Border Width="0" />

</Appearance>

</Legend>

</telerik:RadChart>

Accepted

answered on 07 Jan 2011, 03:44 PM

Hi George,

You can force the label to appear in the middle of the bar by specifying its position i.e. for each series add series.Appearance.LabelAppearance.Position.AlignedPosition = AlignedPositions.Center

or in markup:

<LabelAppearance LabelLocation="Inside" Position-AlignedPosition="Center">

</LabelAppearance>

Kind regards,
Evgeni "Zammy" Petrov
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.