[Solved] Multilevel Doughnut chart

[Ajay]

Hi,

We have a requirement to create a multilevel doughnut chart at runtime depending on hierarchical data from different sharepoint lists.It will be a multiple wheel one above other the inner ones will be parent level data and the outer ones will be child of the parent level data so it will represent as inner donoughnut series - parent level/independant data, sorrounded outer doughnut series-child level/dependant data.

Please find attached png file for exact requirement(multilevelpie_grande.png) and link for what technique I adopted for achieving the same(Multilevel chart control).
I tried to to follow the same logic of 360 degree circle area and depending on number of available values to be plotted it will divide the the 360 area and assign the values to respective points of the series.As per my understanding, it will be a multiple series chart and series will be added in single chart area.

Code snippet:

Chart1.Series["Series1"].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Doughnut;

            Chart1.Series["Series1"].YValueType = System.Web.UI.DataVisualization.Charting.ChartValueType.Double;

            Chart1.Series["Series1"].ChartArea = "ChartArea1";

            Chart1.Series["Series1"].SetCustomProperty("DoughnutRadius", "99");

            Chart1.ChartAreas["ChartArea1"].BackColor = System.Drawing.Color.Transparent;

  

  

            System.Web.UI.DataVisualization.Charting.DataPoint pointc = new System.Web.UI.DataVisualization.Charting.DataPoint();

            pointc.AxisLabel = "CEO";

            pointc.YValues = new double[] { 360 };

            Chart1.Series["Series1"].Points.Add(pointc);

  

            Chart1.Series["Series2"].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Doughnut;

            Chart1.Series["Series2"].YValueType = System.Web.UI.DataVisualization.Charting.ChartValueType.Double;

            Chart1.Series["Series2"].ChartArea = "ChartArea1";

  

            Chart1.Series["Series2"].BackImageWrapMode = System.Web.UI.DataVisualization.Charting.ChartImageWrapMode.Scaled;

            System.Web.UI.DataVisualization.Charting.DataPoint point1 = new System.Web.UI.DataVisualization.Charting.DataPoint();

            point1.AxisLabel = "CFO";

            point1.YValues = new double[] { 120 };

            System.Web.UI.DataVisualization.Charting.DataPoint point2 = new System.Web.UI.DataVisualization.Charting.DataPoint();

            point2.AxisLabel = "CIO";

            point2.YValues = new double[] { 120 };

            System.Web.UI.DataVisualization.Charting.DataPoint point3 = new System.Web.UI.DataVisualization.Charting.DataPoint();

            point3.AxisLabel = "CTO";

            point3.YValues = new double[] { 120 };

  

            Chart1.Series["Series2"].Points.Add(point1);

            Chart1.Series["Series2"].Points.Add(point2);

            Chart1.Series["Series2"].Points.Add(point3);

  

            Chart1.Series["Series3"].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Doughnut;

            Chart1.Series["Series3"].YValueType = System.Web.UI.DataVisualization.Charting.ChartValueType.Double;

            Chart1.Series["Series3"].ChartArea = "ChartArea1";

            Chart1.Series["Series3"].BackImageWrapMode = System.Web.UI.DataVisualization.Charting.ChartImageWrapMode.Scaled;

            System.Web.UI.DataVisualization.Charting.DataPointCollection pointsc3 = Chart1.Series["Series3"].Points;

            System.Web.UI.DataVisualization.Charting.DataPoint pointc31 = new System.Web.UI.DataVisualization.Charting.DataPoint();

            pointc31.AxisLabel = "Receivables";

            pointc31.YValues = new double[] { 60 };

            System.Web.UI.DataVisualization.Charting.DataPoint pointc32 = new System.Web.UI.DataVisualization.Charting.DataPoint();

            pointc32.AxisLabel = "Payables";

            pointc32.YValues = new double[] { 60 };

            Chart1.Series["Series3"].Points.Add(pointc31);

            Chart1.Series["Series3"].Points.Add(pointc32);

  

              

  

            System.Web.UI.DataVisualization.Charting.DataPoint pointc33 = new System.Web.UI.DataVisualization.Charting.DataPoint();

            pointc33.AxisLabel = "PR";

            pointc33.YValues = new double[] { 60 };

            System.Web.UI.DataVisualization.Charting.DataPoint pointc34 = new System.Web.UI.DataVisualization.Charting.DataPoint();

            pointc34.AxisLabel = "HR";

            pointc34.YValues = new double[] { 60 };

            Chart1.Series["Series3"].Points.Add(pointc33);

            Chart1.Series["Series3"].Points.Add(pointc34);

  

            System.Web.UI.DataVisualization.Charting.DataPoint pointc35 = new System.Web.UI.DataVisualization.Charting.DataPoint();

            pointc35.AxisLabel = "Architect";

            pointc35.YValues = new double[] { 40 };

            System.Web.UI.DataVisualization.Charting.DataPoint pointc36 = new System.Web.UI.DataVisualization.Charting.DataPoint();

            pointc36.AxisLabel = "QA";

            pointc36.YValues = new double[] { 40 };

            System.Web.UI.DataVisualization.Charting.DataPoint pointc37 = new System.Web.UI.DataVisualization.Charting.DataPoint();

            pointc37.AxisLabel = "Project Manager";

            pointc37.YValues = new double[] { 40 };

  

            Chart1.Series["Series3"].Points.Add(pointc35);

            Chart1.Series["Series3"].Points.Add(pointc36);

            Chart1.Series["Series3"].Points.Add(pointc37);

ASPX code:

asp:Chart ID="Chart1"
                runat="server"
                BorderlineDashStyle="DashDotDot"
                BorderlineColor="Crimson"
                Palette="EarthTones" EnableViewState="True">
                <Series>
                    <asp:Series ChartArea="ChartArea1" ChartType="Doughnut" Name="Series1">
                    </asp:Series>
                    <asp:Series ChartArea="ChartArea1" ChartType="Doughnut" Name="Series2">
                    </asp:Series>

                </Series>

But my observation is multiple series is not getting plotted in a specific chart area although series are getting added in a chart area but during final output, only that series is visible which is the first one of <Series> collection(Index 0) resulting in single series plotting.

Please let me know any issues in the above approach and if it needs any modification to achieve our requirement.Also if this approach is not workable at all, please let me know any possible workaround to achieve this.Thanks in advance.

[Petar Kirov]

Hi Ajay,

Your approach is correct, however the Silverlight RadChart will have the same problem as the ASP Chart - it supports visualizing only a single  Doughnut Series at a time because all chart series share the same plot area and if you have multiple Doughnut Series only the last one would be visible.
To achieve this, I would recommend using our newer charting solution for Silverlight - the RadPieChart (part of RadChartView) because its Doughnut Series support customizable radius range (via the RadiusFactor and InnerRadiusFactor properties) - that way allowing the user to add several series without overlapping. I have created a project to demonstrate the approach of visualizing hierarchical data with it. Please note that the control does not support this scenario out-of-the-box and there may be problems (e.g. label alignment) so be sure to test it carefully.

I hope this was helpful.
 
Regards,
Petar Kirov
the Telerik team