<Page x:Class="Page1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:example="clr-namespace:WPFLiveDataVBExample"
        xmlns:telerikQuickStart="clr-namespace:Telerik.Windows.Controls.QuickStart;assembly=Telerik.Windows.Controls"
        Loaded="UserControl_Loaded" Unloaded="UserControl_Unloaded"
      Title="Page1">
    <Page.Resources>
        <example:ExampleViewModel x:Key="DataContext"/>
    </Page.Resources>
    <Grid>
        <Border telerikQuickStart:ThemeAwareBackgroundBehavior.IsEnabled="True">
            <telerik:RadChart x:Name="RadChart1" ItemsSource="{Binding Source={StaticResource DataContext}, Path=Data}">
                <telerik:RadChart.SeriesMappings>
                    <telerik:SeriesMapping LegendLabel="CPU Utilization">
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:AreaSeriesDefinition ItemLabelFormat="Time: #X{hh:mm:ss}" ShowItemLabels="False" ShowPointMarks="False">
                                <telerik:AreaSeriesDefinition.Appearance>
                                    <telerik:SeriesAppearanceSettings Fill="#800080FF" Stroke="#FF0080FF" StrokeThickness="1" />
                                </telerik:AreaSeriesDefinition.Appearance>
                            </telerik:AreaSeriesDefinition>
                        </telerik:SeriesMapping.SeriesDefinition>

                        <telerik:ItemMapping FieldName="Time" DataPointMember="XValue" />
                        <telerik:ItemMapping FieldName="CPULoad" DataPointMember="YValue" />
                    </telerik:SeriesMapping>
                    <telerik:SeriesMapping LegendLabel="Memory Usage">
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:LineSeriesDefinition ShowItemLabels="False" ShowPointMarks="False" AxisName="RAM" />
                        </telerik:SeriesMapping.SeriesDefinition>

                        <telerik:ItemMapping FieldName="Time" DataPointMember="XValue" />
                        <telerik:ItemMapping FieldName="MemUsage" DataPointMember="YValue" />
                    </telerik:SeriesMapping>
                </telerik:RadChart.SeriesMappings>

                <telerik:RadChart.DefaultView>
                    <telerik:ChartDefaultView>
                        <telerik:ChartDefaultView.ChartArea>
                            <telerik:ChartArea LegendName="ChartLegend1"
                                               NoDataString="Waiting for data..." 
                                               EnableAnimations="False">
                                <telerik:ChartArea.AxisX>
                                    <telerik:AxisX DefaultLabelFormat="#VAL{hh:mm:ss}" LabelRotationAngle="270" LabelStep="2" 
                                                   LayoutMode="Normal" Title="Time" AutoRange="False"
                                                   MinValue="{Binding Source={StaticResource DataContext}, Path=AxisXMinValue}"
                                                   MaxValue="{Binding Source={StaticResource DataContext}, Path=AxisXMaxValue}"
                                                   Step="{Binding Source={StaticResource DataContext}, Path=AxisXStep}" />
                                </telerik:ChartArea.AxisX>
                                <telerik:ChartArea.AxisY>
                                    <telerik:AxisY DefaultLabelFormat="#VAL{p2}" Title="CPU Utilization in %"
                                                   AutoRange="False" MinValue="0" MaxValue="1" Step="0.2" />
                                </telerik:ChartArea.AxisY>
                                <telerik:ChartArea.AdditionalYAxes>
                                    <telerik:AxisY AxisName="RAM" Title="Memory Usage in MB" DefaultLabelFormat="#VAL MB"
                                                   AutoRange="False" MinValue="70" MaxValue="230" Step="20" />
                                </telerik:ChartArea.AdditionalYAxes>
                            </telerik:ChartArea>
                        </telerik:ChartDefaultView.ChartArea>
                        <telerik:ChartDefaultView.ChartLegend>
                            <telerik:ChartLegend x:Name="ChartLegend1" />
                        </telerik:ChartDefaultView.ChartLegend>
                        <telerik:ChartDefaultView.ChartTitle>
                            <telerik:ChartTitle Content="Server Load" />
                        </telerik:ChartDefaultView.ChartTitle>
                    </telerik:ChartDefaultView>
                </telerik:RadChart.DefaultView>
            </telerik:RadChart>
        </Border>
    </Grid>
</Page>

