Creating a Pie Series on a bubble pointer at runtime

[Planoresearch]

Hi Steema Support,
Currently I am working on a project in which I have to display a Bubble series. This project is being made in Silverlight and I am using TeeChart .NET 2010. I am facing a problem while doing following task:
I have a bubble series as in following figure:

7.jpg (17.4 KiB) Viewed 8853 times

Each pointer in this bubble series has a name. I have also a List which contains all the name of bubble pointers. Once I click on a particular item, a pie chart with certain values should be drawn at runtime at the same location of that particular selected pointer. In other word, at a certain event I have to add a small (just double radius size of bubble pointer) pie series above a particular pointer of bubble series.
I am trying to complete this task by taking help of Tee-Chart manual. Please suggest the simplest possible way…

Thanks & Regards
Ashish Pandey

[Sandra]

Hello Planoresearch,

Ok. I have made a simple project using ClickSeries Event and Pie_BeforeDrawValues events to create the Pie Chart and defines its positions. I think next code help you to achieve as you want:

Code: Select all

       public MainPage()
        {
            InitializeComponent();
            InitializeChart();
        }

        private void InitializeChart()
        {
            Steema.TeeChart.Silverlight.Styles.Bubble bubble1 = new Steema.TeeChart.Silverlight.Styles.Bubble(tChart1.Chart);
            bubble1.FillSampleValues();

            for (int i = 0; i < bubble1.Count; i++)
            {
                bubble1.RadiusValues[i] = 30;
            }
            tChart1.ClickSeries += new Steema.TeeChart.Silverlight.TChart.SeriesEventHandler(tChart1_ClickSeries);
        }

        int IndexValue;
        double XRadius1, YRadius1;
        void tChart1_ClickSeries(object sender, Steema.TeeChart.Silverlight.Styles.Series s, int valueIndex, MouseEventArgs e)
        {

            Steema.TeeChart.Silverlight.Styles.Bubble b = s as Steema.TeeChart.Silverlight.Styles.Bubble;
            Steema.TeeChart.Silverlight.Styles.Pie pie;
            if (tChart1.Series.Count > 1)
            {
                tChart1.Series.Remove(tChart1.Series[1]);
                pie = new Steema.TeeChart.Silverlight.Styles.Pie(tChart1.Chart);
                pie.FillSampleValues();
                pie.Chart.Aspect.View3D = false;
                pie.Marks.Visible = false;
                IndexValue = valueIndex;
                pie.Circled = true;
                pie.CustomXRadius = b.RadiusValues[valueIndex];
                pie.CustomYRadius = b.RadiusValues[valueIndex];
                XRadius1 = b.RadiusValues[valueIndex];
                YRadius1 = b.RadiusValues[valueIndex];

            }
            else
            {
                pie = new Steema.TeeChart.Silverlight.Styles.Pie(tChart1.Chart);
                pie.FillSampleValues();
                pie.Chart.Aspect.View3D = false;
                pie.Marks.Visible = false;
                IndexValue = valueIndex;
                pie.Circled = true;
                XRadius1 = b.RadiusValues[valueIndex];
                YRadius1 = b.RadiusValues[valueIndex];
                pie.CustomXRadius = b.RadiusValues[valueIndex];
                pie.CustomYRadius = b.RadiusValues[valueIndex];

            }
            pie.BeforeDrawValues += new Steema.TeeChart.Silverlight.PaintChartEventHandler(pie_BeforeDrawValues);

        }
            void pie_BeforeDrawValues(object sender, Steema.TeeChart.Silverlight.Drawing.Graphics3D g)
            {

                tChart1.Chart.ChartRect = new Rect(tChart1.Series[0].CalcXPos(IndexValue) - 5, tChart1.Series[0].CalcYPos(IndexValue) - 5, XRadius1 - 5, YRadius1 -5);
            }

Can you tell us if previous code works as you expect? On the other hand, this solutions isn't a only solutions to acheive it, you have two options more:

