Alternating colors (red and yellow) for data points in range bar series

1 Answer 17 Views
ChartView
Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
Om Pushkara deep asked on 15 Jun 2021, 06:24 AM

Hi ,

I am trying to create a range bar series . In that data points should be alternating colors red and yellow only . I found one from chart grid : https://docs.telerik.com/devtools/winforms/controls/chartview/features/chart-grid but not for data points . Are there any properties to achieve this?

 

Code attached:


private void LoadBarChart()
        {

            this.radChartView1.AreaType = ChartAreaType.Cartesian;
            this.radChartView1.ChartElement.AngleTransform = 90;
            RangeBarSeries rangeBarSeries = new RangeBarSeries("End Time", "Start Time", "Summarization Date");
            rangeBarSeries.CombineMode = ChartSeriesCombineMode.None;

            this.radChartView1.ChartElement.View.Margin = new Padding(40, 40, 40, 100);

            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/17/2021"));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/17/2021"));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 4, DateTime.Now.TimeOfDay.TotalMinutes + 2, "5/17/2021"));


            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 30, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/18/2021"));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/18/2021"));

            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 4, DateTime.Now.TimeOfDay.TotalMinutes + 2, "5/19/2021"));

            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes - 89, DateTime.Now.TimeOfDay.TotalMinutes - 100, "5/20/2021"));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/20/2021"));

            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes - 79, DateTime.Now.TimeOfDay.TotalMinutes - 90, "5/21/2021"));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/21/2021"));

            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/22/2021"));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/22/2021"));


            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/23/2021"));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/23/2021"));

            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/25/2021"));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/24/2021"));

            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 14, DateTime.Now.TimeOfDay.TotalMinutes + 10, "5/26/2021"));
            rangeBarSeries.DataPoints.Add(new RangeDataPoint(DateTime.Now.TimeOfDay.TotalMinutes + 7, DateTime.Now.TimeOfDay.TotalMinutes + 5, "5/26/2021"));


            CategoricalAxis horizontalAxis = new CategoricalAxis();

           // horizontalAxis.Title = "Summarization Days";
            horizontalAxis.ClipLabels = false;
            horizontalAxis.LabelRotationAngle = -90;
            horizontalAxis.LabelFitMode = AxisLabelFitMode.Rotate;
            horizontalAxis.BackColor = Color.Red;
            horizontalAxis.PlotMode = AxisPlotMode.BetweenTicks;
            horizontalAxis.LabelFormatProvider = new MyFormatProviderX();
            rangeBarSeries.HorizontalAxis = horizontalAxis;

            ChartTooltipController tooltipController = new ChartTooltipController();
            tooltipController.DataPointTooltipTextNeeded += tooltipController_DataPointTooltipTextNeeded;
            this.radChartView1.Controllers.Add(tooltipController);

           // rangeBarSeries.ShowLabels = true;
            this.radChartView1.Series.Add(rangeBarSeries);
            radChartView1.ShowToolTip = true;
            rangeBarSeries.CombineMode = ChartSeriesCombineMode.None;

    

            rangeBarSeries.VerticalAxis.LabelFormatProvider = new MyFormatProvider();
            rangeBarSeries.VerticalAxis.Title = "Time of the day";
            rangeBarSeries.VerticalAxis.ClipLabels = false;
            rangeBarSeries.VerticalAxis.LabelRotationAngle = -90;
            rangeBarSeries.VerticalAxis.LabelFitMode = AxisLabelFitMode.Rotate;
           

            LinearAxis verticalAxis = radChartView1.Axes.Get<LinearAxis>(1);
            verticalAxis.Minimum = 0; //Minutes 0:00
            verticalAxis.Maximum = 1380; //Minutes 23:00
            verticalAxis.MajorStep = 60; //60 minutes in an hour
         

            CartesianArea area = this.radChartView1.GetArea<CartesianArea>();
            area.ShowGrid = true;

            CartesianGrid grid = area.GetGrid<CartesianGrid>();
            grid.DrawVerticalStripes = true;
            grid.DrawHorizontalStripes = false;
        }


        private void tooltipController_DataPointTooltipTextNeeded(object sender, DataPointTooltipTextNeededEventArgs e)
        {
            RangeDataPoint dp = e.DataPoint as RangeDataPoint;
            if (dp != null)
            {
                e.Text = dp.High + " " + dp.Low;
            }
        }

    }
}

public class MyFormatProvider : IFormatProvider, ICustomFormatter
{
    public object GetFormat(Type formatType)
    {
        return this;
    }
    public string Format(string format, object arg, IFormatProvider formatProvider)
    {
        int totalminutes = Convert.ToInt32(arg);

        TimeSpan timeSpan = TimeSpan.FromMinutes(totalminutes);

        return timeSpan.ToString(@"hh\:mm");
    }
}

1 Answer, 1 is accepted

Sort by
0
Nadya
Telerik team
answered on 16 Jun 2021, 12:29 PM

Hello,

If I understand you correctly you want to have two colors (red and yellow) for the RangeDataPoint in RangeBarSeries. I would like to note that RadChartView offers palettes that are a quick and easy way to define a skin for your chart view. You can choose a palette from a collection of predefined ones or create your own palette with desired colors. More information is available here: https://docs.telerik.com/devtools/winforms/controls/chartview/customization/palettes 

I used the provided code snippet in my sample project and apply a palette to the RangeBarSeries as follows:

rangeBarSeries.Palette = new PaletteEntry(Color.Red, Color.Yellow);

This is a sample demonstration. Feel free to adjust the colors according to your needs.

I hope this helps. Should you have any other questions please let me know.

Regards,
Nadya
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
ChartView
Asked by
Om Pushkara deep
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Nadya
Telerik team
Share this question
or