Programatically assign colors to bars in barchart

8 posts, 1 answers
  1. dan
    dan avatar
    11 posts
    Member since:
    Jul 2017

    Posted 15 Mar 2018 Link to this post

    I have a radhtmlchart using BarSeries with one data series.  The data is sourced from a linq query, not generated directly in codebehind like the demo for colorizing bars shows.  What I would like to do is colorize the bars depending on a second value in the results of the query.

    The top of the chart code is straightforward.  I'm leaving out non-relevant code but let me know if there's something else you need to see.

                <telerik:RadHtmlChart ID="BarChart1" runat="server">
                    <PlotArea>
                        <Series>
                            <telerik:BarSeries DataFieldY="DailyGrossQty" Name="Daily Gross Qty" Visible="true" Stacked="false" gap=".4" spacing="0.4">
                                <Appearance>
                                    <FillStyle BackgroundColor="#145e8e"></FillStyle>
                                </Appearance>
                            </telerik:BarSeries>

     

    The linq query is also straightforward:

                var x = from Z in db.spDailyData(ReportDate)
                        select Z;

               BarChart1.DataSource = x.OrderByDescending(o => o.DailyGrossQty).Take(25);

    There is another field in the stored procedure called 'Division' and I would like to conditionally color the bars based on the value there, overriding the default.

    What would be the simplest approach to that?

    Thanks.

    -Dan

     

     

  2. dan
    dan avatar
    11 posts
    Member since:
    Jul 2017

    Posted 15 Mar 2018 in reply to dan Link to this post

    Perhaps related is this issue.  I tried to access the individual members of the series in codebehind to modify the colors in a loop that way.  I can't seem to be able to do this, however.  After binding a datasource that definitely has a series with multiple values in it, I try to reference the first member like this:

                BarChart1.DataBind();
                var c = BarChart1.PlotArea.Series[0].Items[0].BackgroundColor = System.Drawing.Color.Red;

    But I get this error: Index was out of range. Must be non-negative and less than the size of the collection.  The series at this point has a count of 0, but if I continue debugging, it renders fine.  Is there something wrong about how I'm trying to access the members of the data series?

     

     

  3. Vessy
    Admin
    Vessy avatar
    2068 posts

    Posted 20 Mar 2018 Link to this post

    Hi Dan,

    I have just answered your support ticket on this matter. Lets continue our discussion there in order to avoid duplicity of our posts. You can feel free to update this thread with the results once the case is resolve.

    Regards,
    Vessy
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. bdrennen
    bdrennen avatar
    36 posts
    Member since:
    Dec 2009

    Posted 04 Jun Link to this post

    I don't supposed someone could post the solution to this question? I'm in the exact same place--trying to set the color of a series in the codebehind--and I got exactly this far with the same index out of range error.

  5. Answer
    Vessy
    Admin
    Vessy avatar
    2068 posts

    Posted 05 Jun Link to this post

    Hi,

    Please, find the answer of my communication with Dan as of below:

    The SereisItems (as well the Series) collection is created only when the data of the chart is set declaratively in the markup, thus this collection is empty when the data of the chart is bound to it. You can find detailed information regarding the specific on the programmatic creation of the chart here:
    https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/data-binding/setting-explicit-items

    The best best approach (and the recommended by us) is to pass the colors to all items initially through the ColorField of the chart and then change the color of the desired series, rebinding the chart with the new data. This approach is implemented in the following live demo, so you can see the suggested approach in action:
    https://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/custombarcolor/defaultcs.aspx

    The other possible option in case you do not want to bind a color field to the chart is to change the series item color on the client-side, recreating the chart widget after that:
            <telerik:RadHtmlChart runat="server" ID="BarChart1" Width="1000" Height="500" Transitions="true" >
                    <ClientEvents OnLoad="onLoad" />
                        <Appearance Align="Center" Position="Top">
                        </Appearance>
                    </ChartTitle>
                    <Legend>
                        <Appearance Position="Top" Visible="true">
                        </Appearance>
                    </Legend>
                    <PlotArea>
                        <Series>
                            <telerik:BarSeries DataFieldY="ValuesField"></telerik:BarSeries>
                        </Series>
                        <XAxis DataLabelsField="LabelsField">
                        </XAxis>
                    </PlotArea>
                </telerik:RadHtmlChart>
    <script>
        function onLoad(sender, args) {
            var chart = sender.get_kendoWidget();
            var options = chart.options;
            options.series[0].color = function(point) {
                if (point.value > 1) {
                    return "#ff0000";
                }
                return "#00ff00";
            }
            chart.setOptions(options);
        }
    </script>


    Regards,
    Vessy
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. dan
    dan avatar
    11 posts
    Member since:
    Jul 2017

    Posted 05 Jun in reply to Vessy Link to this post

    This is almost exactly what solved my issue.  I needed to refer to the specific dataItem in the script like this:

    if (point.dataItem.Division== "ABC") {
                            return "#B352C6"; //31af3b
                        }

    But otherwise it works perfectly.  Good luck.

    Also, thanks Vessy for the original answer.  I will mark it properly.

    -Dan

  7. bdrennen
    bdrennen avatar
    36 posts
    Member since:
    Dec 2009

    Posted 05 Jun in reply to Vessy Link to this post

    Aha! ColorField was what I needed. It works very well for my project.

    I did run into one hitch that I eventually figured out. For my LineSeries charts, I was defining my markers like this:

    <Series>
        <telerik:LineSeries DataFieldY="Year_1" MissingValues="Gap" ColorField="COLOR_FIELD">
            <MarkersAppearance MarkersType="Circle" BackgroundColor="#5dade2" BorderColor="#5dade2" />
            <TooltipsAppearance Visible="false"></TooltipsAppearance>
            <Appearance>
                <FillStyle BackgroundColor="#5dade2"></FillStyle>
            </Appearance>
        </telerik:LineSeries>
    </Series>

     

    And the color applied by ColorField wasn't working. I ended up removing the entire MarkersAppearance declaration and things worked as expected.

    I'd originally put the MarkersAppearance in to give the points on my LineSeries charts filled circles. Do you know if it's possible to have filled circles and use ColorField at the same time?

    Thank you!

  8. Vessy
    Admin
    Vessy avatar
    2068 posts

    Posted 10 Jun Link to this post

    Hi Bryan,

    In a LineSeries chart scenario, the colorField values are used for each item's marker color. If the series has explicitly configured MarkersAppearance.Background color it is used with a higher priority and the passed color field is ignored.

    Regards,
    Vessy
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top