Can you have multiple chart bands for the same axis?

0 Answers 35 Views
Chart (HTML5)
Matt Smith
Top achievements
Rank 1
Matt Smith asked on 08 Oct 2022, 10:38 PM

I have a use case of displaying athlete weights over time. There is also a constraint of a weight range that is being targeted to which is defined over time as well.

With that, I am trying to display multiple plot bands showing the target weight range (y axis) for a given period (x axis).. I am able to plot the weights however the plot bands do not show up.

For example, one target range is between March 3, 2019 and February 10, 2022 and  the second range is February 11, 2022 onwards.

Rumen
Telerik team
commented on 18 Oct 2022, 02:25 PM

Hi Matt,

An example of defining PlotBands is available in the online demos:
http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/plot-bands/defaultcs.aspx 

In addition, multiple plot bands can be defined programmatically in the following manner:

chart1.PlotArea.YAxis.PlotBands.Add(new PlotBand(1,3, Color.Red, 125));
chart1.PlotArea.YAxis.PlotBands.Add(new PlotBand(3, 4, Color.Orange, 125));
chart1.PlotArea.YAxis.PlotBands.Add(new PlotBand(4, 7, Color.Green, 125));
 
chart1.PlotArea.XAxis.PlotBands.Add(new PlotBand(0, 1, Color.Red, 125));
chart1.PlotArea.XAxis.PlotBands.Add(new PlotBand(1, 3, Color.Orange, 125));
chart1.PlotArea.XAxis.PlotBands.Add(new PlotBand(3, 5, Color.Green, 125));

Matt Smith
Top achievements
Rank 1
commented on 18 Oct 2022, 03:51 PM | edited

Rumen,

I saw that example, however, I was asking if you can have two different plot bands for the SAME axis. The sample shows one band for the X and another for the Y.

Rumen
Telerik team
commented on 20 Oct 2022, 12:24 PM

Here is how to define multiple plot bands for the same Axis:

        chart1.PlotArea.XAxis.PlotBands.Add(new PlotBand(0, 1, Color.Red, 125));
        chart1.PlotArea.XAxis.PlotBands.Add(new PlotBand(1, 3, Color.Orange, 125));
        chart1.PlotArea.XAxis.PlotBands.Add(new PlotBand(3, 4, Color.Green, 125));
        chart1.PlotArea.XAxis.PlotBands.Add(new PlotBand(4, 5, Color.Blue, 125));

 

Here is how they render on my side:

 

I have attached my test pages too.

Matt Smith
Top achievements
Rank 1
commented on 20 Oct 2022, 12:49 PM

Rumen,

Thanks for the reply. Below is the effect I am trying to achieve

And this is the code:

Telerik.Web.UI.PlotBand plotband1 = new Telerik.Web.UI.PlotBand();
plotband1.FromDate = new DateTime(2019, 3, 3);
plotband1.ToDate = new DateTime(2022, 2, 10);
plotband1.From = 69;
plotband1.To = 71;
plotband1.Color = System.Drawing.Color.FromArgb(0x8dd7af);
WeightTrend.PlotArea.YAxis.PlotBands.Add(plotband1);
Telerik.Web.UI.PlotBand plotband2 = new Telerik.Web.UI.PlotBand();
plotband2.FromDate = new DateTime(2022, 3, 18);
plotband2.ToDate = DateTime.Now;
plotband2.From = 69;
plotband2.To = 73;
plotband2.Color = System.Drawing.Color.FromArgb(0x8dd7af);
WeightTrend.PlotArea.YAxis.PlotBands.Add(plotband2);

I can see that the bands are going full width or height. Based on what I am seeing (or more like not seeing), that a rectangular plot band is probably not achievable.

Cheers,

 

Matt.

 

Rumen
Telerik team
commented on 21 Oct 2022, 12:05 PM

Hi Matt,

The only option is to draw a custom plot band (or whatever shape you want) on the chart render. There is a similar example Render Custom Plot Bands in the Chart for a custom line, but you can draw a Rectangle with the Kendo Drawing API.

You can see how to access the Kendo Chart widget from RadHtmlChart here.

Matt Smith
Top achievements
Rank 1
commented on 21 Oct 2022, 12:08 PM

Rumen,

Thanks for the info. I will take a look at both.

Cheers,

Matt.

No answers yet. Maybe you can help?

Tags
Chart (HTML5)
Asked by
Matt Smith
Top achievements
Rank 1
Share this question
or