How to color area or high-low series by thresholds

Need help in implementing some specific function to your LightningChart Ultimate powered application? Post a question and get code snippets from other LightningChart Ultimate community members.

Moderator: Arction_LasseP

Was this example helpful?

No
0
No votes
Quite helpful
0
No votes
Very helpful
1
100%
 
Total votes: 1

User avatar
ArctionPasi
Posts: 1366
Joined: Tue Mar 26, 2013 10:57 pm
Location: Finland

How to color area or high-low series by thresholds

Post by ArctionPasi » Tue Aug 16, 2016 3:59 pm

Area and High-Low series have palette coloring built-in:
Area series - gradient palette coloring
Area series - gradient palette coloring
areaPaletteGradient.jpg (47.33 KiB) Viewed 7426 times
and
Area series - uniform palette coloring
Area series - uniform palette coloring
areaPaletteUniform.jpg (45.74 KiB) Viewed 7426 times
OK. But how to apply coloring that it's applied in X dimension, by certain color thresholds?

That can be achieved e.g. by spawning several area or high-low series. Spawn a new series if Y values falls out from the threshold range.

WPF chart (non-bindable)

Code: Select all

<Window x:Class="WpfApplicationAreaColoringByY.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid Name="gridChart">
    </Grid>
</Window>

Code: Select all

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

using Arction.Wpf.Charting;
using Arction.Wpf.Charting.SeriesXY;
using Arction.Wpf.Charting.Views;
using Arction.Wpf.Charting.Views.ViewXY;
using Arction.Wpf.Charting.Axes;

namespace WpfApplicationAreaColoringByY
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {

        LightningChartUltimate _chart;
        HighLowSeriesPoint[] _dataPoints;

        public MainWindow()
        {
            InitializeComponent();

            _dataPoints = CreateDataPoints();


            _chart = new LightningChartUltimate();
            _chart.BeginUpdate();

            int dataPointCount = _dataPoints.Length;
            Color color;
            Color prevColor = Colors.White;

            for (int i = 0; i < dataPointCount; i++)
            {

                HighLowSeriesPoint[] pointsToAdd = new HighLowSeriesPoint[] { _dataPoints[i] };

                color = YToColor(_dataPoints[i].YHigh);
                if (i == 0)
                {
                    CreateSeries(color);
                }
                else if (color != prevColor)
                {
                    CreateSeries(color);
                    pointsToAdd = new HighLowSeriesPoint[] { _dataPoints[i - 1], _dataPoints[i] }; //Must duplicate point from previous series 
                }
                prevColor = color;

                _chart.ViewXY.HighLowSeries.Last().AddValues(pointsToAdd);
            }

            _chart.ViewXY.XAxes[0].ValueType = AxisValueType.Number; 
            _chart.ViewXY.LegendBox.Visible = false; 
            _chart.ViewXY.ZoomToFit();

            
            //Add constant lines to indicate threshold levels 
            ConstantLine c1 = new ConstantLine(_chart.ViewXY, _chart.ViewXY.XAxes[0], _chart.ViewXY.YAxes[0]);
            c1.Value = 50;
            c1.LineStyle.Color = Colors.Lime;
            c1.LineStyle.Width = 3; 
            _chart.ViewXY.ConstantLines.Add(c1);

            ConstantLine c2 = new ConstantLine(_chart.ViewXY, _chart.ViewXY.XAxes[0], _chart.ViewXY.YAxes[0]);
            c2.Value = 80;
            c2.LineStyle.Color = Colors.Yellow;
            c2.LineStyle.Width = 3; 
            _chart.ViewXY.ConstantLines.Add(c2);

            ConstantLine c3 = new ConstantLine(_chart.ViewXY, _chart.ViewXY.XAxes[0], _chart.ViewXY.YAxes[0]);
            c3.Value = 130;
            c3.LineStyle.Color = Colors.Red;
            c3.LineStyle.Width = 3; 
            _chart.ViewXY.ConstantLines.Add(c3); 
            
            _chart.EndUpdate();

            gridChart.Children.Add(_chart);
        }



        void CreateSeries(Color color)
        {
            HighLowSeries area = new HighLowSeries(_chart.ViewXY, _chart.ViewXY.XAxes[0], _chart.ViewXY.YAxes[0]);
            area.LineVisible = false;
            area.PointsVisible = false;
            area.Fill.Color = color;
            area.MouseInteraction = false;
            area.Fill.GradientFill = GradientFill.Solid;
            area.ShowInLegendBox = false;
            _chart.ViewXY.HighLowSeries.Add(area);

        }

        Color YToColor(double y)
        {
            if (y <= 50)
                return Colors.Blue;
            if (y <= 80)
                return Colors.Lime;
            if (y <= 130)
                return Colors.Yellow;
            return Colors.Red;

        }


        HighLowSeriesPoint[] CreateDataPoints()
        {
            int pointCount = 5000;
            HighLowSeriesPoint[] points = new HighLowSeriesPoint[pointCount];
            

            for (int i = 0; i < pointCount; i++)
            {
                points[i].X = i;
                points[i].YLow = 0; 
                points[i].YHigh = 80 + Math.Sin((double)i / 500.0) * 70.0 + Math.Sin((double)i/40.0) * 10.0;

            }

            return points;
        }



    }
}


And you get this kind of chart:
Threshold coloring area chart
Threshold coloring area chart
threshold coloring area.jpg (141.26 KiB) Viewed 7426 times
LightningChart Support Team, PT