AreaChart, define smartly Y axys

Aug 3, 2013 at 7:42 PM
Edited Aug 3, 2013 at 7:48 PM
What I want to do

Image

What I have been able to do using line series chart

Image

I switched to AreaChart but the result is not superb:

Image

I guess the problem is because in area chart, I defined DataFieldY2 to be equal to zero, but I don't know how to do it another way. Here's my code:
public class DateValue
        {
            public DateTime Date { get; set; }
            public decimal Value { get; set; }
            public decimal Zero { get; set; }
        }

var points = new List<DateValue>();
points.Add(new DateValue{ Date = new DateTime(2010, 1, 1), Value = 5, Zero = 0 }); 
points.Add(new DateValue { Date = new DateTime(2010, 2, 1), Value = 45, Zero = 0 });
points.Add(new DateValue { Date = new DateTime(2010, 3, 1), Value = 16, Zero = 0 });

var _lineSeries = new AreaSeries()
                {
                    ItemsSource = points,  
                    Color = OxyColors.Blue,
                    Fill = OxyColor.FromRgb(214, 231, 242),
                    DataFieldX = "Date",
                    DataFieldY = "Value",
                    DataFieldX2 = "Date",
                    DataFieldY2 = "Zero",

            };
            model.Series.Add(_lineSeries);
Aug 3, 2013 at 10:20 PM
Edited Aug 3, 2013 at 10:20 PM
Define both a LineSeries and an AreaSeries with transparent color for the lines of the AreaSeries. This way you won't have that zero line. Other solution could be setting the DataFieldY2 to a negative number and then limiting the AbsolutMinimum of the Y-axis. To get more similar look set transparency of AreaSeries, set a grid with solid lines, move the Y axis to the right and disable minor ticks. You should also touch the borders, they seems to be LightGray.ChangeAlpha(60) or so.

For the other graph is a bit more complicated but I think you can do it with CategoryAxis using bars.

Good luck
Aug 4, 2013 at 11:15 AM
Edited Aug 4, 2013 at 11:15 AM
Define both a LineSeries and an AreaSeries with transparent color for the lines of the AreaSeries. This way you won't have that zero line
Your first solution looks simpler, can you please clarify what values do you set in your AreaSeries ? What about DataFieldX2, DateFieldY2 ?

Can you provide code example please.
Aug 4, 2013 at 1:03 PM
var myArea = new AreaSeries();
var myLine = new LineSeries();

//Do the same that you do now

myLine.Points = myArea.Points;
myArea.Color = OxyColors.Transparent;

MyModel.Series.Add(myArea);
MyModel.Series.Add(myLine);
You need to add them in proper order to achieve that the LineSeries is on top of the AreaSeries
Aug 4, 2013 at 4:26 PM
Edited Aug 4, 2013 at 4:29 PM
Hi,

I still got the same area chart which Y axis is stretched to zero:

Image

What am I missing?

Here's my full code:

         var model = new PlotModel("AAAA", CurrentOrderSold.Identifier.Name);

            var dateTimeAxis = new DateTimeAxis(AxisPosition.Bottom, "Date")
            {
                IntervalType = DateTimeIntervalType.Months,
                StringFormat = "MMM yy",

            };

            model.Axes.Add(dateTimeAxis);
            

            var points = new List<DateValue>();
            foreach (var quote in Quotes.ToList())
                points.Add(new DateValue { Date = quote.TradingDate, Value = quote.Close, Zero = 0 });

            var linearSeries = new LineSeries("Price");

            var list = points.Select(source => new DataPoint(DateTimeAxis.ToDouble(source.Date), Convert.ToDouble(source.Value)))
                            .Cast<IDataPoint>().ToList();

            linearSeries.Points = list;

            var areaSeries = new AreaSeries()
            {
                ItemsSource = points,
                Color = OxyColors.Transparent,
                DataFieldX = "Date",
                DataFieldY = "Value",
                Fill = OxyColor.FromRgb(214, 231, 242),
                DataFieldX2 = "Date",
                DataFieldY2 = "Zero",


            };

            model.Series.Add(areaSeries);
            model.Series.Add(linearSeries);
            PlotModel = model;


  public class DateValue
    {
        public DateTime Date { get; set; }
        public decimal Value { get; set; }
        public decimal Zero { get; set; }
    }
```
Aug 4, 2013 at 5:56 PM
If I understand you correctly you don't want the graph to start at 0 but at 14, as in your example. For that set the Minimum (or AbsolutMinimum) of your Y axis to 14. You may also adjust the padding to zero to avoid those white bands at each side.
Aug 4, 2013 at 6:24 PM
omg thanks a lot. I just change Zero variable to be equal to the minimum value of my Quotes
Aug 7, 2013 at 12:01 PM
The AreaSeries could also be modified so you could specify the color of the upper and lower line independently.
https://oxyplot.codeplex.com/workitem/10069