WPF Box and Whisker Plot

[mjackson]

I'm considering using Lightning Chart in a statistical application. I'll need a Box and Whisker plot.
I'm sure I'll have to create this plot, as I had to do in Infragistics plotting components.
What would be the easiest way to proceed in developing this new plot?

Micahel

[ArctionPasi]

Hi Michael,
I'll write you an example. Just a moment please.

[ArctionPasi]

This is code is for WinForms but I think you get the idea...

Code: Select all

        /// <summary>
        /// Create chart.
        /// </summary>
        private void CreateChart()
        {
            //Create new chart 
            m_chart = new LightningChartUltimate(LicenseKeys.LicenseKeyStrings.LightningChartUltimate);
            
            //Disable rendering, strongly recommended before updating chart properties
            m_chart.BeginUpdate(); 

            //Chart parent must be set
            m_chart.Parent = this;

            //Fill parent area with chart
            m_chart.Dock = DockStyle.Fill;

            //Chart name
            m_chart.Name = "Box and whiskers plot";

            //Chart title text
            m_chart.Title.Text = "Body weight by groups"; 

            //Hide legend box
            m_chart.ViewXY.LegendBox.Visible = false;
            
            //Add boxes with whiskers 
            AddBoxAndWhiskers(45, 60, 69, 84, 95, 1, 0.5, "Group A", Color.Yellow);
            AddBoxAndWhiskers(54, 59, 62, 69, 79, 2, 0.5, "Group B", Color.Magenta);
            AddBoxAndWhiskers(56, 68, 76, 82, 97, 3, 0.5, "Group C", Color.Orange);
            AddBoxAndWhiskers(49, 65, 72, 76, 93, 4, 0.5, "Group D", Color.SteelBlue); 

            //Setup x-axis
            AxisX axisX = m_chart.ViewXY.XAxes[0];
            axisX.SetRange(0, 5);
            axisX.ScrollMode = XAxisScrollMode.None;
            axisX.ValueType = AxisValueType.Number;
            axisX.Title.Text = "Groups";

            //Add custom axis ticks. Show categories. 
            axisX.CustomTicks.Add(new CustomAxisTick(axisX, 1, "A")); 
            axisX.CustomTicks.Add(new CustomAxisTick(axisX, 2, "B")); 
            axisX.CustomTicks.Add(new CustomAxisTick(axisX, 3, "C")); 
            axisX.CustomTicks.Add(new CustomAxisTick(axisX, 4, "D")); 
            axisX.CustomTicksEnabled = true;
            axisX.AutoFormatLabels = false; 

            //Setup y-axis
            AxisY axisY = m_chart.ViewXY.YAxes[0];
            axisY.SetRange(40, 100);
            axisY.Title.Text = "Weight (kg)"; 

            //Allow chart rendering
            m_chart.EndUpdate();
        }

        /// <summary>
        /// Add box with whiskers. Box shows the range from upper quartile to lower quartile. 
        /// Whiskers show the range from minimum to lower quartile and upper quartile to maximum. 
        /// Horizontal line inside the box shows the median.
        /// </summary>
        /// <param name="minimum">Minimum</param>
        /// <param name="lowerQuartile">Lower quartile</param>
        /// <param name="median">Median</param>
        /// <param name="upperQuartile">Upper quartile</param>
        /// <param name="maximum">Maximum</param>
        /// <param name="categoryX">X value the box is centered to</param>
        /// <param name="widthX">Width as X axis range</param>
        /// <param name="caption">Box caption</param>
        /// <param name="fillColor">Fill color</param>
        void AddBoxAndWhiskers(double minimum, 
            double lowerQuartile, 
            double median, 
            double upperQuartile, 
            double maximum,
            double categoryX, 
            double widthX, 
            string caption, 
            Color fillColor)
        {

            //Add polygon for box 
            PolygonSeries polygon = new PolygonSeries(m_chart.ViewXY, m_chart.ViewXY.XAxes[0], m_chart.ViewXY.YAxes[0]);
            polygon.Fill.Color = fillColor;
            polygon.Fill.GradientColor = ChartTools.CalcGradient(fillColor, Color.Black, 20); 
            polygon.Fill.GradientFill = GradientFill.Cylindrical;
            polygon.Fill.GradientDirection = 0;
            polygon.Behind = true;
            polygon.Border.Color = Color.White;
            polygon.Border.Width = 1;
            polygon.MouseInteraction = false;
            polygon.Title.Visible = true;
            polygon.Title.Text = caption;
            polygon.Title.Color = ChartTools.CalcGradient(fillColor, Color.White, 70); 

            PointDouble2D[] polygonPath = new PointDouble2D[4];
            polygonPath[0].X = categoryX - widthX / 2.0;
            polygonPath[0].Y = lowerQuartile;
            polygonPath[1].X = categoryX + widthX / 2.0;
            polygonPath[1].Y = lowerQuartile;
            polygonPath[2].X = categoryX + widthX / 2.0;
            polygonPath[2].Y = upperQuartile;
            polygonPath[3].X = categoryX - widthX / 2.0;
            polygonPath[3].Y = upperQuartile;
            polygon.Points = polygonPath;

            m_chart.ViewXY.PolygonSeries.Add(polygon); 
            
            //Add line collection for median and whiskers
            LineCollection lineCollectionMedian = new LineCollection(m_chart.ViewXY, m_chart.ViewXY.XAxes[0], m_chart.ViewXY.YAxes[0]);
            lineCollectionMedian.LineStyle.Color = Color.White;
            lineCollectionMedian.MouseInteraction = false; 
            lineCollectionMedian.LineStyle.Width = 1;
            lineCollectionMedian.LineStyle.AntiAliasing = LineAntialias.None;

            lineCollectionMedian.Lines = new SegmentLine[] 
            {
                new SegmentLine(categoryX - widthX / 2.0, median, categoryX + widthX / 2.0, median), //median line 
                new SegmentLine(categoryX, maximum, categoryX, upperQuartile), //upper whisker 
                new SegmentLine(categoryX - widthX / 8.0, maximum, categoryX + widthX / 8.0, maximum), //upper whisker end 
                new SegmentLine(categoryX, minimum, categoryX, lowerQuartile), //lower whisker
                new SegmentLine(categoryX - widthX / 8.0, minimum, categoryX + widthX / 8.0, minimum) //lower whisker end 
            }; 
            m_chart.ViewXY.LineCollections.Add(lineCollectionMedian); 

        }

Then it produces a plot like this:

Box / whisker plot

BoxWhiskerPlot.jpg (110.39 KiB) Viewed 14178 times

[mjackson]

Awesome.
Thanks a bunch.
Michael