Hello All,
I have an XML datasource like this:
<G X="3820.7966797098697" Y="20.5717142857143" /> <G X="3821.79658373428" Y="21.586" /> <G X="3822.79648775869" Y="21.9354285714286" /> <G X="3823.7963917831" Y="21.5794285714286" /> <G X="3824.79629580751" Y="19.6988571428571" />
...
The best series that represents the data above is a ScatterLineSeries. Anyway I have to fill the area below the ScatterLineSeries with a different color for each series, like a Category Area Series.So, If I use the ScatterLineSeries I can't fill the area, If I use Area Series, I can't use NumericXAxis.Any idea?
Thank you for your support
Hello Giovanni,
Thank you for your post!
Unfortunately, in the Infragistics Ultimate UI for Xamarin product, there does not exist a series that shades the area under the curve like the Category AreaSeries does, and so I would have to recommend that you utilize the AreaSeries for this behavior at the moment.
An issue with using the CategoryXAxis in this case is that the way the points are plotted may not be an accurate representation of your data in the X-direction, as the points will be evenly spaced. As such, although it may be a bit of a "thinking-outside-of-the-box" solution, I would actually recommend utilizing a CategoryDateTimeXAxis and converting your X-values to DateTime elements for use with the chart. This may sound odd, but if you were to do something like DateTime.AddDays(XValue) in this case and use the CategoryDateTimeXAxis, you would receive a continuous representation of your data, while still being able to use the AreaSeries. You could then use the FormatLabel event of the CategoryDateTimeXAxis and return a number rather than the DateTime value that would normally be shown. This number would be the difference in Days if using the DateTime.AddDays code above between DateTime.Today and the actual e.Item.DateProperty. You can read about utilizing the FormatLabel event in our online documentation, here: https://www.infragistics.com/help/xamarin/datachart-axis-label-format.
If you would like to see an AreaSeries implemented to the XamDataChart that works with the NumericXAxis and NumericYAxis, I would recommend suggesting a new product idea for this by e-mailing ideas@infragistics.com. This will place you in direct communication with our product management teams who plan and prioritize upcoming features and development based on community and user feedback.
Please let me know if you have any other questions or concerns on this matter.
Sincerely,AndrewAssociate Developer
Thank you for your support Andrew but your workaround is a little bit difficult. I don't understand when you write "do something like DateTime.AddDays(XValue)..:"May you post an example please?
In the example above, the DateTime.AddDays(XValue) would take your "X" value from your XML data source and store it in a separate data item that has a DateTime property that would be used with the DateTimeMemberPath of a CategoryDateTimeXAxis.
I am attaching a sample project that demonstrates the ideas mentioned above. The top XamDataChart will be using a CategoryDateTimeXAxis with an AreaSeries, whereas the bottom one uses two Numeric axes with a ScatterLineSeries so that you can see that the generated shape is essentially the same.
I hope this helps. Please let me know if you have any other questions or concerns on this matter.
7848.XFChartDateDemo.zip
Hi Andrew,
Thanks a lot for your quick reply. Everything is clear but I plotted two series in single chart with the same datasource and the same MinimumValue property: AreaSeries (with your workaround) and ScatterLineSeries. I see a little difference between series, they are not exactly overlapped. Why?
Afterwards I need to align many charts (AreaSeries and ScatterLineSeries) with the same data points on xAxis. So I need to align labels (see attachment).Is there a workaround for this?
Thanks in advance for all you do.
It appears that this is likely a slight difference between the way that the NumericXAxis and the CategoryDateTimeXAxis perform their auto-range logic. In order to work around this, I would recommend that you set the MinimumValue and MaximumValue properties of your axis.
The NumericXAxis will take a double for its Minimum/MaximumValue property, whereas the CategoryDateTimeXAxis will take a DateTime. Using the data structure I had provided you, the labels should align if you set these to the same "formatted" value. For example, if your NumericXAxis had a MinimumValue of 300, with the data structure I sent you, the MinimumValue of the CategoryDateTimeXAxis would be DateTime.Today.AddDays(300).
thank you for your great support. I set minimum/maximum value property as you wrote and now the generated shape is the same of a ScatterLineSeries. Instead of use the FormatLabel event, I use a second XAxis as follow:
<ig:CategoryDateTimeXAxis x:Name="XAxis1" ItemsSource="{StaticResource Data}" DateTimeMemberPath="DateTimeConversion" LabelVisibility="Collapsed"/><ig:NumericXAxis x:Name="XAxis2" LabelVisibility="Visible"/><ig:NumericYAxis x:Name="YAxis"/>
In code behindthis.XAxis2.MinimumValue = minValue;this.XAxis2.MaximumValue = maxValue;
In this case I use the first XAxis to build the AreaSeries correctly, the second one to format label like a numeric axis. I hope this is the correct way.
Thank you for your update. I am glad that setting the minimum/maximum value properties of your axes is working for you.
Both the NumericXAxis and CategoryDateTimeXAxis are continuous in their displays, and so I see nothing wrong with the approach you are taking as long as the minimum and maximum values are set to the "same" value in this case.
Please let me know if you have any other questions or concerns on this matter