Line chart with series colored by skin colors but in different shades/tints/tones

[Chris]

Hello

See attached mockups.

I am trying to produce a line chart with 6 lines on it - 3 lines that represent regional, domestic and international sales in year 2015 and 3 more lines that represent the same reg/dom/int sales data but in 2016 (basically a year over year chart where the x-axis shows the month names and each set of 3 line series represents the international, domestic and regional sales data in that particular year).

The customer has requested that when showing the 3 line series for the 2015 sales data that the lines are within the same color but different shades so it is easy to see all 3 are within 2015. For example if all 2015 lines were blue-like, then I need to dynamically change the line series 1 = LightBlue, line series 2 = Blue and line series 3 = NavyBlue (light, regular, dark colored basically). The same idea for the 2016 lines, they should all be red-like for example Burgundy, Red, Pink.

The challenge I have is that we are utilizing Telerik skins so the customer could have any telerik skin applied to the website (Silk Skin, Glow, MetroTouch, whatever). I want to be able to pick color that make sense with the Skin selected and shade them vs. hard coding it to shades of blue or red since this will not look right depending on the Skin applied.

 

My design thinking was as follows:

-Derive the Skin being used from the RadSkinManager

-Somehow determine the color palette used by that skin - not sure how to do this?

-Pick 2 colors in that color palette that are "far apart" (2 colors that look the least like each other), shade them and set the LineSeries.Appearance.FillStyle.BackgroundColor on each set of 3 line series.

 

I've found all the code I need to make that design work but I cannot derive how to get the base color palette of a given skin.

 

[Vessy]

Hi Christopher,

RadHtmlChart has a predefined set of 10 different colors for each of our skins, which are set as default line colors for the different series of the Chart. A possible approach I can suggest you is to:

• Handle the moment the Skin is changed (you can do it in the SkinManager's  OnSkinChanged event)
• Get the color set to the first two series in you chat
• Use the collected collors in order to change the colors of the other four series.

I hope this information will be helpful for you in achieving the target scenario.

Regards,
Vessy
Telerik

[Chris]

In regards to your comment:

"Get the color set to the first two series in you chat"

Can you provide an example of how to extract the color palette from the skin? Is this something you would do when rendering the chart or something you can do in OnSkinChanged event?

I think as a general question, charts aside, how do you programmatically capture the color palette used for a given skin?

Chris

[Vessy]

Hi Chris,

I tested the suggested scenario and it seems that the most appropriate event for taking the colors of the chart series is its client-side Load event.

For example:

<telerik:RadSkinManager ID="SkinManager1" runat="server" ShowChooser="true"></telerik:RadSkinManager>
<telerik:RadHtmlChart runat="server" ID="HtmlChart1" Width="800" Height="500" Transitions="true">
    <ClientEvents OnLoad="chartLoad"/>
    <PlotArea>
        <Series>
            <telerik:ColumnSeries Name="2011">
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="55" />
                    <telerik:CategorySeriesItem Y="63" />
                </SeriesItems>
            </telerik:ColumnSeries>

            <telerik:ColumnSeries Name="2012">
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="75" />
                    <telerik:CategorySeriesItem Y="83" />
                </SeriesItems>
            </telerik:ColumnSeries>
            <telerik:ColumnSeries Name="2013">
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="55" />
                    <telerik:CategorySeriesItem Y="62" />
                </SeriesItems>
            </telerik:ColumnSeries>
            <telerik:ColumnSeries Name="2014">
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="35" />
                    <telerik:CategorySeriesItem Y="42" />
                </SeriesItems>

            </telerik:ColumnSeries>
        </Series>
        <XAxis MajorTickType="Outside" MinorTickType="Outside">
            <Items>
                <telerik:AxisItem LabelText="Monday" />
                <telerik:AxisItem LabelText="Tuesday" />
            </Items>
            <MajorGridLines Color="#EFEFEF" Width="1" />
            <MinorGridLines Color="#F7F7F7" Width="1" />
            <TitleAppearance Position="Center" RotationAngle="0" Text="Days" />
        </XAxis>
        <YAxis MajorTickSize="1" MajorTickType="Outside" MaxValue="100" MinorTickSize="1"
            MinorTickType="Outside" MinValue="0">
            <LabelsAppearance DataFormatString="{0}%" RotationAngle="0" />
            <MajorGridLines Color="#EFEFEF" Width="1" />
            <MinorGridLines Color="#F7F7F7" Width="1" />
            <TitleAppearance Position="Center" RotationAngle="0" Text="CPU Load" />
        </YAxis>
    </PlotArea>
    <ChartTitle Text="Server CPU Load By Days">
    </ChartTitle>
    <Legend>
        <Appearance Position="Bottom" />
    </Legend>
</telerik:RadHtmlChart>
<script>
    function chartLoad(chart, args) {
        var skin = chart.get_kendoWidget().options.skin;
        var skinColors = chart.get_kendoWidget().options.seriesColors;
        alert("Skin: " + skin + ", colors: " + skinColors);
    }
</script>

I hope this helps.

Regards,
Vessy
Telerik