Different Bar Colors using SQLDataSource

[Skip]

Hi, I have an HtmlChart tied to a SQLDataSource.  It's pretty simple, but I would like each of the bars colored differently.  The first bar RED, middle, YELLOW, then GREEN.  I'm even bringing the color from the query.

Can someone assist me with this.

<telerik:RadHtmlChart runat="server"  ID="RadHtmlChart2"
                      DataSourceID="SqlDataSourceActionColor" OnDataBound="RadHtmlChart2_DataBound">
    <PlotArea>
        <Series>
            <telerik:ColumnSeries DataFieldY="Value" Name="IncidentByMonth">
            </telerik:ColumnSeries>
        </Series>
        <XAxis DataLabelsField="COLOR">
            <LabelsAppearance RotationAngle="300">
            </LabelsAppearance>
        </XAxis>
        <YAxis>
            <TitleAppearance Text="">
            </TitleAppearance>
        </YAxis>
    </PlotArea>
    <Legend>
        <Appearance Visible="false">
        </Appearance>
    </Legend>
    <ChartTitle Text="Near Miss by Risk Category">
    </ChartTitle>
</telerik:RadHtmlChart>
<asp:SqlDataSource ID="SqlDataSourceActionColor" runat="server" ConnectionString="<%$ ConnectionStrings:OSHAConnectionString %>" SelectCommand="
                   select a.COLOR,
                   a.Action,
                   b.Value
                   from (
                   select 'RED' as COLOR, 'ACTION NECESSARY' as Action UNION ALL
                   select 'YELLOW' as COLOR, 'ACTION APPROPRIATE IF PRATICAL AND ECONOMIC' AS ACTION UNION ALL
                   select 'GREEN' as COLOR, 'NO ACTION REQUIRED' AS ACTION
                   ) a
                   LEFT OUTER JOIN (
                   select count(ID) as Value,
                   ActionColor,
                   Action
                   from [aaa_v_ReportingData]
                   where YEAR = @Year
                   and Location = @Location
                   group by ActionColor,
                   Action
                   ) B ON B.ACTIONCOLOR = A.COLOR">
    <SelectParameters>
        <asp:ControlParameter ControlID="RadComboBox2" Name="Year" PropertyName="SelectedValue" />
        <asp:ControlParameter ControlID="RadComboBox1" Name="Location" PropertyName="SelectedValue" />
    </SelectParameters>
</asp:SqlDataSource>

[Danail Vasilev]

Hi,

You should use the ColorField property of the series. Such an example is illustrated in the HtmlChart - Conditional Item Colorization online demo.

Regards,
Danail Vasilev
Telerik

 

 

[Skip]

I've honestly reviewed that 10 times, but cant' figure out how to make it work.  I've literally spent days on this one and struggled a lot.  I'm just not getting the "Aha" moment.  I don't get it.

Could someone please hold my hand on this one and give a trimmed down example I can understand?  The query returns a column named COLOR.  It will return 3 rows of data everytime.  I want the first row to be red, second yellow, third green same as the color name.  Basicly the condition would be if column [color] = 'red' then make the bar red., etc.

I'm begging, I really want to understand this.  I have tried and don't want to give up, or settle for the stock skin color.  Thanks much.

[Danail Vasilev]

Hi,

You can find below a short example that illustrates a data-bound chart with the ColorField property defined. The full runnable example is also attached.

ASPX:

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
    <PlotArea>
        <Series>
            <telerik:ColumnSeries DataFieldY="myValues" ColorField="myColor" Name="IncidentByMonth">
            </telerik:ColumnSeries>
        </Series>
        <XAxis DataLabelsField="myCategories">
            <LabelsAppearance RotationAngle="300">
            </LabelsAppearance>
        </XAxis>
        <YAxis>
            <TitleAppearance Text="">
            </TitleAppearance>
        </YAxis>
    </PlotArea>
    <Legend>
        <Appearance Visible="false">
        </Appearance>
    </Legend>
    <ChartTitle Text="Near Miss by Risk Category">
    </ChartTitle>
</telerik:RadHtmlChart>

C#:

protected void Page_Load(object sender, EventArgs e)
{
    RadHtmlChart1.DataSource = GetData();
    RadHtmlChart1.DataBind();
}

protected DataTable GetData()
{
    DataTable dt = new DataTable();

    dt.Columns.Add("myValues", typeof(int));
    dt.Columns.Add("myCategories", typeof(string));
    dt.Columns.Add("myColor", typeof(string));

    dt.Rows.Add(1, "item 1", "red");
    dt.Rows.Add(2, "item 2", "blue");
    dt.Rows.Add(3, "item 3", "green");

    return dt;
}

It may also be possible, however, that your data source is not returning the proper data. If the small example above do not help can you please provide us with your chart's declaration as well as the data source returned by the SQL query? You can use the other example attached that showcases how to export this data.

In order to send us  the necessary files you can open a support ticket.

Regards,
Danail Vasilev
Telerik

 

 

[Skip]

Thank you Danail.  As you had suggested in your original post, ColorField="MyColor" is all it needed.