Need code samples for creating Area and Bar chart types in composite chart.

Not Answered This post has 0 verified answers | 14 Replies | 3 Followers Thread's RSS feed.

Raaj
Points 320
Replied On: Thu, Apr 19 2012 9:49 AM Reply

Hi,

I am using composite chart to display the chart types like Line, Scatter, Area and Bar chart. In my code, the Line and Scatter charts are working fine. But the Area and Bar charts are not appearing in the composite chart. Could you please suggest me the right steps to follow in displaying the Area and Bar charts in the composite chart?

Note: I have reffered the Axis Requirements in the Infragistics online help, they suggesting to use the following requirements for composite chart...

Chart TypeX-AxisY-AxisY2-Axis

Area (2D)

Both:

AxisDataType=String/Time

and

SetLabelAxisType=Continuous

AxisDataType=Numeric

n/a

Bar (2D)

AxisDataType=Numeric

AxisDataType=String

SetLabelAxisType=GroupBySeries

n/a

 But in my requirement, I need to use "X-axis as Time/Numeric" & "Y-axis as Numeric" for both Area and Bar chart. Please suggest me a solution. 

Thanks & Regards,

Raaj

  • Post Points: 5

All Replies

Raaj
Points 320
Replied On: Fri, Apr 20 2012 7:28 AM Reply

Hi,

My requirement is very urgent. Could anyone suggest me solution or provide sample codes?

Regards,

Raaj

 

  • Post Points: 20
Georgi
Points 53,420
Infragistics Employee
Replied On: Fri, Apr 20 2012 10:45 AM Reply

Hi Raaj,

Did you have a time to take a look at my sample, that Boris upload yesterday in this forum thread http://community.infragistics.com/forums/p/68189/345467.aspx   If so there is shown how to used AreaChart.

Right now I made small modification to combine Line, Area and ColumBar chart. Please take a look at the attached sample and let me know if you have any questions.

Regards

Georgi
Senior Developer Support Engineer, MCPD
Infragistics, Inc

www.infragistics.com

  • Post Points: 5
Georgi
Points 53,420
Infragistics Employee
Replied On: Sat, Apr 21 2012 7:19 AM Reply

Hi Raaj,

Have you been able to resolve your issue ? Did you have a time to take a look at the attached sample. Let me know if you have any questions

Regards

Georgi
Senior Developer Support Engineer, MCPD
Infragistics, Inc

www.infragistics.com

  • Post Points: 20
Raaj
Points 320
Replied On: Mon, Apr 23 2012 10:44 AM Reply

Hi,

I have gone thru the attachment samples. But that is not given me complete solution. Because, for Area and Bar chart, the series I need to dsiplay is

1st requirement(both Area & Bar) is... in X-axis i need to display Date series and Y-axis as numeric series and

2nd requirement(both Area and Bar) is... in X-axis I need to display numeric series and Y-axis as numeric series.

I tried by using the NumericSeries datapoint style. But when I converted the Date value to string, it does not appearing in the x-axis range series. It simply shows a dark labels. Please see the below screen shot.

 

Let me know if you need further clarifications.

Regards,

Raaj

  • Post Points: 20
Georgi
Points 53,420
Infragistics Employee
Replied On: Wed, Apr 25 2012 5:16 AM Reply

Hello Raaj,

