Changes
/* Added Xamarin Chart Customizing section
== Using a Chart ==
A chart can be used by creating a custom meta property of type Chart and assigning it to a MetaClass via the RelationEditor. An object of type ChartData can be assigned to this property.
{{UnderConstructionStart}}
== Xamarin Chart Customizing {{Version/XamarinSince|4.8}} ==
Since Client Version 4.8 it is also supported for Xamarin to customize charts. As there is currently no standard Chart xaml, it needs to be customized in any existing xaml, e.g. in UBIKPropertyArea. Please consider using the proper BindingContext, namely the Value of the related Chart property.
Templates for the Numeric, Category, and DateTime Axis, as well as Template Selectors for the Primary and Secondary Axis, including bindings to the related Chart properties, need to be added to the Resources as follows:
<source lang = "xml">
<Grid.Resources>
<!-- Templates for axis types -->
<DataTemplate x:Key="NumericAxisTemplate">
<chart:NumericalAxis
Interval="{Binding Interval}"
Maximum="{Binding Maximum}"
Minimum="{Binding Minimum}" >
<chart:NumericalAxis.LabelStyle>
<chart:ChartAxisLabelStyle LabelFormat="{Binding LabelFormat}"/>
</chart:NumericalAxis.LabelStyle>
<chart:NumericalAxis.Title>
<chart:ChartAxisTitle Text="{Binding Header}"/>
</chart:NumericalAxis.Title>
</chart:NumericalAxis>
</DataTemplate>
<DataTemplate x:Key="CategoryAxisTemplate">
<chart:CategoryAxis
Interval="{Binding Interval}">
<chart:CategoryAxis.Title>
<chart:ChartAxisTitle Text="{Binding Header}"/>
</chart:CategoryAxis.Title>
<chart:CategoryAxis.LabelStyle>
<chart:ChartAxisLabelStyle LabelFormat="{Binding LabelFormat}"/>
</chart:CategoryAxis.LabelStyle>
</chart:CategoryAxis>
</DataTemplate>
<DataTemplate x:Key="DateTimeAxisTemplate">
<chart:DateTimeAxis
Interval="{Binding Interval}"
IntervalType="{Binding DateTimeIntervalType, Converter={StaticResource IntToDateTimeInterval}}"
Maximum="{Binding Maximum}"
Minimum="{Binding Minimum}" >
<chart:DateTimeAxis.Title>
<chart:ChartAxisTitle Text="{Binding Header}"/>
</chart:DateTimeAxis.Title>
<chart:DateTimeAxis.LabelStyle>
<chart:ChartAxisLabelStyle LabelFormat="{Binding LabelFormat}"/>
</chart:DateTimeAxis.LabelStyle>
</chart:DateTimeAxis>
</DataTemplate>
<!-- Axis template selectors -->
<resources:ChartAxisTemplateSelector
x:Key="PrimaryAxisTemplateSelector"
CategoryAxisTemplate="{StaticResource CategoryAxisTemplate}"
DateTimeAxisTemplate="{StaticResource DateTimeAxisTemplate}"
IsPrimaryAxis="True"
NumericAxisTemplate="{StaticResource NumericAxisTemplate}" />
<resources:ChartAxisTemplateSelector
x:Key="SecondaryAxisTemplateSelector"
CategoryAxisTemplate="{StaticResource CategoryAxisTemplate}"
DateTimeAxisTemplate="{StaticResource DateTimeAxisTemplate}"
IsPrimaryAxis="False"
NumericAxisTemplate="{StaticResource NumericAxisTemplate}" />
</Grid.Resources>
</source>
To display the Chart itself and to use the resources defined above, an extended Chart control is required with bindings to the Primary and Secondary Axis Template Selectors, Series, and Thresholds Chart properties.
<source lang = "xml">
<cpl:SfChartExt
x:Name="Chart"
PrimaryAxisTemplateSelector="{StaticResource PrimaryAxisTemplateSelector}"
SecondaryAxisTemplateSelector="{StaticResource SecondaryAxisTemplateSelector}"
SeriesSource="{Binding Series}"
StripLinesSource="{Binding Thresholds}">
<chart:SfChart.Title>
<chart:ChartTitle Text="{Binding Header}" />
</chart:SfChart.Title>
<cpl:SfChartExt.StripLinesTemplate>
<DataTemplate>
<chart:NumericalStripLine
Width="2"
StrokeColor="{Binding Color, Converter={StaticResource IntToColor}}"
IsPixelWidth="True"
StrokeWidth="5"
Start="{Binding Value}" />
</DataTemplate>
</cpl:SfChartExt.StripLinesTemplate>
<cpl:SfChartExt.SeriesTemplate>
<DataTemplate>
<chart:FastLineSeries
ItemsSource="{Binding Items}"
Label="{Binding Name}"
Color="{Binding Color, Converter={StaticResource IntToColor}}"
XBindingPath="XValue"
YBindingPath="YValue">
</chart:FastLineSeries>
</DataTemplate>
</cpl:SfChartExt.SeriesTemplate>
<chart:SfChart.Legend>
<chart:ChartLegend />
</chart:SfChart.Legend>
<chart:SfChart.ChartBehaviors>
<chart:ChartZoomPanBehavior />
</chart:SfChart.ChartBehaviors>
</cpl:SfChartExt>
</source>
{{UnderConstructionEnd}}
[[Category:Client|Charts]]
[[Category:WinX|Charts]]
[[Category:Xamarin|Charts]]
[[Category:XAML|Charts]]