• 1.- Create an image of Pie chart and add result image in pointer of bubble.
  2.- Using SubtChart Tool.

I hope will helps.

Thanks,

[Planoresearch]

Hi Sandra,

Thanks for your quick response. The code is doing fine on click event. But our task is quite different.
We have to do this task without any event. We just have to add a pie series on a particular bubble as we mentioned in our previous post.

As you suggested-

you have two options more:
1.- Create an image of Pie chart and add result image in pointer of bubble.
2.- Using SubtChart Tool.

Could you please give us some sample code of any link which will be useful for completing this task either by image or SubtChart tool.
Thanks in advance.

Thanks and Regards
Planoresearch

[Planoresearch]

Hi Sandra,

we have almost completed above tasks by using SubtChart tool. but here we are only getting one problem that pie chart which we have created on SubtChart has a fixed location. while we need dynamic location as this pie chart must come on particular bubble.

Could you please guide us for same.

Thanks and Regards
Planoresearch

[Sandra]

Hello Planoresearch,

Ok. Sorry for the delay and sorry for the confusion of your requeriments. I am glad that you can find a solution, but I have made a new example of code where is using a ListBox and when you select one of this items pie chart appears in the bubble. Please, see next:

Code: Select all

 public MainPage()
        {
            InitializeComponent();
            InitializeChart();
        }

        private void InitializeChart()
        {

            Steema.TeeChart.Silverlight.Styles.Bubble bubble1 = new Steema.TeeChart.Silverlight.Styles.Bubble(tChart1.Chart);

            bubble1.FillSampleValues();
            listBox1.SelectionMode = SelectionMode.Single;
            for (int i = 0; i < bubble1.Count; i++)
            {
                bubble1.RadiusValues[i] = 30;
                listBox1.Items.Add("Bubble:" + bubble1[i].X.ToString());
            }

            listBox1.SelectionChanged += new SelectionChangedEventHandler(listBox1_SelectionChanged);
        }

        int IndexValue;
        double XRadius1, YRadius1;
        void listBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {

            Steema.TeeChart.Silverlight.Styles.Bubble b = tChart1[0] as Steema.TeeChart.Silverlight.Styles.Bubble;
            Steema.TeeChart.Silverlight.Styles.Pie pie;
            if (tChart1.Series.Count > 1)
            {
                tChart1.Series.Remove(tChart1.Series[1]);
                pie = new Steema.TeeChart.Silverlight.Styles.Pie(tChart1.Chart);
                pie.FillSampleValues();
                pie.Chart.Aspect.View3D = false;
                pie.Marks.Visible = false;
                IndexValue = listBox1.SelectedIndex;
                pie.Circled = true;
                pie.CustomXRadius = b.RadiusValues[listBox1.SelectedIndex];
                pie.CustomYRadius = b.RadiusValues[listBox1.SelectedIndex];
                XRadius1 = b.RadiusValues[listBox1.SelectedIndex];
                YRadius1 = b.RadiusValues[listBox1.SelectedIndex];

            }
            else
            {
                pie = new Steema.TeeChart.Silverlight.Styles.Pie(tChart1.Chart);
                pie.FillSampleValues();
                pie.Chart.Aspect.View3D = false;
                pie.Marks.Visible = false;
                IndexValue = listBox1.SelectedIndex;
                pie.Circled = true;
                XRadius1 = b.RadiusValues[listBox1.SelectedIndex];
                YRadius1 = b.RadiusValues[listBox1.SelectedIndex];
                pie.CustomXRadius = b.RadiusValues[listBox1.SelectedIndex];
                pie.CustomYRadius = b.RadiusValues[listBox1.SelectedIndex];
            }

            pie.BeforeDrawValues += new Steema.TeeChart.Silverlight.PaintChartEventHandler(pie_BeforeDrawValues);

        }
        void pie_BeforeDrawValues(object sender, Steema.TeeChart.Silverlight.Drawing.Graphics3D g)
        {

            tChart1.Chart.ChartRect = new Rect(tChart1.Series[0].CalcXPos(IndexValue) - 5, tChart1.Series[0].CalcYPos(IndexValue) - 5, XRadius1 - 5, YRadius1 - 5);
        }

