I have a set of data that for each date, I have 2 pieces of numeric data. For example:
Date Value1 Value2
01/01/2010 10.5 2
02/01/2010 20.6 4
03/01/2010 30.7 6
04/01/2010 40.8 8
I am trying to represent this on a line chart where "Value1" is plotted against the Y-Axis and "Value2" is plotted against the Y2-Axis. I am using the series feature of the chart. I can create a NumericTimeSeries and add NumericTimeDataPoints using the date and the value in the "Value1" column. I then add this NumericTimeSeries to the chart's Series. The time series line show up like expected.
I am also creating a different set of NumericTimeSeries with NumericTimeDataPoints using the same dates and the value from the "Value2" column.
How do I show this time series in the same chart so that "Value2" uses the Y2 axis instead of the Y axis that the "Value1" column is using?
Using only NumericTimeSeries won't be enough in this case. You will have to create a composite chart with 2 separate y axes, like so:DataTable chartData = new DataTable();chartData.Columns.Add("Date", typeof(DateTime));chartData.Columns.Add("Value1", typeof(double));chartData.Columns.Add("Value2", typeof(double));
chartData.Rows.Add(new object[] { DateTime.Parse("1/1/2010"), 1, 2});chartData.Rows.Add(new object[] { DateTime.Parse("2/1/2010"), 2, 4 });chartData.Rows.Add(new object[] { DateTime.Parse("3/1/2010"), 4, 6 });chartData.Rows.Add(new object[] { DateTime.Parse("4/1/2010"), 8, 8 });
NumericTimeSeries series1 = new NumericTimeSeries();series1.Data.DataSource = chartData;series1.Data.TimeValueColumn = "Date";series1.Data.ValueColumn = "Value1";series1.DataBind();
NumericTimeSeries series2 = new NumericTimeSeries();series2.Data.DataSource = chartData;series2.Data.TimeValueColumn = "Date";series2.Data.ValueColumn = "Value2";series2.DataBind();
ultraChart1.ChartType = ChartType.Composite;
ultraChart1.CompositeChart.Series.Add(series1);ultraChart1.CompositeChart.Series.Add(series2);
ChartArea area = new ChartArea();ultraChart1.CompositeChart.ChartAreas.Add(area);
AxisItem xAxis = new AxisItem(ultraChart1, AxisNumber.X_Axis);xAxis.DataType = AxisDataType.Time;xAxis.Labels.ItemFormat = AxisItemLabelFormat.ItemLabel;
AxisItem yAxis = new AxisItem(ultraChart1, AxisNumber.Y_Axis);yAxis.DataType = AxisDataType.Numeric;yAxis.Labels.ItemFormat = AxisItemLabelFormat.DataValue;
AxisItem y2Axis = new AxisItem(ultraChart1, AxisNumber.Y2_Axis);yAxis.DataType = AxisDataType.Numeric;y2Axis.Labels.ItemFormat = AxisItemLabelFormat.DataValue;
area.Axes.Add(xAxis);area.Axes.Add(yAxis);area.Axes.Add(y2Axis);
ChartLayerAppearance lineLayer1 = new ChartLayerAppearance();lineLayer1.ChartArea = area;lineLayer1.AxisX = xAxis;lineLayer1.AxisY = yAxis;lineLayer1.ChartType = ChartType.LineChart;
ChartLayerAppearance lineLayer2 = new ChartLayerAppearance();lineLayer2.ChartArea = area;lineLayer2.AxisX = xAxis;lineLayer2.AxisY = y2Axis;lineLayer2.ChartType = ChartType.LineChart;
lineLayer1.Series.Add(series1);lineLayer2.Series.Add(series2);
ultraChart1.CompositeChart.ChartLayers.Add(lineLayer1);ultraChart1.CompositeChart.ChartLayers.Add(lineLayer2);
I see now. It seems to be working correctly. Let me ask this though: Prior to using the Y2 axis, this was a LineChart, not a CompositeChart. I was using LineAppearance to make the lines look a certain way.
ultraChart1.ColorModel.ModelStyle = Styles.ColorModels.CustomLinear
ultraChart1.ColorModel.CustomPalette = New Color() {Color.Blue, Color.Red, Color.Lime}
Dim lineAppMkt As New LineAppearance()
lineAppMkt.LineStyle.DrawStyle = LineDrawStyle.Solid
lineAppMkt.Thickness = 1
lineAppMkt.IconAppearance.Icon = SymbolIcon.Diamond
lineAppMkt.IconAppearance.IconSize = SymbolIconSize.Medium
ultraChart1.LineChart.LineAppearances.Add(lineAppMkt)
Dim lineAppModel As New LineAppearance()
lineAppModel.LineStyle.DrawStyle = LineDrawStyle.Solid
lineAppModel.Thickness = 1
lineAppModel.IconAppearance.Icon = SymbolIcon.Triangle
lineAppModel.IconAppearance.IconSize = SymbolIconSize.Medium
ultraChart1.LineChart.LineAppearances.Add(lineAppModel)
Dim lineAppAvgMkt As New LineAppearance()
lineAppAvgMkt.LineStyle.DrawStyle = LineDrawStyle.Solid
lineAppAvgMkt.Thickness = 1
lineAppAvgMkt.IconAppearance.Icon = SymbolIcon.Circle
lineAppAvgMkt.IconAppearance.IconSize = SymbolIconSize.Medium
ultraChart1.LineChart.LineAppearances.Add(lineAppAvgMkt)
This gave me me 3 lines (red, blue, and lime green in that order with the line styles defined in the order above. If I use this same code, it does not seem to work for the composite chart.
Also, I had a legend showing up when this was just a LineChart by doing:
ultraChart1.Legend.DataAssociation = ChartTypeData.LineData
ultraChart1.Legend.SpanPercentage = 15
ultraChart1.Legend.BorderStyle = LineDrawStyle.Solid
ultraChart1.Legend.BorderColor = Color.Black
ultraChart1.Legend.Location = LegendLocation.Bottom
ultraChart1.LineChart.DrawStyle = Styles.LineDrawStyle.Solid
The legend no longer shows up.
Thanks.
Most properties that you have set on the chart directly will have no effect on a composite chart. You will have to use the properties on the layers themselves and basically everything under chart.CompositeChart property. For example, this is how you set line appearances in a composite chart:LineAppearance lineApp = new LineAppearance();lineApp.IconAppearance.Icon = SymbolIcon.Circle;lineApp.IconAppearance.IconSize = SymbolIconSize.Large;
LineChartAppearance lineLayerAppearance = new LineChartAppearance();lineLayerAppearance.LineAppearances.Add(lineApp);
ChartLayerAppearance lineLayer = new ChartLayerAppearance();lineLayer.ChartType = ChartType.LineChart;lineLayer.ChartTypeAppearance = lineLayerAppearance;
Composite chart also uses a composite legend in place of a regular legend. You can create one and add it to the chart. Don't forget to set legend bounds and a list of layers that you want the legend to show:CompositeLegend legend = new CompositeLegend();legend.Bounds = new Rectangle(0, 0, 100, 100);legend.BoundsMeasureType = MeasureType.Pixels;legend.ChartLayers.Add(myLayer1);legend.ChartLayers.Add(myLayer2);ultraChart1.CompositeChart.Legends.Add(legend);