Hello Dimitar, sorry again for writing this in same post but it looks like you know better what I mean in my posts )

I have a question regarding composite chart. I have column chart an line chart combined just as you told me. But the question is can I provide separate datasource for each chart. Why I need this is because in my Line chart I want to draw for example 20 points, and for column chart 9 columns.

The code that I am trying to use is as following but it results in blank screen:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using Infragistics.UltraChart.Core.Layers;
using Infragistics.UltraChart.Core.Primitives;
using Infragistics.UltraChart.Resources.Appearance;
using Infragistics.UltraChart.Shared.Styles;

namespace UltraChartLineChart.Charts
{
public partial class CombinedChart : Form
{
public CombinedChart()
{
InitializeComponent();
}

private void CombinedChart_Load(object sender, EventArgs e)
{
this.ultraChart1.ChartType = ChartType.Composite;

ChartArea histogramArea = new ChartArea();
ChartArea lineArea = new ChartArea();
this.ultraChart1.CompositeChart.ChartAreas.Add(histogramArea);
this.ultraChart1.CompositeChart.ChartAreas.Add(lineArea);

AxisItem axisYhistogram = new AxisItem();
axisYhistogram.Extent = 20;
axisYhistogram.DataType = AxisDataType.Numeric;
axisYhistogram.Labels.ItemFormatString = "<DATA_VALUE:##.##>";
axisYhistogram.OrientationType = AxisNumber.Y_Axis;
axisYhistogram.LineColor = Color.Silver;
histogramArea.Axes.Add(axisYhistogram);

AxisItem axisXhistogram = new AxisItem();
axisXhistogram.Extent = 20;
axisXhistogram.DataType = AxisDataType.String;
axisXhistogram.Labels.Orientation = TextOrientation.VerticalLeftFacing;
axisXhistogram.Labels.ItemFormatString = "<ITEM_LABEL>";
axisXhistogram.OrientationType = AxisNumber.X_Axis;
axisXhistogram.SetLabelAxisType = SetLabelAxisType.GroupBySeries;
axisXhistogram.LineColor = Color.Silver;
histogramArea.Axes.Add(axisXhistogram);

AxisItem axisYnormalDistribution = new AxisItem();
axisYnormalDistribution.Extent = 20;
axisYnormalDistribution.DataType = AxisDataType.Numeric;
axisYnormalDistribution.Labels.ItemFormatString = "<DATA_VALUE:##.##>";
axisYnormalDistribution.OrientationType = AxisNumber.Y_Axis;
axisYnormalDistribution.Visible = false;
axisYnormalDistribution.LineColor = Color.Silver;
lineArea.Axes.Add(axisYnormalDistribution);

AxisItem axisXnormalDistribution = new AxisItem();
axisXnormalDistribution.Extent = 20;
axisXnormalDistribution.DataType = AxisDataType.String;
axisXnormalDistribution.Labels.Orientation = TextOrientation.VerticalLeftFacing;
axisXnormalDistribution.Labels.ItemFormatString = "<ITEM_LABEL>";
axisXnormalDistribution.Labels.Visible = false;
axisXnormalDistribution.OrientationType = AxisNumber.X_Axis;
axisXnormalDistribution.SetLabelAxisType = SetLabelAxisType.ContinuousData;
axisXnormalDistribution.LineColor = Color.Silver;
lineArea.Axes.Add(axisXnormalDistribution);

ChartLayerAppearance myColumnLayer = new ChartLayerAppearance();
myColumnLayer.ChartType = ChartType.ColumnChart;
myColumnLayer.SwapRowsAndColumns = true;
myColumnLayer.ChartArea = histogramArea;

ChartLayerAppearance myLineLayer = new ChartLayerAppearance();
myLineLayer.ChartType = ChartType.LineChart;
myLineLayer.ChartArea = lineArea;

NumericSeries histogramSeries = new NumericSeries();
histogramSeries.DataBind(GetHistogramData(), "Monthly Achieve");
histogramSeries.PEs.Add(new PaintElement(Color.DimGray));
myColumnLayer.Series.Add(histogramSeries);
ultraChart1.CompositeChart.Series.Add(histogramSeries);

NumericSeries normalDestributionSeries = new NumericSeries();
normalDestributionSeries.DataBind(GetNormalDestributionData(), "Cumm Plane", "Month");
normalDestributionSeries.PEs.Add(new PaintElement(Color.Red));
myLineLayer.Series.Add(normalDestributionSeries);
ultraChart1.CompositeChart.Series.Add(normalDestributionSeries);

for (int i = 1; i < GetHistogramData().Rows.Count; i++)
{
Override colorOverride = new Override();
colorOverride.Column = -2;
colorOverride.Row = i;
colorOverride.PE = new PaintElement(Color.LightSlateGray);
this.ultraChart1.Override.Add(colorOverride);
}

ColumnChartAppearance appearance = new ColumnChartAppearance();
appearance.SeriesSpacing = 0;
myColumnLayer.ChartTypeAppearance = appearance;

myColumnLayer.AxisX = axisXhistogram;
myColumnLayer.AxisY = axisYhistogram;
this.ultraChart1.CompositeChart.ChartLayers.Add(myColumnLayer);

myLineLayer.AxisX = axisXnormalDistribution;
myLineLayer.AxisY = axisYnormalDistribution;
this.ultraChart1.CompositeChart.ChartLayers.Add(myLineLayer);
}

private DataTable GetHistogramData()
{
DataTable lineDt = new DataTable();
lineDt.Columns.Add("Month");
lineDt.Columns.Add("Value", typeof(decimal));

lineDt.Rows.Add("Apr-10", 1.039381);
lineDt.Rows.Add("May-10", 1.531703);
lineDt.Rows.Add("Jun-10", 2.166947);
lineDt.Rows.Add("Jul-10", 2.943036);
lineDt.Rows.Add("Aug-10", 3.837218);
lineDt.Rows.Add("Sep-10", 4.802984);
lineDt.Rows.Add("Oct-10", 5.771378);
lineDt.Rows.Add("Nov-10", 6.657660);
lineDt.Rows.Add("Dec-10", 7.372884);

return lineDt;
}

private DataTable GetNormalDestributionData()
{
DataTable lineDt = new DataTable();
lineDt.Columns.Add("Month");
lineDt.Columns.Add("Cumm Plane", typeof(decimal));

lineDt.Rows.Add("Apr-10", 1.039381);
lineDt.Rows.Add("May-10", 1.531703);
lineDt.Rows.Add("Jun-10", 2.166947);
lineDt.Rows.Add("Jul-10", 2.943036);
lineDt.Rows.Add("Aug-10", 3.837218);
lineDt.Rows.Add("Sep-10", 4.802984);
lineDt.Rows.Add("Oct-10", 5.771378);
lineDt.Rows.Add("Nov-10", 6.657660);
lineDt.Rows.Add("Dec-10", 7.372884);
lineDt.Rows.Add("Jan-11", 7.838389);
lineDt.Rows.Add("Feb-11", 8.000000);
lineDt.Rows.Add("Mar-11", 7.838389);
lineDt.Rows.Add("Apr-11", 7.372884);
lineDt.Rows.Add("May-11", 6.657660);
lineDt.Rows.Add("Jun-11", 5.771378);
lineDt.Rows.Add("Jul-11", 4.802984);
lineDt.Rows.Add("Aug-11", 3.837218);
lineDt.Rows.Add("Sep-11", 2.943036);
lineDt.Rows.Add("Nov-11", 2.166947);
lineDt.Rows.Add("Dec-11", 1.531703);

return lineDt;
}

private void ultraChart1_FillSceneGraph(object sender, Infragistics.UltraChart.Shared.Events.FillSceneGraphEventArgs e)
{
foreach (Primitive p in e.SceneGraph)
{
Box bar = p as Box;
if (bar != null)
{
bar.PE.Stroke = Color.LightGray;
}
}
}
}
}

