Different Bar Colors using SQLDataSource

5 posts, 1 answers
  1. Skip
    Skip avatar
    14 posts
    Member since:
    Mar 2013

    Posted 24 Feb 2015 Link to this post

    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>
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 25 Feb 2015 Link to this post

    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
     

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Skip
    Skip avatar
    14 posts
    Member since:
    Mar 2013

    Posted 26 Feb 2015 in reply to Danail Vasilev Link to this post

    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.
  5. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 27 Feb 2015 Link to this post

    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
     

    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.

     
  6. Skip
    Skip avatar
    14 posts
    Member since:
    Mar 2013

    Posted 27 Feb 2015 in reply to Danail Vasilev Link to this post

    Thank you Danail.  As you had suggested in your original post, ColorField="MyColor" is all it needed.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017