Pie zooming

[jval]

Hello,

I would like to zoom Pie chart. In our application we use selection area for zooming (look at the screenshot):

pie zoom.png (8.69 KiB) Viewed 13543 times

Could you suggest how to do this in Lightning Chart? Or at least how can I zoom part of Pie?
Thank you.

[ArctionPasi]

It's a 3D pie in LightningChart, and ViewPie3D.Camera.Target sets the center of the viewpoint. If using a perspective camera, ViewDistance sets the zooming level. Alternatively you can call ViewPie3D.SetPieSize method.

Rectangle zooming is not available in View3D or ViewPie3D.

[jval]

Thank you, we'll play with ViewDistance

[jval]

It's a 3D pie in LightningChart, and ViewPie3D.Camera.Target sets the center of the viewpoint. If using a perspective camera, ViewDistance sets the zooming level. Alternatively you can call ViewPie3D.SetPieSize method.

Rectangle zooming is not available in View3D or ViewPie3D.

I tried to zoom Pie (by some ways like SetPieSize, increase chart size, change ViewDistance, etc.) and after some values (about 8000 pixels in diameter of Pie - in my pc) Lightning Chart renders very slow and hangs. How to determine what is this values for any pc? Is it a bug? My pc has intel i7 cpu with internal graphic and 16 gb RAM.

[ArctionPasi]

Hi,

The vertex count with such a high-level zoomed 3D model will lead into out-of-memory or lock-up, with such a high resolution.

I'll provide you an example based on ViewXY and PolygonSeries, of how to make a zoomable pie chart with that. Please wait a couple of days.

Best regards,
Pasi

[ArctionPasi]

OK, here's example how to make a zoomable pie chart with ViewXY.

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.LightningChartUltimate;
using Arction.WPF.LightningChartUltimate.Axes;
using Arction.WPF.LightningChartUltimate.Views.ViewXY;
using Arction.WPF.LightningChartUltimate.SeriesXY; 

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private LightningChartUltimate m_chart;
        private double[] m_dataValues; 

        public MainWindow()
        {
            InitializeComponent();
            CreateChart();
        }

        /// <summary>
        /// Create chart.
        /// </summary>
        private void CreateChart()
        {
            //Create new chart 
            m_chart = new LightningChartUltimate();

            

            //Disable rendering, strongly recommended before updating chart properties
            m_chart.BeginUpdate();

            m_chart.Title.Text = "Sales revenue / k USD";
          
            ViewXY v = m_chart.ViewXY;

            //Setup x-axis
            AxisX xAxis = v.XAxes[0];
            xAxis.SetRange(-10, 10);
            xAxis.Visible = false;


            //Setup y-axis
            AxisY yAxis = v.YAxes[0];
            yAxis.SetRange(-10, 10);
            yAxis.Visible = false;

            //Set 1:1 aspect ratio 
            v.ZoomPanOptions.AspectRatioOptions.AspectRatio = ViewAspectRatio.Manual;
            v.ZoomPanOptions.AspectRatioOptions.ManualAspectRatioWH = 1;
            v.GraphBackground.Style = RectFillStyle.None;
            v.GraphBorderColor = Colors.Transparent;
            v.LegendBox.Visible = false;

            double[] values = new double[] { 70, 50, 110, 45, 90, 87, 23 };
            string[] titles = new string[] { "April", "May", "June", "July", "August", "September", "October" };
            SetData(values, titles);
            RefreshPolygons();

            m_chart.EndUpdate();
            
            gridMain.Children.Add(m_chart); 

        }


        public void SetData(double[] values, string[] titles)
        {
            m_dataValues = values;


            ViewXY v = m_chart.ViewXY;
            AxisX xAxis = v.XAxes[0];
            AxisY yAxis = v.YAxes[0];

            v.PolygonSeries.Clear();

            int iSliceIndex = 0;
            foreach (double value in values)
            {
                PolygonSeries polygonSeries = new PolygonSeries(v, xAxis, yAxis);
                polygonSeries.Title.Text = titles[iSliceIndex] + " / " + value.ToString("0");
                polygonSeries.Border.Width = 1;
                polygonSeries.Fill.Color = DefaultColors.SeriesForBlackBackgroundWPF[iSliceIndex % DefaultColors.SeriesForBlackBackgroundWPF.Length];
                polygonSeries.Fill.GradientFill = GradientFill.Solid;
                polygonSeries.Title.Color = Colors.White;
                polygonSeries.Title.Visible = true;
                polygonSeries.Behind = false;
                polygonSeries.BorderVisible = true;
                polygonSeries.MouseInteraction = false;

                iSliceIndex++;
                v.PolygonSeries.Add(polygonSeries);
            }
        }


        void RefreshPolygons()
        {
            //Recalculate the polygon data points, to form a pie around the center point 
            double pieCenterX = 0, pieCenterY = 0;
            double radius = 10;

            double sumOfAllValues = 0;
            foreach (double value in m_dataValues)
            {
                sumOfAllValues += Math.Abs(value);
            }

            double startAngle = 0;
            int countOfPointsInSector = 30;

            int seriesIndex = 0;

            foreach (double value in m_dataValues)
            {
                double sectorRadians = Math.Abs(value) / sumOfAllValues * Math.PI * 2.0;
                double arcStep = sectorRadians / (double)(countOfPointsInSector - 1);
                PointDouble2D[] polygonPoints = new PointDouble2D[countOfPointsInSector + 1]; //+1 for center point

                for (int i = 0; i < countOfPointsInSector; i++)
                {
                    polygonPoints[i].X = pieCenterX + radius * Math.Cos(startAngle + ((double)i) * arcStep);
                    polygonPoints[i].Y = pieCenterY + radius * Math.Sin(startAngle + ((double)i) * arcStep);
                }
                polygonPoints[countOfPointsInSector].X = pieCenterX;
                polygonPoints[countOfPointsInSector].Y = pieCenterY;

                startAngle += sectorRadians;

                m_chart.ViewXY.PolygonSeries[seriesIndex].Points = polygonPoints;
                seriesIndex++;
            }
        }
    }
}

Pie chart

piechart.jpg (68.13 KiB) Viewed 13453 times

When zooming it with LMB rectangle or wheel:

Zoomed pie chart

piechart_zoomed.jpg (58.3 KiB) Viewed 13453 times

With this approach, it's possible to make fan charts, with sectors and slices of different magnitudes and angle spans as well.

[jval]

Thanks for the good example!