If you take a look at the code in my previous sample you will see that I`m using two different X axis (one X axis for Area chart and other X Axis for Column chart ). The same is for Y axis. By this way each chartLayer using his own axis. Also you are able to create different type of Series (for example Numeric series for area chart and NumericTimeSeries for column chart) and apply these series to appropriate chartlayer with correct axis. By this way you could achieve desired behavior

Let me know if you have any questions

Georgi
Senior Developer Support Engineer, MCPD
Infragistics, Inc

www.infragistics.com

  • Post Points: 20
Raaj
Points 320
Replied On: Wed, Apr 25 2012 7:13 AM Reply
Hi, I have gone through your code. But I can't find samples for displaying BAR CHART in the composite chart. Also I need to display the DATE in label item format in the X-axis for both "AREA" and "BAR" chart. This is my primary problem. Regards, Raaj
  • Post Points: 20
Dave Frischknecht
Points 13,205
Infragistics Employee
Replied On: Mon, Apr 30 2012 1:52 PM Reply

Hello Raaj,

Would you be able to provide a drawing or other mock-up showing how you'd like the chart to look?  If we had something like that from you, it would be much easier for us to help you find a solution.

Dave F

Developer Support Engineer

Infragistics, Inc.

http://www.infragistics.com/support

  • Post Points: 20
Raaj
Points 320
Replied On: Wed, May 2 2012 6:12 AM Reply

Hi Dave,

I will provide you sample screen shots for the BAR and AREA chart taken from the DevXpress chart.

I am using the Ultra chart with type composite chart to display BAR and AREA charts in ultra chart.

Sample BAR chart with X-axis(Date) and Y-axis(Numeric):

Sample BAR chart with X-axis(Numeric) and Y-axis(Numeric):

Sample AREA chart with X-axis(Date) and Y-axis(Numeric):

Sample AREA chart with X-axis(Numeric) and Y-axis(Numeric):

To bind the values, I have using the below codes.

NumericSeries

 

 

NumSeries = new NumericSeries();

NumSeries.Data.LabelColumn = xMemberData.ToString();

NumSeries.Data.ValueColumn = yMemberData.ToString();

NumSeries.Data.DataSource = dtTemp;

NumSeries.DataBind();

series = NumSeries;

 

 

 

And to bind the series with the composite chart, I will be using the below codes..

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

chartPreview.ChartType =

 

ChartType.Composite;

 

 

 

ChartArea area1 = new ChartArea();

chartPreview.CompositeChart.ChartAreas.Add(area1);

 

 

 

CompositeLegend legend = new CompositeLegend(chartPreview);

 

 

 

AxisItem x = new AxisItem(chartPreview, AxisNumber.X_Axis);

 

 

 

AxisItem y = new AxisItem(chartPreview, AxisNumber.Y_Axis);

 

 

 

AxisItem y2 = new AxisItem(chartPreview, AxisNumber.Y2_Axis);

 

 

 

// AxisItem x2 = new AxisItem(chartPreview, AxisNumber.X2_Axis);

 

 

 

UserGraph graph = UserGraphFromCurrentSettings();

 

 

 

ChartLayerCollection LayerY1Collection = new ChartLayerCollection(chartPreview);

 

 

 

ChartLayerCollection LayerY2Collection = new ChartLayerCollection(chartPreview);

 

 

 

ChartLayerAppearance layerY1 = null;

 

 

 

ChartLayerAppearance layerY2 = null;

 

 

 

//*** for Y1 Axes

 

 

 

if (graph != null && nbgY1Axis.ItemLinks.Count != 0)

{

 

 

 

for (int Y1 = 0; Y1 < nbgY1Axis.ItemLinks.Count; Y1++)

{

layerY1 =

 

new ChartLayerAppearance(chartPreview);

layerY1.Key = graph.AxisY1Variables[Y1].Name.ToString();

layerY1.ChartType = UpdateSeries(graph.AxisY1Variables[Y1].SeriesType.ToString());

LayerY1Collection.Add(layerY1);

}

}

 

 

 

 

 

//*** for Y2 Axes

 

 

if (graph != null && nbgY2Axis.ItemLinks.Count != 0)

{

 

 

for (int Y2 = 0; Y2 < nbgY2Axis.ItemLinks.Count; Y2++)

{

layerY2 =

 

new ChartLayerAppearance(chartPreview);

layerY2.Key = graph.AxisY2Variables[Y2].Name.ToString();

layerY2.ChartType = UpdateSeries(graph.AxisY2Variables[Y2].SeriesType.ToString());

LayerY2Collection.Add(layerY2);

}

}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

LayerY1Collection[Y11].ChartArea = area1;

LayerY1Collection[Y11].AxisX = x;

LayerY1Collection[Y11].AxisY = y;

 

 

 

 

if

(area1.Axes.Count == 0)

{

area1.Axes.Add(x);

area1.Axes.Add(y);

}

LayerY1Collection[Y11].AxisX.Extent = 75;

LayerY1Collection[Y11].AxisY.Extent = 75;

 

 

 

//***** common settings for X-axis and Y-axis

LayerY1Collection[Y11].Visible = true;

LayerY1Collection[Y11].AxisX.Visible =

 

true;

LayerY1Collection[Y11].AxisX.Labels.Visible = t

 

rue;

LayerY1Collection[Y11].AxisX.ScrollScale.Visible = f

 

alse;

LayerY1Collection[Y11].AxisX.RangeType =

 

AxisRangeType.Automatic;

LayerY1Collection[Y11].AxisX.TickmarkStyle =

 

AxisTickStyle.Smart;

LayerY1Collection[Y11].AxisY.Visible =

 

true;

LayerY1Collection[Y11].AxisY.Labels.Visible = t

 

rue;

LayerY1Collection[Y11].AxisY.ScrollScale.Visible = f

 

alse;

LayerY1Collection[Y11].AxisY.RangeType =

 

AxisRangeType.Automatic;

LayerY1Collection[Y11].AxisY.TickmarkStyle =

 

AxisTickStyle.Smart;

 

//***** For Y1 Axis layer **************

 

 

 

 

if (LayerY1Collection[Y11].ChartType.ToString().Contains(SeriesType.Area.ToString()))

{

LayerY1Collection[Y11].ChartType =

 

ChartType.AreaChart;

 

 

 

if (IsDateSeries)

{

x.DataType =

 

AxisDataType.Time;

y.DataType =

 

AxisDataType.Numeric;

x.SetLabelAxisType =

 

SetLabelAxisType.ContinuousData;

LayerY1Collection[Y11].AxisX.TickmarkIntervalType =

 

AxisIntervalType.Months;

LayerY1Collection[Y11].AxisX.Labels.ItemFormat =

 

AxisItemLabelFormat.Custom;

LayerY1Collection[Y11].AxisX.Labels.ItemFormatString =

 

"<DATA_VALUE:MM/dd/yyyy>";

LayerY1Collection[Y11].AxisX.Labels.Orientation =

 

TextOrientation.Custom;

LayerY1Collection[Y11].AxisX.Labels.OrientationAngle = -40;

LayerY1Collection[Y11].AxisY.Labels.ItemFormat =

 

AxisItemLabelFormat.Custom;

LayerY1Collection[Y11].AxisY.Labels.ItemFormatString =

 

"<DATA_VALUE:00.0000>";

}

 

 

 

else

{

x.DataType =

 

AxisDataType.String;

y.DataType =

 

AxisDataType.Numeric;

x.SetLabelAxisType =

 

SetLabelAxisType.ContinuousData;

 

LayerY1Collection[Y11].AxisX.Labels.Orientation = TextOrientation.VerticalLeftFacing;

 

 

 

LayerY1Collection[Y11].AxisX.Labels.ItemFormat = AxisItemLabelFormat.ItemLabel;

LayerY1Collection[Y11].AxisY.Labels.ItemFormat =

 

AxisItemLabelFormat.DataValue;

LayerY1Collection[Y11].AxisY.Labels.ItemFormatString =

 

"<DATA_VALUE:00.0000>";

}

}

 

 

 

else if (LayerY1Collection[Y11].ChartType.ToString().Contains(SeriesType.Bar.ToString()))

{

LayerY1Collection[Y11].ChartType =

 

ChartType.BarChart;

 

 

 

if (IsDateSeries)

{

x.DataType =

 

AxisDataType.Numeric;

y.DataType =

 

AxisDataType.String;

y.SetLabelAxisType =

 

SetLabelAxisType.GroupBySeries;

 

 

 

BarChartAppearance barAppearance = new BarChartAppearance();

barAppearance.NullHandling =

 

NullHandling.Zero;

barAppearance.BarSpacing = 1;

LayerY1Collection[Y11].ChartTypeAppearance = barAppearance;

LayerY1Collection[Y11].AxisX.TickmarkIntervalType =

 

AxisIntervalType.Months;

LayerY1Collection[Y11].AxisX.Labels.ItemFormat =

 

AxisItemLabelFormat.ItemLabel;

LayerY1Collection[Y11].AxisX.Labels.Orientation =

 

TextOrientation.Custom;

LayerY1Collection[Y11].AxisX.Labels.OrientationAngle = -40;

LayerY1Collection[Y11].AxisY.Labels.ItemFormat =

 

AxisItemLabelFormat.DataValue;

}

 

 

 

else

{

x.DataType =

 

AxisDataType.Numeric;

y.DataType = A

 

xisDataType.String;

y.SetLabelAxisType =

 

SetLabelAxisType.GroupBySeries;

LayerY1Collection[Y11].AxisX.Labels.ItemFormat =

 

AxisItemLabelFormat.DataValue;

LayerY1Collection[Y11].AxisX.Labels.ItemFormatString =

 

"<DATA_VALUE:00.0000>";

 

LayerY1Collection[Y11].AxisY.Labels.Orientation = TextOrientation.Custom;

LayerY1Collection[Y11].AxisY.Labels.OrientationAngle = 0;

 

 

 

LayerY1Collection[Y11].AxisY.Labels.ItemFormat = AxisItemLabelFormat.ItemLabel;

 

 

 

 

 

 

 

BarChartAppearance barAppearance = new BarChartAppearance(chartPreview);

barAppearance.NullHandling =

 

NullHandling.Zero;

barAppearance.BarSpacing = 2;

barAppearance.SeriesSpacing = 2;

 

 

 

LayerY1CollectioRaajn[Y11].ChartTypeAppearance = barAppearance;

}

}

 

 

Regards,

Raaj

 

  • Post Points: 5
Raaj
Points 320
Replied On: Thu, May 3 2012 12:27 PM Reply

Hi Dave,

Did you (or anyone from your team) find time to look into this issue?

Please let me know if you need any clarification regarding this issue.

Regards,

Raaj

  • Post Points: 20
Georgi
Points 53,420
Infragistics Employee
Replied On: Fri, May 4 2012 6:51 AM Reply

Hello Raaj,

I made small sample for you where I`m using BarChart with AreaChart together with mentioned axis. Could you please take a look at the attached sample for more details and let me know if you have any questions.

