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

Programatically assign colors to bars in barchart

7 Answers 132 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
dan
Top achievements
Rank 1
dan asked on 15 Mar 2018, 02:30 PM

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

 

 

7 Answers, 1 is accepted

Sort by
0
dan
Top achievements
Rank 1
answered on 15 Mar 2018, 04:00 PM

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?

 

 

0
Vessy
Telerik team
answered on 20 Mar 2018, 02:50 PM
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.
0
bdrennen
Top achievements
Rank 1
answered on 04 Jun 2019, 04:14 PM

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.

0
Accepted
Vessy
Telerik team
answered on 05 Jun 2019, 01:09 PM
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.
0
dan
Top achievements
Rank 1
answered on 05 Jun 2019, 01:26 PM

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

0
bdrennen
Top achievements
Rank 1
answered on 05 Jun 2019, 04:55 PM

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!

0
Vessy
Telerik team
answered on 10 Jun 2019, 11:23 AM
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.
Tags
Chart (HTML5)
Asked by
dan
Top achievements
Rank 1
Answers by
dan
Top achievements
Rank 1
Vessy
Telerik team
bdrennen
Top achievements
Rank 1
Share this question
or