On the other hand, if you want use SubChart Tool you can do the same code, but changing tChart1 to SubChartTool adding the positions, as do in next example :

Code: Select all

     public MainPage()
        {
            InitializeComponent();
            InitializeChart();
        }
        Steema.TeeChart.Silverlight.Tools.SubChartTool subChartTool;
        private void InitializeChart()
        {

            Steema.TeeChart.Silverlight.Styles.Bubble bubble1 = new Steema.TeeChart.Silverlight.Styles.Bubble(tChart1.Chart);

            bubble1.FillSampleValues();
            listBox1.SelectionMode = SelectionMode.Single;
            subChartTool = new Steema.TeeChart.Silverlight.Tools.SubChartTool (tChart1.Chart);
            for (int i = 0; i < bubble1.Count; i++)
            {
                bubble1.RadiusValues[i] = 30;
                listBox1.Items.Add("Bubble:" + bubble1[i].X.ToString());
            }

            listBox1.SelectionChanged += new SelectionChangedEventHandler(listBox1_SelectionChanged);
        }

        int IndexValue;
        double XRadius1, YRadius1;
        void listBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {

            Steema.TeeChart.Silverlight.Styles.Bubble b = tChart1[0] as Steema.TeeChart.Silverlight.Styles.Bubble;
            Steema.TeeChart.Silverlight.Styles.Pie pie;
            if (tChart1.Series.Count > 1)
            {
                tChart1.Series.Remove(tChart1.Series[1]);
                pie = new Steema.TeeChart.Silverlight.Styles.Pie(subChartTool.Chart);
                pie.FillSampleValues();
                pie.Chart.Aspect.View3D = false;
                pie.Marks.Visible = false;
                IndexValue = listBox1.SelectedIndex;
                pie.Circled = true;
                pie.CustomXRadius = b.RadiusValues[listBox1.SelectedIndex];
                pie.CustomYRadius = b.RadiusValues[listBox1.SelectedIndex];
                XRadius1 = b.RadiusValues[listBox1.SelectedIndex];
                YRadius1 = b.RadiusValues[listBox1.SelectedIndex];

            }
            else
            {
                pie = new Steema.TeeChart.Silverlight.Styles.Pie(subChartTool.Chart);
                pie.FillSampleValues();
                pie.Chart.Aspect.View3D = false;
                pie.Marks.Visible = false;
                IndexValue = listBox1.SelectedIndex;
                pie.Circled = true;
                XRadius1 = b.RadiusValues[listBox1.SelectedIndex];
                YRadius1 = b.RadiusValues[listBox1.SelectedIndex];
                pie.CustomXRadius = b.RadiusValues[listBox1.SelectedIndex];
                pie.CustomYRadius = b.RadiusValues[listBox1.SelectedIndex];
            }
            tChart1.Invalidate();
            pie.BeforeDrawValues += new Steema.TeeChart.Silverlight.PaintChartEventHandler(pie_BeforeDrawValues);

        }
        void pie_BeforeDrawValues(object sender, Steema.TeeChart.Silverlight.Drawing.Graphics3D g)
        {

             subChartTool.Chart.ChartRect = new Rect(tChart1.Series[0].CalcXPos(IndexValue) - 5, tChart1.Series[0].CalcYPos(IndexValue) - 5, XRadius1 - 5, YRadius1 - 5);
        }

Can you please, can you tell us if previous codes works as you expect?

I hope will helps.

Thanks,

[Planoresearch]

Hi Sandra,

Extremely thanks for the reply and the code you provided. This example is working fine.

Really we are appreciating your support.

Thanks & Regards
Planoresearch

[Sandra]

Hello Planoresearch,

I am glad that the solution works fine for you .

Thanks,