PS. Could you please upload whole sample in forum thread (using Option Tab  or Media button during replay ), because the code that you post is very difficult to be check it. Thanks !

Georgi
Senior Developer Support Engineer, MCPD
Infragistics, Inc

www.infragistics.com

  • Post Points: 5
Georgi
Points 53,420
Infragistics Employee
Replied On: Mon, May 7 2012 1:40 AM Reply

Hello Raaj,

Have you been able to resolve your issue ? Did you have a time to take a look at the attached sample. Feel free to write me if you have any questions.

Regards

Georgi
Senior Developer Support Engineer, MCPD
Infragistics, Inc

www.infragistics.com

  • Post Points: 20
Raaj
Points 320
Replied On: Mon, May 7 2012 5:43 AM Reply

Hi,

I have gone through the samples that you have send. In that, You have mentioned NumericTimeSeries(X-axis as Date and Y-axis as Numeric) for AREA chart and NumericSeries(X-axis as Numeric & Y-axis as String) for BAR chart.

I know this will work very fine beacuse I already using these combinations.

But my problem is, I need to display

1. AREA chart with X-axis as Numeric and Y-axis as Numeric.

2. BAR chart with X-axis as Date and Y-axis as Numeric.

For these things, do I need to convert the Numeric/Date to String for binding in the NumericSeries???

