Combined chart, Column and line

Hi, I want to make a chart that has one column series and one line series in same chart. I also want to use the same two axis(x,y).

 Lets say I have this dataset:

Col1 | Col2  | Col3
3400 | 4322 | 1
2300 | 1000 | 2
5994 | 1400 | 3

I want column 3 to be my x axis labels(string i know )

Column 1 is to be shown in my chart as columns

Column 2 is to be shown in my chart as a line.

 Col 1 is budget amount, col2 is realAmount and col 3 is period (month)

The result Im after should look exacly like a Column Line Chart, but not have the same functionality.

Hope someone can help me.

I tried adding two different YXseries, but that didn't work. Maybe layering is what I need.

I'm getting really frustrated with the lack of documentation. Sure, there is plenty info on data members, but what I REALLY need is simple how to guides or examples that show how to use the different datamembers and functions.

THX

Geir

 

Hi Geir,

please, excuse us for the incomplete documentation. We are doing our best to fill in the gaps as soon as possible.

For your case you can try this piece of code:

this.ultraChart1.ChartType = ChartType.ColumnLineChart;

DataTable columnData = new DataTable("ColumnData");

columnData.Columns.Add("x", typeof(string));

columnData.Columns.Add("y", typeof(double));

columnData.Rows.Add(new object[ { "1", 3400 });

columnData.Rows.Add(new object[ { "2", 2300 });

columnData.Rows.Add(new object[ { "3", 5994 });

DataTable lineData = new DataTable("LineData");

lineData.Columns.Add("x", typeof(string));

lineData.Columns.Add("y", typeof(double));

lineData.Rows.Add(new object[ { "1", 4322 });

lineData.Rows.Add(new object[ { "2", 1000 });

lineData.Rows.Add(new object[ { "3", 1400 });

 

this.ultraChart1.ColumnLineChart.LineData.DataSource = lineData;

this.ultraChart1.ColumnLineChart.LineData.SwapRowsAndColumns = true;

this.ultraChart1.ColumnLineChart.ColumnData.DataSource = columnData;

this.ultraChart1.Axis.X.Labels.ItemFormat = AxisItemLabelFormat.None;

this.ultraChart1.DataBind();

If you are using 7.3 or newer, you may want to read this article too: How to: Create new chart types with Infragistics Ultrachart Is about how to use FillSceneGraph event to create customized charts by manipulating any chart primitive you want. Hope this helps!

I'm not sure why you can't use ColumnLine chart type, but here's how you would use a composite chart. You cannot use the same x axis for column and line layers because they need different values for SetLabelAxisType property (one is GroupBySeries, the other is Continuous). Here's an example:

DataTable dt = new DataTable();
dt.Columns.Add("col1", typeof(int));
dt.Columns.Add("col2", typeof(int));
dt.Columns.Add("col3", typeof(string));
dt.Rows.Add(new object[ {3400, 4322, "1"});
dt.Rows.Add(new object[ {2300, 1000, "2"});
dt.Rows.Add(new object[ {5994, 1400, "3"});

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

AxisItem xAxisColumn = new AxisItem(this.ultraChart1, AxisNumber.X_Axis);
AxisItem xAxisLine = new AxisItem(this.ultraChart1, AxisNumber.X_Axis);
AxisItem yAxis = new AxisItem(this.ultraChart1, AxisNumber.Y_Axis);
xAxisColumn.DataType = AxisDataType.String;
xAxisColumn.SetLabelAxisType = SetLabelAxisType.GroupBySeries;
xAxisColumn.Labels.ItemFormat = AxisItemLabelFormat.ItemLabel;
xAxisLine.DataType = AxisDataType.String;
xAxisLine.SetLabelAxisType = SetLabelAxisType.ContinuousData;
yAxis.DataType = AxisDataType.Numeric;
yAxis.Labels.ItemFormat = AxisItemLabelFormat.DataValue;
area.Axes.Add(xAxisColumn);
area.Axes.Add(xAxisLine);
area.Axes.Add(yAxis);

NumericSeries seriesColumn = new NumericSeries();
seriesColumn.Data.DataSource = dt;
seriesColumn.Data.LabelColumn = "col3";
seriesColumn.Data.ValueColumn = "col1";
NumericSeries seriesLine = new NumericSeries();
seriesLine.Data.DataSource = dt;
seriesLine.Data.LabelColumn = "col3";
seriesLine.Data.ValueColumn = "col2";
this.ultraChart1.Series.AddRange(new ISeries[ { seriesLine, seriesColumn });

ChartLayerAppearance columnLayer = new ChartLayerAppearance();
columnLayer.AxisX = xAxisColumn;
columnLayer.AxisY = yAxis;
columnLayer.ChartArea = area;
columnLayer.ChartType = ChartType.ColumnChart;
columnLayer.Series.Add(seriesColumn);

ChartLayerAppearance lineLayer = new ChartLayerAppearance();
lineLayer.AxisX = xAxisLine;
lineLayer.AxisY = yAxis;
lineLayer.ChartArea = area;
lineLayer.ChartType = ChartType.LineChart;
lineLayer.Series.Add(seriesLine);

this.ultraChart1.CompositeChart.ChartLayers.Add(columnLayer);
this.ultraChart1.CompositeChart.ChartLayers.Add(lineLayer);

I am trying to so a similar chart. I have tried the ColumnLine chart but can not get it to work properly. Now I am trying to use a composite chart.

 I tried the example from Max and it works, but I need to make a couple of changes. First I need two column data series with a legend for the column data.

 For the line chart, I want to use a separate Y axis on the right of the chart.

I have attached a gif showing an example of how I want the chart to look.

I modified the code from Max as shown below. Now it only displays the line but no columns. Can someone please point out what I am doing wrong?

Dim dt As New DataTable()

dt.Columns.Add("col1", GetType(Integer))

dt.Columns.Add("col2", GetType(Integer))

dt.Columns.Add("col3", GetType(Integer))

dt.Columns.Add("col4", GetType(String))

dt.Rows.Add(New Object() {2, 14, 12, "H1"})

dt.Rows.Add(New Object() {0, 11, 10, "H2"})

dt.Rows.Add(New Object() {1, 9, 11, "H3"})

dt.Rows.Add(New Object() {0, 10, 11, "H4"})

dt.Rows.Add(New Object() {4, 12, 9, "H5"})

dt.Rows.Add(New Object() {1, 11, 10, "H6"})

dt.Rows.Add(New Object() {1, 8, 7, "H7"})

dt.Rows.Add(New Object() {2, 10, 10, "H8"})

Me.UltraChart1.ChartType = ChartType.Composite

Dim area As New ChartArea()

Me.UltraChart1.CompositeChart.ChartAreas.Add(area)

Dim xAxisColumn As New AxisItem(Me.UltraChart1, AxisNumber.X_Axis)

Dim xAxisLine As New AxisItem(Me.UltraChart1, AxisNumber.X_Axis)

Dim yAxis As New AxisItem(Me.UltraChart1, AxisNumber.Y_Axis)

xAxisColumn.DataType = AxisDataType.String

xAxisColumn.SetLabelAxisType = SetLabelAxisType.GroupBySeries

xAxisColumn.Labels.ItemFormat = AxisItemLabelFormat.ItemLabel

xAxisLine.DataType = AxisDataType.String

xAxisLine.SetLabelAxisType = SetLabelAxisType.ContinuousData

yAxis.DataType = AxisDataType.Numeric

yAxis.Labels.ItemFormat = AxisItemLabelFormat.DataValue

area.Axes.Add(xAxisColumn)

area.Axes.Add(xAxisLine)

area.Axes.Add(yAxis)

Dim seriesColumn As New NumericSeries()

seriesColumn.Data.DataSource = dt

seriesColumn.Data.LabelColumn = "col4"

seriesColumn.Data.ValueColumn = "col2"

Dim seriesColumn2 As New NumericSeries()

seriesColumn.Data.DataSource = dt

seriesColumn.Data.LabelColumn = "col4"

seriesColumn.Data.ValueColumn = "col3"

Dim seriesLine As New NumericSeries()

seriesLine.Data.DataSource = dt

seriesLine.Data.LabelColumn = "col4"

seriesLine.Data.ValueColumn = "col1"

Me.UltraChart1.Series.AddRange(New Infragistics.UltraChart.Data.Series.ISeries() {seriesLine, seriesColumn, seriesColumn2})Dim ColumnLayer As New ChartLayerAppearance()

ColumnLayer.AxisX = xAxisColumn

ColumnLayer.AxisY = yAxis

ColumnLayer.ChartArea = area

ColumnLayer.ChartType = ChartType.ColumnChart

'columnlayer.Series.

ColumnLayer.Series.Add(seriesColumn)

ColumnLayer.Series.Add(seriesColumn2)

Dim LineLayer As New ChartLayerAppearance()

LineLayer.AxisX = xAxisLine

LineLayer.AxisY = yAxis

LineLayer.ChartArea = area

LineLayer.ChartType = ChartType.LineChart

LineLayer.Series.Add(seriesLine)

Me.UltraChart1.CompositeChart.ChartLayers.Add(ColumnLayer)

Me.UltraChart1.CompositeChart.ChartLayers.Add(LineLayer)

Me.UltraChart1.ColumnChart.SeriesSpacing = 1

 

 seriesColumn2 has no points in it.  look at the sample code again and you'll find that you never set any properties on that object.

I attempted to replicate jb4854's chart in C# and I am getting the columns grouped as 2 separate series.  I would actually like the columns to be group the same way as jb854's image above.

My code:

        DataTable dt = new DataTable();
        dt.Columns.Add("col1", typeof(Int32));
        dt.Columns.Add("col2", typeof(Int32));
        dt.Columns.Add("col3", typeof(Int32));
        dt.Columns.Add("col4", typeof(String));

        dt.Rows.Add(new object[] { 2, 14, 12, "H1" });
        dt.Rows.Add(new object[] { 0, 11, 10, "H2" });
        dt.Rows.Add(new object[] { 1, 9, 11, "H3" });
        dt.Rows.Add(new object[] { 0, 10, 11, "H4" });
        dt.Rows.Add(new object[] { 4, 12, 9, "H5" });
        dt.Rows.Add(new object[] { 1, 11, 10, "H6" });
        dt.Rows.Add(new object[] { 1, 8, 7, "H7" });
        dt.Rows.Add(new object[] { 2, 10, 10, "H8" });

        this.UltraChart4.ChartType = ChartType.Composite;
        ChartArea area = new ChartArea();
        this.UltraChart4.CompositeChart.ChartAreas.Add(area);
        AxisItem xAxisColumn = new AxisItem(this.UltraChart4, AxisNumber.X_Axis);
        AxisItem xAxisLine = new AxisItem(this.UltraChart4, AxisNumber.X_Axis);
        AxisItem yAxis = new AxisItem(this.UltraChart4, AxisNumber.Y_Axis);
        xAxisColumn.DataType = AxisDataType.String;
        xAxisColumn.SetLabelAxisType = SetLabelAxisType.GroupBySeries;
        xAxisColumn.Labels.ItemFormat = AxisItemLabelFormat.ItemLabel;
        xAxisLine.DataType = AxisDataType.String;
        xAxisLine.SetLabelAxisType = SetLabelAxisType.ContinuousData;
        yAxis.DataType = AxisDataType.Numeric;
        yAxis.Labels.ItemFormat = AxisItemLabelFormat.DataValue;
        area.Axes.Add(xAxisColumn);
        area.Axes.Add(xAxisLine);
        area.Axes.Add(yAxis);

        NumericSeries seriesColumn = new NumericSeries();
        seriesColumn.Data.DataSource = dt;
        seriesColumn.Data.LabelColumn = "col4";
        seriesColumn.Data.ValueColumn = "col2";

        NumericSeries seriesColumn2 = new NumericSeries();
        seriesColumn2.Data.DataSource = dt;
        seriesColumn2.Data.LabelColumn = "col4";
        seriesColumn2.Data.ValueColumn = "col3";

        NumericSeries seriesLine = new NumericSeries();
        seriesLine.Data.DataSource = dt;
        seriesLine.Data.LabelColumn = "col4";
        seriesLine.Data.ValueColumn = "col1";

        this.UltraChart4.Series.AddRange(new Infragistics.UltraChart.Data.Series.ISeries[]{ seriesLine, seriesColumn, seriesColumn2 });
       
        ChartLayerAppearance columnLayer = new ChartLayerAppearance();
        columnLayer.AxisX = xAxisColumn;
        columnLayer.AxisY = yAxis;
        columnLayer.ChartArea = area;
        columnLayer.ChartType = ChartType.ColumnChart;
        columnLayer.Series.Add(seriesColumn);
        columnLayer.Series.Add(seriesColumn2);

        ChartLayerAppearance lineLayer = new ChartLayerAppearance();
        lineLayer.AxisX = xAxisLine;
        lineLayer.AxisY = yAxis;
        lineLayer.ChartArea = area;
        lineLayer.ChartType = ChartType.LineChart;
        lineLayer.Series.Add(seriesLine);

        this.UltraChart4.CompositeChart.ChartLayers.Add(columnLayer);
        this.UltraChart4.CompositeChart.ChartLayers.Add(lineLayer);
        this.UltraChart4.ColumnChart.SeriesSpacing = 1;

 

This is the chart that it produces:

How can I get the values for H1 in Series 1 and 2 to be displayed next to each and the same for the rest (H2, H3, etc..) similar to the way it is being represented in the previous post.

My thanks in advance for your help.

try this:

columnLayer.SwapRowsAndColumns = true;

Thanks David!  That worked great.