Combined chart, Column and line | Infragistics Forums

385

Combined chart, Column and line

Geir posted over 16 years ago

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 Smile 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 Angry .

THX

Geir

Parents

26458

Offline Max Rivlin [Infragistics] posted over 16 years ago

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);
Cancel
Reply

Cancel
20

Jerry Beck posted over 16 years ago in reply to Max Rivlin [Infragistics]

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
- Image2.gif
- View
- Hide
Cancel
Reply

Cancel
28496

Offline David Negley posted over 16 years ago in reply to Jerry Beck

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.
Cancel
Reply

Cancel

Reply

155

Noel posted over 14 years ago in reply to David Negley

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.
Cancel
Reply

Cancel

Children

155

Noel posted over 14 years ago in reply to David Negley

Thanks David! That worked great.
Cancel
Reply

Cancel
28496

Offline David Negley posted over 14 years ago in reply to Noel

try this:

columnLayer.SwapRowsAndColumns = true;
Cancel
Reply

Cancel