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

RadChart - Change Legend of Skin

5 Answers 37 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Adler
Top achievements
Rank 1
Adler asked on 10 Feb 2014, 05:35 PM
Hello,

I am using RadChart, and when i apply skin ( LightBlue ), i am try change legend color, and no change.
If i no use skin, its work. Else no work.

Anybody can help?

Partof HTML
                            <td colspan="2" align="center">
                                <telerik:RadChart ID="chtDesempenhoProcesso1" runat="server" Width="970px" Height="420px"  OnDataBound="chtDesempenhoProcesso1_DataBound" Skin="LightBlue" AutoTextWrap="true">
                                    <PlotArea>
                                        <EmptySeriesMessage Visible="True">
                                            <Appearance Visible="True">
                                            </Appearance>
                                        </EmptySeriesMessage>
                                        <Appearance>
                                            <Border Width="0" Visible="true" />
                                        </Appearance>
                                        <XAxis DataLabelsColumn="Area">
                                        </XAxis>
                                        <YAxis MinValue="0" MaxValue="100" AutoScale="false" Step="10" Appearance-MinorGridLines-Visible="false" Appearance-MajorGridLines-Visible="false">
                                        </YAxis>
                                    </PlotArea>
                                    <ChartTitle>
                                        <TextBlock Text="Dimensão">
                                        </TextBlock>
                                    </ChartTitle>

                                </telerik:RadChart>
                            </td>

aspx.cs

    protected void chtDesempenhoProcesso1_DataBound(object sender, EventArgs e)
    {
        chtDesempenhoProcesso1.PlotArea.XAxis[0].TextBlock.Appearance.TextProperties.Font = new System.Drawing.Font(new System.Drawing.Font("Arial", 10), System.Drawing.FontStyle.Bold);

        if (chtDesempenhoProcesso1.Chart.PlotArea.XAxis.Items.Count > 0)
        {
            for (int i = 0; i < chtDesempenhoProcesso1.Chart.PlotArea.XAxis.Items.Count; i++)
            {
                ChartSeriesItem item = chtDesempenhoProcesso1.Series[5].Items[i];
                item.Appearance.FillStyle.MainColor = System.Drawing.Color.DarkGray;
                item.Appearance.FillStyle.SecondColor = System.Drawing.Color.Gray;
                item.Appearance.Shadow.Distance = 155;
                item.Appearance.Border.Color = System.Drawing.Color.Gray;

              }
                // This code no change legend color
            chtDesempenhoProcesso1.Series[5].Appearance.FillStyle.MainColor = System.Drawing.Color.DarkGray;
        }

    }

thx..

5 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 13 Feb 2014, 12:01 PM
Hello Adler,

What I can suggest is that you combine the desired Skin with a particular SeriesPalette. You can also create your own SeriesPalette, in order to custom colorize the series and use the one of the predefined Skins to colorize the rest of the charts elements.

You can retrieve SeriesPalette from your Telerik UI controls' source code local installation path: RadControlsAjaxSource\Telerik.Web.UI\ChartingEngine\Styles\Skins\ChartSkinsCollection.resx file.

Regards,
Danail Vasilev
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Adler
Top achievements
Rank 1
answered on 13 Feb 2014, 05:51 PM
Hi Danail , very thx for try help.
There are other possibilities?

I am thinking in recreate new skin like "LightBlue" and change.

I am creating my Series as like this function

   protected void btnFindGraficProcess_Click(object sender, EventArgs e)
    {

        ObjectDataSource odsSource = (ObjectDataSource)RadPageView1.FindControl(gridDesempenhoProcesso.DataSourceID);
        DataView dvwSource = (DataView)odsSource.Select();
        DataTable dtbSource = null;
        dvwSource.RowFilter = "id_dimensao IN (" + ddtSegmentoProcesso.SelectedValue + ")";
        dvwSource.Sort = "Dimensao";
        dtbSource = dvwSource.ToTable().Copy();
        string id_dimensao = null;
        id_dimensao = dtbSource.Rows[0]["id_dimensao"].ToString();
        DataTable dtbSourceFinal = null;

        chtDesempenhoProcesso1.RemoveAllSeries();

            chtDesempenhoProcesso1.AddChartSeries(new Telerik.Charting.ChartSeries() { Name = "Student", DataYColumn = "Student", DefaultLabelValue = "#Y{N2}" });
            chtDesempenhoProcesso1.AddChartSeries(new Telerik.Charting.ChartSeries() { Name = "Teacher", DataYColumn = "Teacher", DefaultLabelValue = "#Y{N2}" });
            chtDesempenhoProcesso1.AddChartSeries(new Telerik.Charting.ChartSeries() { Name = "Director", DataYColumn = "Director", DefaultLabelValue = "#Y{N2}" });
            chtDesempenhoProcesso1.AddChartSeries(new Telerik.Charting.ChartSeries() { Name = "Employee", DataYColumn = "Employee", DefaultLabelValue = "#Y{N2}" });
            chtDesempenhoProcesso1.AddChartSeries(new Telerik.Charting.ChartSeries() { Name = "Parents", DataYColumn = "Parents", DefaultLabelValue = "#Y{N2}" });
            chtDesempenhoProcesso1.AddChartSeries(new Telerik.Charting.ChartSeries() { Name = "Total", DataYColumn = "Total", DefaultLabelValue = "#Y{N2}" });

        chtDesempenhoProcesso1.Series[0].Appearance.LabelAppearance.RotationAngle = -90;
        chtDesempenhoProcesso1.Series[1].Appearance.LabelAppearance.RotationAngle = -90;
        chtDesempenhoProcesso1.Series[2].Appearance.LabelAppearance.RotationAngle = -90;
        chtDesempenhoProcesso1.Series[3].Appearance.LabelAppearance.RotationAngle = -90;
        chtDesempenhoProcesso1.Series[4].Appearance.LabelAppearance.RotationAngle = -90;
        chtDesempenhoProcesso1.Series[5].Appearance.LabelAppearance.RotationAngle = -90;

        chtDesempenhoProcesso1.DataSource = dtbSourceFinal;
        chtDesempenhoProcesso1.DataBind();

    }
