Hello
I need a column chart showing two columns; one show percent (0-100), the other count (>1000). Percent should be shown on Y axis and count on Y2 axis.
However I am having trouble doing this, it will only show one of the columns.
My code looks like this:
InitializeComponent(); this.ultraChart1.ChartType = Infragistics.UltraChart.Shared.Styles.ChartType.Composite; var chartArea = new ChartArea(); this.ultraChart1.CompositeChart.ChartAreas.Add(chartArea); // Create x-axis var axisX = new AxisItem(); axisX.OrientationType = Infragistics.UltraChart.Shared.Styles.AxisNumber.X_Axis; axisX.DataType = Infragistics.UltraChart.Shared.Styles.AxisDataType.String; // Create axis Y to show number between 0-100 var axisY = new AxisItem(); axisY.OrientationType = Infragistics.UltraChart.Shared.Styles.AxisNumber.Y_Axis; axisY.DataType = Infragistics.UltraChart.Shared.Styles.AxisDataType.Numeric; axisY.Labels.ItemFormatString = "<DATA_VALUE:0>"; axisY.RangeType = AxisRangeType.Custom; axisY.RangeMin = 0; axisY.RangeMax = 100; // Create axis Y2 to show number between 1000-10000 var axisY2 = new AxisItem(); axisY2.OrientationType = Infragistics.UltraChart.Shared.Styles.AxisNumber.Y2_Axis; axisY2.DataType = Infragistics.UltraChart.Shared.Styles.AxisDataType.Numeric; axisY2.RangeType = AxisRangeType.Custom; axisY2.RangeMin = 1000; axisY2.RangeMax = 10000; axisY2.Labels.ItemFormatString = "<DATA_VALUE:0>"; chartArea.Axes.Add(axisX); chartArea.Axes.Add(axisY); chartArea.Axes.Add(axisY2); // Add column layers for both Y and Y2 ChartLayerAppearance columnLayerPercent = new ChartLayerAppearance(); columnLayerPercent.ChartType = ChartType.ColumnChart; columnLayerPercent.ChartArea = chartArea; columnLayerPercent.AxisX = axisX; columnLayerPercent.AxisY = axisY; ChartLayerAppearance columnLayerCount = new ChartLayerAppearance(); columnLayerCount.ChartType = ChartType.ColumnChart; columnLayerCount.ChartArea = chartArea; columnLayerCount.AxisX = axisX; columnLayerCount.AxisY2 = axisY2; this.ultraChart1.CompositeChart.ChartLayers.Add(columnLayerPercent); this.ultraChart1.CompositeChart.ChartLayers.Add(columnLayerCount); var testData = GetTestData(); foreach (var numericItem in testData) { NumericSeries s = new NumericSeries(); s.Label = numericItem.Timestamp.ToShortDateString(); s.Points.Add(new NumericDataPoint(numericItem.ValuePercent, "Percent", false)); columnLayerPercent.Series.Add(s); } foreach (var numericItem in testData) { NumericSeries s = new NumericSeries(); s.Label = numericItem.Timestamp.ToShortDateString(); s.Points.Add(new NumericDataPoint(numericItem.ValueCount, "Count", false)); columnLayerCount.Series.Add(s); }
3583.Source.zip
The code creates a chart with one X and two Y axis.
I am 100% sure numericItem.ValueCount has values.
Any ideas?
Hello Rasmus,
Thank you for contacting Infragistics. Is the formatting that is missing on Y2, it's not a percent?
If so then you should do something like this instead:
ultraChart1.Axis.Y.Labels.ItemFormat = Infragistics.UltraChart.Shared.Styles.AxisItemLabelFormat.Custom;
ultraChart1.Axis.Y.Labels.ItemFormatString ="<PERCENT_VALUE:#0.00>";Otherwise please clarify what the image is representing from what you do want.
I have added to column series, but only on of them is visible. I would expect two bars next ot each other, one using the Y axis and the other Y2 axis.
It works if I add both series to Y-axis, but thats not what I want.
It has nothing to do with the labels, they show correct. It is the column bar that is missing.
Dont know if it helps:
It is very much related to this thread: https://es.infragistics.com/community/forums/f/ultimate-ui-for-windows-forms/68189/y-and-y2-axis-in-the-composite-chart-with-the-chart-type-as-line-chart-does-not-appearing
I managed to get it the example on that thread to work, but If I change it to column ChartType I get the same problem.
What breaks?, I'm not seeing anything unusual when setting both charts to point to the same y axis. Each series in my sample is part of the same chart layer so they will both reflect on the one range Y1 or Y2, not both simultaneously. In order to get independent ranges you will need to create a completely new chart layer with its own separate AxisItem or use our newer UltraDataChart.
The UltraDataChart will more than likely help you since you can create a series and define it's axis upfront so it takes the range independently.
https://es.infragistics.com/help/winforms/datachart-multiple-axes
Thanks again.
I have no problem showing Yaxis2, and I already did as you show here but the columns are both binded to Y1. Changing it to Y2 will break it. In your example both columns are bound to the Y1 axis.
The conclusion might be what I am trying to do is not possible using CompositeChart?
Thanks for clarifying.
I modified the sample to include a new Yaxis2 with a custom range. To achieve this all you have to do is create a custom range type.
eg.
axisY2.RangeType = AxisRangeType.Custom; axisY2.RangeMin = 1; axisY2.RangeMax = 2000; axisY2.TickmarkStyle = AxisTickStyle.Percentage; axisY2.TickmarkPercentage = 25;
This advanced walkthough may also hep you as well.
http://devcenter.infragistics.com/Support/KnowledgeBaseArticle.Aspx?ArticleID=6034
Also, I recommend review this topic on how to modify the fillscene graph layer of the chart to add your own custom lines.
https://es.infragistics.com/help/winforms/chart-modify-scene-graph-using-fillscenegraph-event
8156.TestUltraChart.zip
Thanks for your provided example.
However this is not what I want. I want the BMW series to use Y1 axis, but Chevy should use Y2 axis. The example you provided uses the same Y-axis. It has to be in an composite chart, as I also want to draw line series.
I tried to draw it here:
I hope it makes sense.
I attached a sample below showing two column series.
TestUltraChart.zip