AreaChart, define smartly Y axys

Oystein Bjorke 5 jaar geleden 0
This discussion was imported from CodePlex

gui wrote at 2013-08-03 20:42:

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

everytimer wrote at 2013-08-03 23:20:

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

gui wrote at 2013-08-04 12:15:

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.

everytimer wrote at 2013-08-04 14:03:

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

gui wrote at 2013-08-04 17:26:

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; }
    }
```

everytimer wrote at 2013-08-04 18:56:

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.

gui wrote at 2013-08-04 19:24:

omg thanks a lot. I just change Zero variable to be equal to the minimum value of my Quotes

objo wrote at 2013-08-07 13:01:

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
CodePlex