0
Danail Vasilev
Telerik team
answered on 18 Feb 2014, 04:15 PM
Hello Adler,

Creating a custom skin from an existing one is also a reliable solution. More information on the matter is available in RadChart - custom skin forum thread.

Regards,
Danail Vasilev
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Adler
Top achievements
Rank 1
answered on 08 Sep 2014, 06:41 PM
I am try create a custom skin, but skin not change.

Where i take skin of Telerik Chart, i need same exemple SkinID="Telerik", only
change Serie[0] to Red and Serie[1] to Yellow, the others series can be the same.

No exist anything more easy to only change color of Legend?


I put this and change color of my Serie, i wanna that Legend change to same color.

        ChartSeriesItem item = chtSistema.Series[0].Items[0];
        item.Appearance.FillStyle.MainColor = System.Drawing.Color.Red;
        item.Appearance.FillStyle.SecondColor = System.Drawing.Color.Red;
        item.Appearance.Shadow.Distance = 155;
        item.Appearance.Border.Color = System.Drawing.Color.Red;

thx
0
Danail Vasilev
Telerik team
answered on 11 Sep 2014, 07:24 AM
Hello Adler,

You can use the following code:
C#:
protected void RadChart1_BeforeLayout(object sender, EventArgs e)
{
    ChartSeriesItem item = chtSistema.Series[0].Items[0];
    item.Appearance.FillStyle.MainColor = System.Drawing.Color.Red;
    item.Appearance.FillStyle.SecondColor = System.Drawing.Color.Red;
    item.Appearance.Shadow.Distance = 155;
    item.Appearance.Border.Color = System.Drawing.Color.Red;
 
    chtSistema.Legend.Items[0].Appearance.FillStyle.MainColor = System.Drawing.Color.Red;
    chtSistema.Legend.Items[0].Appearance.FillStyle.SecondColor = System.Drawing.Color.Red;
    chtSistema.Legend.Items[0].Marker.Appearance.FillStyle.MainColor = System.Drawing.Color.Blue;
    chtSistema.Legend.Items[0].Marker.Appearance.FillStyle.SecondColor = System.Drawing.Color.Blue;
}

ASPX:
<telerik:RadChart ID="chtSistema" runat="server" Height="400px" Width="600px" OnBeforeLayout="RadChart1_BeforeLayout">
    <Series>
        <telerik:ChartSeries Type="Bar" Name="Series 1">
            <Items>
                <telerik:ChartSeriesItem YValue="30">
                </telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem YValue="10">
                </telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem YValue="20">
                </telerik:ChartSeriesItem>
            </Items>
        </telerik:ChartSeries>
        <telerik:ChartSeries Type="Bar" Name="Series 2">
            <Items>
                <telerik:ChartSeriesItem YValue="40">
                </telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem YValue="20">
                </telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem YValue="10">
                </telerik:ChartSeriesItem>
            </Items>
        </telerik:ChartSeries>
    </Series>
    <PlotArea>
        <XAxis AutoScale="false">
            <Items>
                <telerik:ChartAxisItem TextBlock-Text="item 1"></telerik:ChartAxisItem>
                <telerik:ChartAxisItem TextBlock-Text="item 2"></telerik:ChartAxisItem>
                <telerik:ChartAxisItem TextBlock-Text="item 3"></telerik:ChartAxisItem>
            </Items>
        </XAxis>
    </PlotArea>
</telerik:RadChart>



Regards,
Danail Vasilev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Chart (Obsolete)
Asked by
Adler
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Adler
Top achievements
Rank 1
Share this question
or