Bar + Line chart with series offsets

[Mick]

I want to create a chart with bars and lines.

I want to show the line chart at an X-offset to the bar chart. I do not want the line point to show until AFTER every bar chart has been drawn.

This whiteboard chart shows what I want.

• Bars represent % change for a single period
• Lines represent the cumulative value of these percent changes as time goes on.

Is it possible to add this "offset"? I think I can do it if I manually track the points for the 2 separate series collections (bars and lines), but I am wondering if there is an easier way.

Thank you,

Mick

 

[JuanC]

Note that not only you want your lines to be offset but there are 4 values plotted for the bars but 5 for the lines. To achieve this you need something like this

Data Layer

  public class PercentChange

  {

  public string Period { get; set; }

  public double YourPortfolio { get; set; }

  public double DJIA { get; set; }

  }

  public class Growth

  {

  public double YourPortfolio { get; set; }

  public double DJIA { get; set; }

 

  public static List<Growth> BuildGrowthTable (List<PercentChange> percentChanges, double startingValue)

  {

  List<Growth> growth = new List<Growth>();

  double yourPortfolio = startingValue;

  double djia = startingValue;

  growth.Add(new Growth() { YourPortfolio = yourPortfolio, DJIA = djia });

  foreach (PercentChange percentChange in percentChanges) {

  yourPortfolio += (percentChange.YourPortfolio * yourPortfolio);

  djia += (percentChange.DJIA * djia);

  growth.Add(new Growth() { YourPortfolio = yourPortfolio, DJIA = djia });

  }

  return growth;

  }

  }

Chart Code 

 

  List<PercentChange> percentChanges = new List<PercentChange>();

  percentChanges.Add(new PercentChange() { Period = "1Q08", YourPortfolio = 0.034, DJIA = 0.05 });

  percentChanges.Add(new PercentChange() { Period = "2Q09", YourPortfolio = 0.062, DJIA = 0.035 });

  percentChanges.Add(new PercentChange() { Period = "3Q09", YourPortfolio = -0.021, DJIA = 0.03 });

  percentChanges.Add(new PercentChange() { Period = "4Q09", YourPortfolio = 0.095, DJIA = 0.07 });

  chart1.Series.Clear();

  chart1.Series.Add(new SeriesAttributes("YourPortfolio"));

  chart1.Series.Add(new SeriesAttributes("DJIA"));

  chart1.AxisX.Labels.BindingPath = "Period";

  chart1.AxisY.Labels.Format = AxisFormat.Percentage;

  chart1.AxisY.Position = AxisPosition.Far;

  chart1.AxisY.Grids.Major.Visibility = Visibility.Collapsed;

  chart1.ItemsSource = percentChanges;

  // Growth

  List<Growth> growth = Growth.BuildGrowthTable(percentChanges, 10000);

 

  Axis axisXGrowth = new Axis();

  axisXGrowth.Visibility = Visibility.Collapsed;

  axisXGrowth.AxisStyle |= AxisStyles.StartAtAxis;

  chart1.AxesX.Add(axisXGrowth);

  Axis axisYGrowth = new Axis();

  axisYGrowth.ForceZero = false;

  axisYGrowth.Min = 5000;

  axisYGrowth.Max = 20000;

  axisYGrowth.Step = 5000;

  axisYGrowth.Labels.Format = AxisFormat.Currency;

  axisYGrowth.Position = AxisPosition.Near;

  axisYGrowth.Grids.Major.Visibility = Visibility.Collapsed;

  axisYGrowth.Grids.Minor.TickMark = TickMark.None;

  chart1.AxesY.Add(axisYGrowth);

  BuildSeriesGrowth("YourPortfolio", axisXGrowth, axisYGrowth, growth, chart1.Series[0]);

  BuildSeriesGrowth("DJIA", axisXGrowth, axisYGrowth, growth, chart1.Series[1]);

  chart1.Style = ChartFX.WPF.Motifs.Basic.Style;

}

private SeriesAttributes BuildSeriesGrowth (string name, Axis axisX, Axis axisY, IEnumerable itemsSource, SeriesAttributes seriesModel)

{

  SeriesAttributes seriesGrowth = new SeriesAttributes(name);

  seriesGrowth.AxisX = axisX;

  seriesGrowth.AxisY = axisY;

  seriesGrowth.ItemsSource = itemsSource;

  seriesGrowth.Gallery = Gallery.Line;

  seriesGrowth.StrokeThickness = 2;

  seriesGrowth.Marker.Size = 10;

  // Make sure we use the same attributes as percent series

  seriesGrowth.Fill = seriesModel.Fill;

  seriesGrowth.Stroke = seriesModel.Stroke;

  seriesGrowth.Marker.Fill = seriesModel.Fill;

  seriesGrowth.Marker.Stroke = seriesModel.Stroke;

  // Hide this series from the legend box

  int seriesGrowthIndex = chart1.Series.Count;

  chart1.LegendBox.ItemAttributes[chart1.Series, seriesGrowthIndex].Visibility = Visibility.Collapsed;

  chart1.Series.Add(seriesGrowth);

  return seriesGrowth;

}

The only major difference between the chart generated by this code and your screenshot is that the 0 value for both axes will not be aligned, I will post later sample code on how to achieve this

JuanC

[Mick]

Thank you,

Mick