Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Aleksandr Mazo
1615
Box Chart with Additional Indicator
posted

Hi, 

I am trying to set up a  Box Chart that will show distribution of data during different time periods and will also show additional indicator / point which shows where a particular data points falls within the distribution. See attached screenshot. What I would like is to be able to put something like a red dot in the middle box in every box plot

Parents
No Data
Reply
  • 10685
    Suggested Answer
    Offline posted

    Hello Aleksandr, 

    It is possible to achieve this result using a CompositeChart with two layers. One for the BoxChart and another for a ScatterChart. Please notice the ScatterChart requires XYSeries, so it could require you to additionally handle the logic for specifying correct values from the DataSource. Such values that fall within the distribution. The following sample illustrates the use of BoxChart, LineChart and ScatterChart in separate layers under CompositeChart. 

    public partial class _Default : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            DataTable chartData = new DataTable();

            chartData.Columns.Add("Name", typeof(string));

            chartData.Columns.Add("Min", typeof(double));

            chartData.Columns.Add("Max", typeof(double));

            chartData.Columns.Add("Q1", typeof(double));

            chartData.Columns.Add("Q2", typeof(double));

            chartData.Columns.Add("Q3", typeof(double));

     

            chartData.Rows.Add(new object[] { "item1", 5, 20, 7, 10, 12 });

            chartData.Rows.Add(new object[] { "item2", 4, 25, 6, 16, 20 });

            chartData.Rows.Add(new object[] { "item3", 2, 10, 3, 5, 7 });

            chartData.Rows.Add(new object[] { "item4", 7, 30, 12, 20, 25 });

            chartData.Rows.Add(new object[] { "item5", 5, 25, 8, 12, 21 });

     

            BoxSetSeries boxSeries = new BoxSetSeries();

            boxSeries.Data.DataSource = chartData;

            boxSeries.Data.LabelColumn = "Name";

            boxSeries.Data.MinColumn = "Min";

            boxSeries.Data.MaxColumn = "Max";

            boxSeries.Data.Q1Column = "Q1";

            boxSeries.Data.Q2Column = "Q2";

            boxSeries.Data.Q3Column = "Q3";

            boxSeries.DataBind();

     

            NumericSeries lineSeries = new NumericSeries();

            lineSeries.Data.DataSource = chartData;

            lineSeries.Data.LabelColumn = "Name";

            lineSeries.Data.ValueColumn = "Q2";

            lineSeries.DataBind();

     

            XYSeries xySeries = new XYSeries();

            // Add data points

            xySeries.Points.Add(new XYDataPoint(0, 3, "Point 1", false));

            xySeries.Points.Add(new XYDataPoint(6, 15, "Point 2", false));

            xySeries.Points.Add(new XYDataPoint(12, 28, "Point 3", false));

            xySeries.Points.Add(new XYDataPoint(18, 29, "Point 4", false));

            xySeries.Points.Add(new XYDataPoint(24, 10, "Point 5", false));

            xySeries.Points.Add(new XYDataPoint(32, 16, "Point 6", false));

            xySeries.DataBind();

     

            ultraChart1.ChartType = ChartType.Composite;

     

            ultraChart1.CompositeChart.Series.Add(boxSeries);

            ultraChart1.CompositeChart.Series.Add(lineSeries);

            ultraChart1.CompositeChart.Series.Add(xySeries);

     

            ChartArea area = new ChartArea();

            ultraChart1.CompositeChart.ChartAreas.Add(area);

     

            AxisItem xAxisBox = new AxisItem(ultraChart1, AxisNumber.X_Axis);

            xAxisBox.DataType = AxisDataType.String;

            xAxisBox.SetLabelAxisType = SetLabelAxisType.ContinuousData;

     

            AxisItem xAxisLine = new AxisItem(ultraChart1, AxisNumber.X_Axis);

            xAxisLine.DataType = AxisDataType.String;

            xAxisLine.SetLabelAxisType = SetLabelAxisType.ContinuousData;

            xAxisLine.Margin.Near.MarginType = LocationType.RowColumn;

            xAxisLine.Margin.Near.Value = .4;

            xAxisLine.Margin.Far.MarginType = LocationType.RowColumn;

            xAxisLine.Margin.Far.Value = .4;

     

            AxisItem xAxisCustomPoint = new AxisItem(ultraChart1, AxisNumber.X_Axis);

            xAxisCustomPoint.DataType = AxisDataType.Numeric;

     

            AxisItem yAxis = new AxisItem(ultraChart1, AxisNumber.Y_Axis);

            yAxis.DataType = AxisDataType.Numeric;

     

            area.Axes.Add(xAxisBox);

            area.Axes.Add(xAxisLine);

            area.Axes.Add(xAxisCustomPoint);

            area.Axes.Add(yAxis);

     

            ChartLayerAppearance boxLayer = new ChartLayerAppearance();

            boxLayer.ChartArea = area;

            boxLayer.AxisX = xAxisBox;

            boxLayer.AxisY = yAxis;

            boxLayer.ChartType = ChartType.BoxChart;

     

            ChartLayerAppearance lineLayer = new ChartLayerAppearance();

            lineLayer.ChartArea = area;

            lineLayer.AxisX = xAxisLine;

            lineLayer.AxisY = yAxis;

            lineLayer.ChartType = ChartType.LineChart;

     

            ChartLayerAppearance customPointLayer = new ChartLayerAppearance();

            customPointLayer.ChartArea = area;

            customPointLayer.AxisX = xAxisCustomPoint;

            customPointLayer.AxisY = yAxis;

            customPointLayer.ChartType = ChartType.ScatterChart;       

        }

    }  

    Please let me know how this approach is working for you.

Children