I've included the screenshot, html & code for my composite chart with column and line. I'm having two issues, my x-axis labels are wrapping and my Y-Axis should have the scale for the columns, which it does, on the left, and the scale for the line, which it doesn't on the right. I can't seem to get either to display correctly. My extent is office, but I'll adjust that afterward. Thanks for you help!
<igchart:UltraChart ID="igChart5" runat="server" BackgroundImageFileName="" BorderColor="Black" BorderWidth="1px" ChartType="ColumnLineChart" EmptyChartText="Data Not Available" SplineAreaChart-LineDrawStyle="Solid" Style="position: relative" Version="8.1"> <Effects> <Effects> <igchartprop:GradientEffect> </igchartprop:GradientEffect> </Effects> </Effects> <ColorModel AlphaLevel="150" ColorBegin="Green" ColorEnd="DarkRed" ModelStyle="CustomRandom"> </ColorModel> <Axis> <PE ElementType="None" Fill="cornsilk" /> <X LineThickness="1" TickmarkInterval="0" TickmarkStyle="Smart" Visible="True"> <MajorGridLines AlphaLevel="255" Color="Gainsboro" DrawStyle="Dot" Thickness="1" Visible="True" /> <MinorGridLines AlphaLevel="255" Color="LightGray" DrawStyle="Dot" Thickness="1" Visible="False" /> <Labels Font="Verdana, 7pt" FontColor="DimGray" HorizontalAlign="Near" ItemFormatString="<ITEM_LABEL>" Orientation="VerticalLeftFacing" VerticalAlign="Center"> <SeriesLabels Font="Verdana, 7pt" FontColor="DimGray" HorizontalAlign="Near" Orientation="VerticalLeftFacing" VerticalAlign="Center"> <Layout Behavior="UseCollection"> </Layout> </SeriesLabels> <Layout Behavior="Auto"> </Layout> </Labels> </X> <Y LineThickness="1" TickmarkInterval="20" TickmarkStyle="Smart" Visible="True"> <MajorGridLines AlphaLevel="255" Color="Gainsboro" DrawStyle="Dot" Thickness="1" Visible="True" /> <MinorGridLines AlphaLevel="255" Color="LightGray" DrawStyle="Dot" Thickness="1" Visible="False" /> <Labels Font="Verdana, 7pt" FontColor="DimGray" HorizontalAlign="Far" ItemFormatString="<DATA_VALUE:00.##>" Orientation="Horizontal" VerticalAlign="Center"> <SeriesLabels Font="Verdana, 7pt" FontColor="DimGray" FormatString="" HorizontalAlign="Far" Orientation="Horizontal" VerticalAlign="Center"> <Layout Behavior="Auto"> </Layout> </SeriesLabels> <Layout Behavior="Auto"> </Layout> </Labels> </Y> <Y2 LineThickness="1" TickmarkInterval="10" TickmarkStyle="Smart" Visible="True"> <MajorGridLines AlphaLevel="255" Color="Gainsboro" DrawStyle="Dot" Thickness="1" Visible="True" /> <MinorGridLines AlphaLevel="255" Color="LightGray" DrawStyle="Dot" Thickness="1" Visible="False" /> <Labels Font="Verdana, 7pt" FontColor="Gray" HorizontalAlign="Near" ItemFormatString="<DATA_VALUE:00.##>" Orientation="Horizontal" VerticalAlign="Center"> <SeriesLabels Font="Verdana, 7pt" FontColor="Gray" FormatString="" HorizontalAlign="Near" Orientation="Horizontal" VerticalAlign="Center"> <Layout Behavior="Auto"> </Layout> </SeriesLabels> <Layout Behavior="Auto"> </Layout> </Labels> </Y2> <X2 LineThickness="1" TickmarkInterval="0" TickmarkStyle="Smart" Visible="True"> <MajorGridLines AlphaLevel="255" Color="Gainsboro" DrawStyle="Dot" Thickness="1" Visible="True" /> <MinorGridLines AlphaLevel="255" Color="LightGray" DrawStyle="Dot" Thickness="1" Visible="False" /> <Labels Font="Verdana, 7pt" FontColor="Gray" HorizontalAlign="Far" ItemFormatString="<ITEM_LABEL>" Orientation="VerticalLeftFacing" VerticalAlign="Center"> <SeriesLabels Font="Verdana, 7pt" FontColor="Gray" FormatString="" HorizontalAlign="Far" Orientation="VerticalLeftFacing" VerticalAlign="Center"> <Layout Behavior="Auto"> </Layout> </SeriesLabels> <Layout Behavior="Auto"> </Layout> </Labels> </X2> <Z LineThickness="1" TickmarkInterval="0" TickmarkStyle="Smart" Visible="False"> <MajorGridLines AlphaLevel="255" Color="Gainsboro" DrawStyle="Dot" Thickness="1" Visible="True" /> <MinorGridLines AlphaLevel="255" Color="LightGray" DrawStyle="Dot" Thickness="1" Visible="False" /> <Labels Font="Verdana, 7pt" FontColor="DimGray" HorizontalAlign="Near" ItemFormatString="" Orientation="Horizontal" VerticalAlign="Center" Visible="False"> <SeriesLabels Font="Verdana, 7pt" FontColor="DimGray" HorizontalAlign="Near" Orientation="Horizontal" VerticalAlign="Center"> <Layout Behavior="Auto"> </Layout> </SeriesLabels> <Layout Behavior="Auto"> </Layout> </Labels> </Z> <Z2 LineThickness="1" TickmarkInterval="0" TickmarkStyle="Smart" Visible="False"> <MajorGridLines AlphaLevel="255" Color="Gainsboro" DrawStyle="Dot" Thickness="1" Visible="True" /> <MinorGridLines AlphaLevel="255" Color="LightGray" DrawStyle="Dot" Thickness="1" Visible="False" /> <Labels Font="Verdana, 7pt" FontColor="Gray" HorizontalAlign="Near" ItemFormatString="" Orientation="Horizontal" VerticalAlign="Center" Visible="False"> <SeriesLabels Font="Verdana, 7pt" FontColor="Gray" HorizontalAlign="Near" Orientation="Horizontal" VerticalAlign="Center"> <Layout Behavior="Auto"> </Layout> </SeriesLabels> <Layout Behavior="Auto"> </Layout> </Labels> </Z2> </Axis></igchart:UltraChart>
iColChart.Visible = True iColChart.ChartType = Styles.ChartType.Composite Dim area As New Appearance.ChartArea Dim xAxisColumn As New Appearance.AxisItem Dim aColumn As String() = Nothing Dim aLine As String() = Nothing Dim aLine1 As String() = Nothing
xAxisColumn.axisNumber = Styles.AxisNumber.X_Axis xAxisColumn.DataType = Styles.AxisDataType.String xAxisColumn.SetLabelAxisType = SetLabelAxisType.GroupBySeries xAxisColumn.MajorGridLines.Visible = False xAxisColumn.MinorGridLines.Visible = False xAxisColumn.Labels.ItemFormat = Styles.AxisItemLabelFormat.ItemLabel xAxisColumn.Labels.Orientation = Styles.TextOrientation.VerticalLeftFacing xAxisColumn.Labels.SeriesLabels.Orientation = Styles.TextOrientation.VerticalLeftFacing area.Axes.Add(xAxisColumn)
Dim xAxisLine As New Appearance.AxisItem xAxisLine.axisNumber = Styles.AxisNumber.X_Axis xAxisLine.DataType = Styles.AxisDataType.String xAxisLine.TickmarkInterval = 0.1 xAxisLine.SetLabelAxisType = SetLabelAxisType.ContinuousData xAxisLine.MajorGridLines.Visible = False xAxisLine.MinorGridLines.Visible = False xAxisLine.Margin.Near.MarginType = Styles.LocationType.Percentage xAxisLine.Margin.Near.Value = 2 xAxisLine.Margin.Far.MarginType = Styles.LocationType.Percentage xAxisLine.Margin.Far.Value = 2 xAxisColumn.Labels.Orientation = Styles.TextOrientation.VerticalLeftFacing xAxisColumn.Labels.SeriesLabels.Orientation = Styles.TextOrientation.VerticalLeftFacing area.Axes.Add(xAxisLine)
Dim yAxisColumn As New Appearance.AxisItem yAxisColumn.axisNumber = Styles.AxisNumber.Y_Axis yAxisColumn.DataType = Styles.AxisDataType.Numeric yAxisColumn.TickmarkInterval = 0.1 yAxisColumn.RangeMax = 100 yAxisColumn.RangeMin = 0 yAxisColumn.RangeType = Styles.AxisRangeType.Custom yAxisColumn.TickmarkStyle = Styles.AxisTickStyle.Smart yAxisColumn.MajorGridLines.Visible = False yAxisColumn.MinorGridLines.Visible = False yAxisColumn.Labels.ItemFormat = Styles.AxisItemLabelFormat.DataValue area.Axes.Add(yAxisColumn)
Dim yAxisLine As New Appearance.AxisItem yAxisLine.axisNumber = Styles.AxisNumber.Y2_Axis yAxisLine.DataType = Styles.AxisDataType.Numeric yAxisLine.TickmarkInterval = 0.1 yAxisLine.RangeMax = 20 yAxisLine.RangeMin = 0 yAxisColumn.RangeType = Styles.AxisRangeType.Custom yAxisLine.TickmarkStyle = Styles.AxisTickStyle.Smart yAxisLine.MajorGridLines.Visible = False yAxisLine.MinorGridLines.Visible = False area.Axes.Add(yAxisLine) area.Bounds = New Rectangle(0, 10, 100, 90) area.BoundsMeasureType = Styles.MeasureType.Percentage
aColumn = GetChartColumnLineSeriesArray(userProfile, choice, 3) Dim seriesColumn As New Appearance.NumericSeries seriesColumn.Points.Add(New Appearance.NumericDataPoint(aColumn(0), "No Entry for Annual Meeting", False)) seriesColumn.Points.Add(New Appearance.NumericDataPoint(aColumn(1), "General Required Training", False)) seriesColumn.Points.Add(New Appearance.NumericDataPoint(aColumn(2), "Certificates not on File", False)) seriesColumn.Points.Add(New Appearance.NumericDataPoint(aColumn(3), "No Office Review", False)) seriesColumn.Points.Add(New Appearance.NumericDataPoint(aColumn(4), "Other", False))
aLine = GetChartColumnLineSeriesArray(userProfile, choice, 4) Dim seriesLine As New Appearance.NumericSeries seriesLine.Points.Add(New Appearance.NumericDataPoint(aLine(0), "No Entry for Annual Meeting", False)) seriesLine.Points.Add(New Appearance.NumericDataPoint(aLine(1), "General Required Training", False)) seriesLine.Points.Add(New Appearance.NumericDataPoint(aLine(2), "Certificates not on File", False)) seriesLine.Points.Add(New Appearance.NumericDataPoint(aLine(3), "No Office Review", False)) seriesLine.Points.Add(New Appearance.NumericDataPoint(aLine(4), "Other", False))
iColChart.CompositeChart.Series.Add(seriesColumn) iColChart.CompositeChart.Series.Add(seriesLine)
Dim columnLayer As New Appearance.ChartLayerAppearance columnLayer.ChartType = Styles.ChartType.ColumnChart columnLayer.AxisX = xAxisColumn columnLayer.AxisY = yAxisColumn columnLayer.ChartArea = area columnLayer.Series.Add(seriesColumn) iColChart.CompositeChart.ChartLayers.Add(columnLayer)
Dim LineLayer2 As New Appearance.ChartLayerAppearance LineLayer2.ChartType = Styles.ChartType.LineChart LineLayer2.AxisX = xAxisLine LineLayer2.AxisY = yAxisColumn LineLayer2.ChartArea = area iColChart.CompositeChart.ChartLayers.Add(LineLayer2)
iColChart.Data.ZeroAligned = True iColChart.Data.MaxValue = 100 iColChart.Data.MinValue = 0 iColChart.ColorModel.ModelStyle = Infragistics.UltraChart.Shared.Styles.ColorModels.CustomLinear iColChart.ColorModel.CustomPalette = New Color() {Color.Blue, Color.Yellow, Color.Green, Color.Purple} iColChart.Section508Compliant = True iColChart.TitleTop.Text = choice iColChart.CompositeChart.ChartAreas.Add(area)
Dim columnAppearance As New Appearance.ColumnChartAppearance columnAppearance.ColumnSpacing = 1 columnLayer.ChartTypeAppearance = columnAppearance
Dim legend As New Appearance.CompositeLegend iColChart.CompositeChart.Legends.Add(legend) legend.ChartLayers.Add(columnLayer) legend.Bounds = New Rectangle(10, 285, 375, 35)
Looks like you forgot to change a few of the variable names when you copy-pasted your blocks of code.
- In the block where you set yAxisLine properties, change yAxisColumn.RangeType to yAxisLine.RangeType
- Add yAxisLine.Labels.ItemFormat = AxisItemLabelFormat.DataValue
- In the block where you create LineLayer2, change the following:LineLayer2.AxisY = yAxisColumn toLineLayer2.AxisY = yAxisLine
- Then add the series to the line layer: LineLayer2.Series.Add(seriesLine)
For the x axis labels, if you want the labels to fit in their entirety, try increasing the x axis extent
Below is an image of what I have now (i removed the second line). The extent is causing a thick black bar to show up, but doesn't effect how the x-axis labels are displaying, also they aren't wrapping. Below the image is the code to build it.
Public Sub LoadColumnLineChart(ByRef iPanel As Infragistics.WebUI.Misc.WebPanel, ByRef iColChart As Infragistics.WebUI.UltraWebChart.UltraChart, ByRef userProfile As Array, ByVal choice As String, Optional ByVal ChartCounter As Int16 = 1) iPanel.Visible = True iColChart.Visible = True iColChart.ChartType = Styles.ChartType.Composite Dim area As New Appearance.ChartArea Dim xAxisColumn As New Appearance.AxisItem Dim aColumn As String() = Nothing Dim aLine As String() = Nothing Dim aLine1 As String() = Nothing
Dim xAxisLine As New Appearance.AxisItem xAxisLine.axisNumber = Styles.AxisNumber.X_Axis xAxisLine.DataType = Styles.AxisDataType.String xAxisLine.TickmarkInterval = 0.1 xAxisLine.SetLabelAxisType = SetLabelAxisType.ContinuousData xAxisLine.MajorGridLines.Visible = False xAxisLine.MinorGridLines.Visible = False xAxisLine.Margin.Near.MarginType = Styles.LocationType.Percentage xAxisLine.Margin.Near.Value = 2 xAxisLine.Margin.Far.MarginType = Styles.LocationType.Percentage xAxisLine.Margin.Far.Value = 2 xAxisColumn.Labels.Orientation = Styles.TextOrientation.VerticalLeftFacing xAxisColumn.Labels.SeriesLabels.Orientation = Styles.TextOrientation.VerticalLeftFacing xAxisLine.Extent = 5 area.Axes.Add(xAxisLine)
Dim yAxisLine As New Appearance.AxisItem yAxisLine.axisNumber = Styles.AxisNumber.Y2_Axis yAxisLine.DataType = Styles.AxisDataType.Numeric yAxisLine.TickmarkInterval = 0.1 yAxisLine.RangeMax = 100 yAxisLine.RangeMin = 0 yAxisLine.RangeType = Styles.AxisRangeType.Custom yAxisLine.TickmarkStyle = Styles.AxisTickStyle.Smart yAxisLine.MajorGridLines.Visible = False yAxisLine.MinorGridLines.Visible = False yAxisLine.Labels.ItemFormat = Styles.AxisItemLabelFormat.DataValue area.Axes.Add(yAxisLine) area.Bounds = New Rectangle(0, 10, 100, 90) area.BoundsMeasureType = Styles.MeasureType.Percentage
aColumn = GetChartColumnLineSeriesArray(userProfile, choice, 0) Dim seriesColumn As New Appearance.NumericSeries seriesColumn.Points.Add(New Appearance.NumericDataPoint(aColumn(0), "No Entry for Annual Meeting", False)) seriesColumn.Points.Add(New Appearance.NumericDataPoint(aColumn(1), "General Required Training", False)) seriesColumn.Points.Add(New Appearance.NumericDataPoint(aColumn(2), "Certificates not in File", False)) seriesColumn.Points.Add(New Appearance.NumericDataPoint(aColumn(3), "No Office Review", False)) seriesColumn.Points.Add(New Appearance.NumericDataPoint(aColumn(4), "Other", False)) tblChart.Rows(1).Cells(1).Text = aColumn(0) tblChart.Rows(1).Cells(2).Text = aColumn(1) tblChart.Rows(1).Cells(3).Text = aColumn(2) tblChart.Rows(1).Cells(4).Text = aColumn(3) tblChart.Rows(1).Cells(5).Text = aColumn(4)
aLine = GetChartColumnLineSeriesArray(userProfile, choice, 1) Dim seriesLine As New Appearance.NumericSeries seriesLine.Points.Add(New Appearance.NumericDataPoint(aLine(0), "No Entry for Annual Meeting", False)) seriesLine.Points.Add(New Appearance.NumericDataPoint(aLine(1), "General Required Training", False)) seriesLine.Points.Add(New Appearance.NumericDataPoint(aLine(2), "Certificates not in File", False)) seriesLine.Points.Add(New Appearance.NumericDataPoint(aLine(3), "No Office Review", False)) seriesLine.Points.Add(New Appearance.NumericDataPoint(aLine(4), "Other", False)) tblChart.Rows(2).Cells(1).Text = aLine(0) tblChart.Rows(2).Cells(2).Text = aLine(1) tblChart.Rows(2).Cells(3).Text = aLine(2) tblChart.Rows(2).Cells(4).Text = aLine(3) tblChart.Rows(2).Cells(5).Text = aLine(4)
Dim LineLayer As New Appearance.ChartLayerAppearance LineLayer.ChartType = Styles.ChartType.LineChart LineLayer.AxisX = xAxisLine LineLayer.AxisY = yAxisColumn LineLayer.ChartArea = area LineLayer.Series.Add(seriesLine) iColChart.CompositeChart.ChartLayers.Add(LineLayer)
Dim legend As New Appearance.CompositeLegend iColChart.CompositeChart.Legends.Add(legend) legend.ChartLayers.Add(columnLayer) legend.ChartLayers.Add(LineLayer) legend.Bounds = New Rectangle(10, 285, 625, 17)
You have changed the extent for the axis you used for the line layer without changing the extent for the axis for the column layer. That big bold line is acutally the axis. Both axes' extents should be equal. Labels will not wrap automatically, so I was suggesting increasing the extent (the default value is 80). To wrap the labels you might want to consider implementing a custom label renderer:https://ko.infragistics.com/help/aspnet/chart-customize-labels-using-the-irenderlabel-interface
Thanks Max. Based on the previous chart, why aren't my left and right y-axis numbers the same? The left should be numeric 0-25 and right should be percentage 0-100? Intead of both being 0-100?
That's probably because you're using the wrong axis for the line layer. If you look in my original response you'll see that you're setting the wrong axis: line layer's y axis should be YAxisLine. Instead you have set it to YAxisColumn
I also failed to change my yAxisColumn.RangeMax value back to 25. Thanks Max.