Thanks in advance.

Thanks a lot! And sorry for writing everything in one topic.

Hello Oleksandr,

I believe I have uploaded an old sample for the bar labels position chart by mistake. I am reloading the correct one.

Hi Oleksandr,

Thank you for the reply.

Generally we prefer each new issue to be reported in a separate thread. This way if other people are having similar issues or questions they will be able to search and find the thread, which answers the questions a lot easier. So in future please create separate threads for different issues, we will be glad to assist you in them :)

As for you questions:

1) In these case the separate columns are considered a different series (each row in the DataTable is a separate series). So the property you need to set is SeriesSpacing not ColumnSpacing

2) Yes, you can use a similar approach in order to create drop lines for SplineChart. The main difference between the two charts is that the SplineChart use a label X axis, while the ScatterChart – numeric X axis. This in turn means that the value of the points.Value property returns a double array for the ScatterChart and a single double value for the spline chart. So for the SplineChart, you will need to use the index of the point in order to find the x coordinate. You can get the index of the point using its Column property. As for the rest its fairly similar to the ScatterChart approach, the only other difference is that the main primitive is not a PoinSet, but a PolyLine.

3) If you want to dynamically reposition the labels, you should use the FillSceneGraph event again. You can recognize the Text primitives which are the data values by checking if they are contained inside the main chart area and checking if their Path is null. After that parse their string text to a double value and use the appropriate labelStyle.HorizontalAlignment based on your criteria. In my sample I positioned them based on the total range of the X axis (I also added an option for central alignment for your reference).

