We recently moved our web site to a new host, and have lost the ability for RadCharts to show custom colors on the series displays. I found a post about adding a custom palette which works for Bar / Line charts that use a MainColor and SecondColor. But is there a way to do this for Complex Gradient Colors? Seems to be a security/trust issue or something not letting me programmatically change the colors via VB or even take custom settings through the control properties, am always getting the default skin palette showing up. (Does work when using "View in Browser") option on local development PC, however.)
VB and ASPX below. Suggestions appreciated.
Regards,
Dave
Protected Sub SetupChart()
'RadChart1.Clear()
'Dim series0 As ChartSeries = New ChartSeries("Develop", ChartSeriesType.StackedBar)
'Dim series1 As ChartSeries = New ChartSeries("Work", ChartSeriesType.StackedBar)
'Dim series2 As ChartSeries = New ChartSeries("Retirement", ChartSeriesType.StackedBar)
'Dim series3 As ChartSeries = New ChartSeries("Years", ChartSeriesType.StackedBar)
''
'' Note: series 3 is not displayed, it is just used to set the "years" range on the
'' secondary axis display.
''
'RadChart1.SeriesOrientation = ChartSeriesOrientation.Horizontal
'RadChart1.Series.Add(series0)
'RadChart1.Series.Add(series1)
'RadChart1.Series.Add(series2)
'RadChart1.Series.Add(series3)
RadChart1.Series(3).YAxisType =
ChartYAxisType.Secondary
RadChart1.Series(3).Appearance.LegendDisplayMode =
ChartSeriesLegendDisplayMode.Nothing
RadChart1.AutoLayout =
False
RadChart1.PlotArea.YAxis2.AutoScale =
False
RadChart1.Series(3).Visible =
False
With RadChart1.Series(0).Appearance
.LabelAppearance.Position.Auto =
True
.LabelAppearance.Position.AlignedPosition =
AlignedPositions.Center
.LabelAppearance.LabelLocation =
LabelLocation.InsidePlotArea
.TextAppearance.TextProperties.Font =
New Font("Verdana", 12, FontStyle.Bold)
.FillStyle.FillSettings.GradientMode =
GradientFillStyle.Circle
.FillStyle.FillType =
FillType.Gradient
.FillStyle.FillSettings.ComplexGradient.Add(
New GradientElement(Color.Red, 0))
.FillStyle.FillSettings.ComplexGradient.Add(
New GradientElement(Color.Orange, 0.5))
.FillStyle.FillSettings.ComplexGradient.Add(
New GradientElement(Color.Yellow, 1))
.TextAppearance.Position.AlignedPosition =
AlignedPositions.Center
' .Border.Color = Color.Black
.Corners.BottomLeft =
CornerType.Round
.Corners.BottomRight =
CornerType.Round
.Corners.TopLeft =
CornerType.Round
.Corners.TopRight =
CornerType.Round
.Corners.RoundSize = 10
End With
'With series0.Appearance
' .LabelAppearance.Position.Auto = True
' .LabelAppearance.Position.AlignedPosition = AlignedPositions.Center
' .LabelAppearance.LabelLocation = LabelLocation.InsidePlotArea
' .TextAppearance.TextProperties.Font = New Font("Verdana", 12, FontStyle.Bold)
' .FillStyle.FillSettings.GradientMode = GradientFillStyle.Circle
' .FillStyle.FillType = FillType.Gradient
' .FillStyle.FillSettings.ComplexGradient.Add(New GradientElement(Color.Red, 0))
' .FillStyle.FillSettings.ComplexGradient.Add(New GradientElement(Color.Orange, 0.5))
' .FillStyle.FillSettings.ComplexGradient.Add(New GradientElement(Color.Yellow, 1))
' .TextAppearance.Position.AlignedPosition = AlignedPositions.Center
' ' .Border.Color = Color.Black
' .Corners.BottomLeft = CornerType.Round
' .Corners.BottomRight = CornerType.Round
' .Corners.TopLeft = CornerType.Round
' .Corners.TopRight = CornerType.Round
' .Corners.RoundSize = 10
'End With
With RadChart1.Series(1).Appearance
.LabelAppearance.Position.Auto =
True
.LabelAppearance.Position.AlignedPosition =
AlignedPositions.Center
.LabelAppearance.LabelLocation =
LabelLocation.InsidePlotArea
.TextAppearance.TextProperties.Font =
New Font("Verdana", 12, FontStyle.Bold)
.FillStyle.FillSettings.GradientMode =
GradientFillStyle.Circle
.FillStyle.FillType =
FillType.Gradient
.FillStyle.FillSettings.ComplexGradient.Add(
New GradientElement(Color.Blue, 0))
.FillStyle.FillSettings.ComplexGradient.Add(
New GradientElement(Color.Azure, 0.5))
.FillStyle.FillSettings.ComplexGradient.Add(
New GradientElement(Color.LightBlue, 1))
.FillStyle.MainColor =
Color.Red
.FillStyle.SecondColor =
Color.White
.TextAppearance.Position.AlignedPosition =
AlignedPositions.Center
.Corners.BottomLeft =
CornerType.Round
.Corners.BottomRight =
CornerType.Round
.Corners.TopLeft =
CornerType.Round
.Corners.TopRight =
CornerType.Round
.Corners.RoundSize = 10
End With
With RadChart1.Series(2).Appearance
.LabelAppearance.Position.Auto =
True
.LabelAppearance.Position.AlignedPosition =
AlignedPositions.Center
.LabelAppearance.LabelLocation =
LabelLocation.InsidePlotArea
.TextAppearance.TextProperties.Font =
New Font("Verdana", 12, FontStyle.Bold)
.FillStyle.FillSettings.GradientMode =
GradientFillStyle.Circle
.FillStyle.FillType =
FillType.Gradient
.FillStyle.FillSettings.ComplexGradient.Add(
New GradientElement(Color.Green, 0))
.FillStyle.FillSettings.ComplexGradient.Add(
New GradientElement(Color.LightGreen, 0.5))
.FillStyle.FillSettings.ComplexGradient.Add(
New GradientElement(Color.Aquamarine, 1))
.FillStyle.MainColor =
Color.Red
.FillStyle.SecondColor =
Color.White
.TextAppearance.Position.AlignedPosition =
AlignedPositions.Center
.Corners.BottomLeft =
CornerType.Round
.Corners.BottomRight =
CornerType.Round
.Corners.TopLeft =
CornerType.Round
.Corners.TopRight =
CornerType.Round
.Corners.RoundSize = 10
End With
'With (RadChart1.Series(0).Appearance)
' .LabelAppearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.Top
' '.FillStyle.FillSettings.ComplexGradient(0).Color = System.Drawing.Color.Green
' '.FillStyle.FillSettings.ComplexGradient(2).Color = Drawing.Color.DarkGreen
'End With
' RadChart1.PlotArea.Appearance.Dimensions.Width = 400
' RadChart1.Visible = True
End Sub
<telerik:RadChart ID="RadChart1" runat="server"
AlternateText="Loading..." DefaultType="StackedBar" Height="180px" SeriesOrientation="Horizontal"
Skin="Desert" Width="500px">
<Appearance>
<Border Color="183, 181, 159" />
</Appearance>
<series>
<telerik:ChartSeries Name="Developing" Type="StackedBar">
<Appearance BarWidthPercent="50" Corners="Round, Round, Round, Round, 3">
<FillStyle FillType="ComplexGradient" MainColor="Red" SecondColor="Orange">
<FillSettings>
<ComplexGradient>
<telerik:GradientElement Color="Red" />
<telerik:GradientElement Color="Orange" Position="0.5" />
<telerik:GradientElement Color="Yellow" Position="1" />
</ComplexGradient>
</FillSettings>
</FillStyle>
<LabelAppearance LabelLocation="Inside" Position-AlignedPosition="Center">
</LabelAppearance>
<TextAppearance TextProperties-Color="108, 105, 87">
</TextAppearance>
<Border Color="187, 149, 58" />
</Appearance>
</telerik:ChartSeries>
<telerik:ChartSeries Name="Work" Type="StackedBar">
<Appearance Corners="Round, Round, Round, Round, 3">
<FillStyle FillType="ComplexGradient" MainColor="Blue" SecondColor="LightBlue">
<FillSettings>
<ComplexGradient>
<telerik:GradientElement Color="Blue" />
<telerik:GradientElement Color="Azure" Position="0.5" />
<telerik:GradientElement Color="LightBlue" Position="1" />
</ComplexGradient>
</FillSettings>
</FillStyle>
<LabelAppearance LabelLocation="Inside" Position-AlignedPosition="Center"
Position-Auto="true">
</LabelAppearance>
<TextAppearance Position-AlignedPosition="Center"
TextProperties-Color="108, 105, 87">
</TextAppearance>
<Border Color="129, 180, 193" />
</Appearance>
</telerik:ChartSeries>
<telerik:ChartSeries Name="Retirement" Type="StackedBar">
<Appearance Corners="Round, Round, Round, Round, 3">
<FillStyle FillType="ComplexGradient">
<FillSettings>
<ComplexGradient>
<telerik:GradientElement Color="Green" />
<telerik:GradientElement Color="LightGreen" Position="0.5" />
<telerik:GradientElement Color="Aquamarine" Position="1" />
</ComplexGradient>
</FillSettings>
</FillStyle>
<TextAppearance TextProperties-Color="108, 105, 87">
</TextAppearance>
<Border Color="123, 154, 69" />
</Appearance>
</telerik:ChartSeries>
<telerik:ChartSeries Name="CalendarYears" Type="StackedBar" Visible="False"
YAxisType="Secondary">
<Appearance LegendDisplayMode="Nothing">
<FillStyle FillType="ComplexGradient">
<FillSettings>
<ComplexGradient>
<telerik:GradientElement Color="187, 174, 165" />
<telerik:GradientElement Color="163, 146, 135" Position="0.5" />
<telerik:GradientElement Color="134, 115, 103" Position="1" />
</ComplexGradient>
</FillSettings>
</FillStyle>
<TextAppearance TextProperties-Color="108, 105, 87"></TextAppearance>
<Border Color="136, 119, 102" />
</Appearance>
</telerik:ChartSeries>
</series>
<Legend>
<Appearance Dimensions-Margins="8px, 10px, 1px, 5px" Overflow="Auto"
Position-AlignedPosition="TopRight">
<ItemTextAppearance AutoTextWrap="False" TextProperties-Color="87, 84, 65">
</ItemTextAppearance>
<FillStyle MainColor="243, 243, 229"></FillStyle>
<Border Color="208, 207, 195" />
</Appearance>
</Legend>
<PlotArea>
<XAxis MaxItemsCount="1">
<Appearance Color="215, 214, 202" MajorTick-Color="226, 225, 207">
<MajorGridLines Color="226, 225, 207" PenStyle="Solid" />
<LabelAppearance Visible="False"></LabelAppearance>
<TextAppearance TextProperties-Color="87, 84, 65"></TextAppearance>
</Appearance>
<AxisLabel>
<Appearance RotationAngle="270"></Appearance>
<TextBlock Text="" Visible="False">
<Appearance TextProperties-Color="96, 93, 75"></Appearance>
</TextBlock>
</AxisLabel>
</XAxis>
<YAxis>
<Appearance Color="212, 211, 199" MajorTick-Color="226, 225, 207"
MinorTick-Color="226, 225, 207" MinorTick-Width="0">
<MajorGridLines Color="226, 225, 207" PenStyle="Solid" />
<MinorGridLines Color="226, 225, 207" PenStyle="Solid" Width="0" />
<LabelAppearance Position-AlignedPosition="Top"></LabelAppearance>
<TextAppearance Position-AlignedPosition="Top" TextProperties-Color="DarkGreen">
</TextAppearance>
</Appearance>
<AxisLabel Visible="True">
<Appearance Position-Auto="False" Position-X="220" Position-Y="155"
RotationAngle="0" Visible="True">
</Appearance>
<TextBlock Text="Age (years)">
<Appearance Position-AlignedPosition="Top" TextProperties-Color="DarkGreen"></Appearance>
</TextBlock>
</AxisLabel>
</YAxis>
<YAxis2 AutoScale="False" MaxValue="100" MinValue="0" Step="10" Visible="True">
<Appearance MinorTick-MinorTickCount="4" ValueFormat="General">
<TextAppearance TextProperties-Color="DarkBlue"></TextAppearance>
</Appearance>
<AxisLabel Visible="True">
<Appearance Dimensions-Paddings="0px, 1px, 0px, 1px" RotationAngle="0"
Visible="True" Position-Auto="False" Position-X="236" Position-Y="50">
</Appearance>
<TextBlock Text="Year">
<Appearance TextProperties-Color="DarkBlue"></Appearance>
</TextBlock>
</AxisLabel>
<Items>
<telerik:ChartAxisItem></telerik:ChartAxisItem>
<telerik:ChartAxisItem Value="10"></telerik:ChartAxisItem>
<telerik:ChartAxisItem Value="20"></telerik:ChartAxisItem>
<telerik:ChartAxisItem Value="30"></telerik:ChartAxisItem>
<telerik:ChartAxisItem Value="40"></telerik:ChartAxisItem>
<telerik:ChartAxisItem Value="50"></telerik:ChartAxisItem>
<telerik:ChartAxisItem Value="60"></telerik:ChartAxisItem>
<telerik:ChartAxisItem Value="70"></telerik:ChartAxisItem>
<telerik:ChartAxisItem Value="80"></telerik:ChartAxisItem>
<telerik:ChartAxisItem Value="90"></telerik:ChartAxisItem>
<telerik:ChartAxisItem Value="100"></telerik:ChartAxisItem>
</Items>
</YAxis2>
<Appearance Dimensions-AutoSize="False" Dimensions-Height="40px"
Dimensions-Margins="2%, 7%, 2%, 5%" Dimensions-Width="440px"
Position-AlignedPosition="Center" Position-Auto="False" Position-X="35"
Position-Y="95">
<FillStyle FillType="Solid" MainColor="243, 243, 229"></FillStyle>
<Border Color="208, 207, 195" />
</Appearance>
</PlotArea>
<ChartTitle>
<Appearance Dimensions-Margins="4%, 0px, 0px, 8%"></Appearance>
<TextBlock Text="Time in Phase">
<Appearance TextProperties-Color="DarkRed" TextProperties-Font="Verdana, 12pt, style=Bold">
</Appearance>
</TextBlock>
</ChartTitle>
</telerik:RadChart>
3 Answers, 1 is accepted
Unfortunately, we are not aware of any kind of security/trust issue regarding the generation of complex gradients in RadChart. Can you confirm that the same code runs unmodified on both machines and produces different results? You could try to set up a brand new lightweight web application with RadChart and complex gradients and test the output on the local PC and on the host.
Kind regards,
Ryan
the Telerik team
Rank 1
Pie charts worked fine on both, bar & line charts did not. For simple gradients, adding a custom palette instead of setting the colors in the code behind worked. It seems like the website published on godaddy is ignoring the SkinsOverrideStyles=False setting - if I put a chart out there with no skin, I seem to have full control over formatting series colors including complex gradients. I am figuring these out by trial and error however, that's a guess. There could be a thousand other variables involved that I don't know about of course, and I've only been using Telerik controls since October, blame is probably more behind the keyboard than anything but if there was a quick answer out there I was hoping to find it the easy way.
Thanks for checking into it
Dave
Unfortunately, we are not familiar with the specifics of these hosting services and since nobody has reported such problem to us we can not suggest how to proceed.
Anyway, we hope you've sorted this out and in case a specific problem arise, we will be glad to help.
All the best,
Ryan
the Telerik team