If I convert the Date to String, or Numeric to String, does the chart axis labels appear fine in the axis label area???

Please refer the below mentioned screen shots for axis formats that I need to display for AREA and BAR chart. This screen shot is taken from the DevXpress chart control.

1 (a) Sample BAR chart with X-axis(Date) and Y-axis(Numeric):

1 (b) Sample BAR chart with X-axis(Numeric) and Y-axis(Numeric):

2 (a) Sample AREA chart with X-axis(Date) and Y-axis(Numeric):

2 (b) Sample AREA chart with X-axis(Numeric) and Y-axis(Numeric):

If we convert the Numeric to String for AREA chart X-axis, does the chart graph and its labels looks fine???

If you send samples for the above requirement, it will be greatly helpful for us.

Regards,

Raaj

  • Post Points: 20
Georgi
Points 53,420
Infragistics Employee
Replied On: Mon, May 7 2012 6:35 AM Reply

Hello Raaj,

If you take a look in our online documentetion : http://help.infragistics.com/Help/NetAdvantage/WinForms/2012.1/CLR2.0/html/Chart_Requirements_for_Series_Binding.html 

you could find what kind of series is appropriate for each chart type. So mentioned behavior is expected.

Raaj:

But my problem is, I need to display

1. AREA chart with X-axis as Numeric and Y-axis as Numeric.

2. BAR chart with X-axis as Date and Y-axis as Numeric.

Maybe one possible way to achieve desired behavior could be if you handle FillSceneGraphe event  and  replace your lables with desired text. For example:

foreach (Primitive item in e.SceneGraph)

            {

                Text pl = item as Text;

                if (pl != null)

                {

                    string temp = pl.GetTextString();

                    switch (temp)

                    {

                        case "1":

                            pl.PE.Fill = Color.Crimson;

                            pl.SetTextString("Jan");

                        ……

}

   }  

              }

Let me know if you have any questions.

 

Georgi
Senior Developer Support Engineer, MCPD
Infragistics, Inc

www.infragistics.com

  • Post Points: 5
Georgi
Points 53,420
Infragistics Employee
Replied On: Wed, May 9 2012 10:40 AM Reply

Hello Raaj,

Let me know if you have any questions.

Regards

Georgi
Senior Developer Support Engineer, MCPD
Infragistics, Inc

www.infragistics.com

  • Post Points: 5
Page 1 of 1 (15 items) | RSS