I have attached an archive containing 3 samples, one for each of your questions. For the sample with the drop line use the radio button to switch between the Spline and Scatter charts.

Please let me know if you have any additional questions on this matter.

Hello Dimitar,

once again I need your help.

1) I am using Composite histogram chart that you provided and I am trying to set ColumnSapcing property to 0. I tried to use this solution but it didn't work for me

ColumnChartAppearance appearance = new ColumnChartAppearance();

appearance.ColumnSpacing = 0;

myColumnLayer.ChartTypeAppearance = appearance;

The whole code for chart I use is:

public CombinedChart()
{
InitializeComponent();
}

private void CombinedChart_Load(object sender, EventArgs e)
{
this.ultraChart1.ChartType = ChartType.Composite;

ChartArea area = new ChartArea();
this.ultraChart1.CompositeChart.ChartAreas.Add(area);

AxisItem axisY = new AxisItem();
axisY.Extent = 20;
axisY.DataType = AxisDataType.Numeric;
axisY.Labels.ItemFormatString = "<DATA_VALUE:##.##>";
axisY.OrientationType = AxisNumber.Y_Axis;
axisY.LineColor = Color.Silver;
area.Axes.Add(axisY);

AxisItem axisY2 = new AxisItem();
axisY2.Extent = 20;
axisY2.DataType = AxisDataType.Numeric;
axisY2.Labels.ItemFormatString = "<DATA_VALUE:##.##>";
axisY2.OrientationType = AxisNumber.Y_Axis;
axisY2.Visible = false;
axisY2.LineColor = Color.Silver;
area.Axes.Add(axisY2);

AxisItem axisX = new AxisItem();
axisX.Extent = 20;
axisX.DataType = AxisDataType.String;
axisX.Labels.Orientation = TextOrientation.VerticalLeftFacing;
axisX.Labels.ItemFormatString = "<ITEM_LABEL>";
axisX.OrientationType = AxisNumber.X_Axis;
axisX.SetLabelAxisType = SetLabelAxisType.GroupBySeries;
axisX.LineColor = Color.Silver;
area.Axes.Add(axisX);

AxisItem axisX1 = new AxisItem();
axisX1.Extent = 20;
axisX1.DataType = AxisDataType.String;
axisX1.Labels.Orientation = TextOrientation.VerticalLeftFacing;
axisX1.Labels.ItemFormatString = "<ITEM_LABEL>";
axisX1.Labels.Visible = false;
axisX1.OrientationType = AxisNumber.X_Axis;
axisX1.SetLabelAxisType = SetLabelAxisType.ContinuousData;
axisX1.LineColor = Color.Silver;
area.Axes.Add(axisX1);

ChartLayerAppearance myColumnLayer = new ChartLayerAppearance();
myColumnLayer.ChartType = ChartType.ColumnChart;
myColumnLayer.SwapRowsAndColumns = true;
myColumnLayer.ChartArea = area;

ChartLayerAppearance myLineLayer = new ChartLayerAppearance();
myLineLayer.ChartType = ChartType.LineChart;
myLineLayer.ChartArea = area;

DataTable dt = new DataTable();
dt.Columns.Add("Month");
dt.Columns.Add("Cumm Plane");
dt.Columns.Add("Monthly Achieve");

dt.Rows.Add("Apr-10", 1.039381, 0.00);
dt.Rows.Add("May-10", 1.531703, 0.00);
dt.Rows.Add("Jun-10", 2.166947, 2.50);
dt.Rows.Add("Jul-10", 2.943036, 4.00);
dt.Rows.Add("Aug-10", 3.837218, 3.20);
dt.Rows.Add("Sep-10", 4.802984, 4.10);
dt.Rows.Add("Oct-10", 5.771378, 4.70);
dt.Rows.Add("Nov-10", 6.657660, 6.70);
dt.Rows.Add("Dec-10", 7.372884, 6.70);
dt.Rows.Add("Jan-11", 7.838389, 8.20);
dt.Rows.Add("Feb-11", 8.000000, 8.30);
dt.Rows.Add("Mar-11", 7.838389, 7.90);
dt.Rows.Add("Apr-11", 7.372884, 6.80);
dt.Rows.Add("May-11", 6.657660, 5.70);
dt.Rows.Add("Jun-11", 5.771378, 5.40);
dt.Rows.Add("Jul-11", 4.802984, 5.70);
dt.Rows.Add("Aug-11", 3.837218, 5.20);
dt.Rows.Add("Sep-11", 2.943036, 5.10);
dt.Rows.Add("Nov-11", 2.166947, 4.60);
dt.Rows.Add("Dec-11", 1.531703, 3.20);

NumericSeries series2 = new NumericSeries();
series2.DataBind(dt, "Monthly Achieve", "Month");
series2.PEs.Add(new PaintElement(Color.DimGray));
myColumnLayer.Series.Add(series2);
ultraChart1.CompositeChart.Series.Add(series2);

NumericSeries series3 = new NumericSeries();
series3.DataBind(dt, "Cumm Plane", "Month");
series3.PEs.Add(new PaintElement(Color.Red));
myLineLayer.Series.Add(series3);
ultraChart1.CompositeChart.Series.Add(series3);

for (int i = 1; i < dt.Rows.Count; i++)
{
Override colorOverride = new Override();
colorOverride.Column = -2;
colorOverride.Row = i;
colorOverride.PE = new PaintElement(Color.LightSlateGray);
this.ultraChart1.Override.Add(colorOverride);
}

ColumnChartAppearance appearance = new ColumnChartAppearance();
appearance.ColumnSpacing = 0;
myColumnLayer.ChartTypeAppearance = appearance;

myLineLayer.AxisX = axisX1;
myLineLayer.AxisY = axisY2;
this.ultraChart1.CompositeChart.ChartLayers.Add(myLineLayer);

myColumnLayer.AxisX = axisX;
myColumnLayer.AxisY = axisY;
this.ultraChart1.CompositeChart.ChartLayers.Add(myColumnLayer);
}

private void ultraChart1_FillSceneGraph(object sender, Infragistics.UltraChart.Shared.Events.FillSceneGraphEventArgs e)
{
foreach (Primitive p in e.SceneGraph)
{
Box bar = p as Box;
if (bar != null)
{
bar.PE.Stroke = Color.LightGray;
}
}
}

2) The second question is regarding droplines.

The solution that you have provided works fine for ScatteredChart, but is there a way to use it for SplineChart?

3) The third is regarding value labels on chart.

You also provided the solution where these labels could be inside or outside the bar. But what I need is to decide in runtime where to place these value labels basing on the width of the bar. So if for example bar is too small I will need to place value label outside the bar and if the bar is very large I would have to place whole value label inside the bar. So the question is can I measure the width of particular bar to decide where to place label or maybe there is more fancy solution for this?

Thanks in advance!

P.S. is there a way to attach my solution here?