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
How to change the Box Whiskers color from black to say blue?
Thanks
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.