Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
875
Line chart using Y and Y2 axis
posted

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?

Parents
No Data
Reply
  • 26458
    Suggested Answer
    Offline posted

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

Children