Chart Control Example - Infragistics

gistfile1.xml

<igFramework:SampleContainer x:Class="IGDataChart.Samples.Display.Axes.MultipleAxes"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      mc:Ignorable="d"
      d:DesignHeight="500" d:DesignWidth="700"
      Title="MultipleAxes Page"
      xmlns:ig="http://schemas.infragistics.com/xaml"
      xmlns:igFramework="clr-namespace:Infragistics.Samples.Framework;assembly=Infragistics.Samples.Framework"
      xmlns:models="clr-namespace:Infragistics.Samples.Shared.Models;assembly=Infragistics.Samples.Shared">

    <igFramework:SampleContainer.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/IGDataChart;component/IG.xamDataChart.xaml" />
                <!-- this loads IG styles for MS controls -->
                <ResourceDictionary Source="/IGDataChart;component/Assets/Global.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </igFramework:SampleContainer.Resources>

    <Grid x:Name="LayoutRoot"
          Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <ig:XamDataChart x:Name="xmDataChart"
                         >
            <ig:XamDataChart.DataContext>
                <models:StockMarketDataCollection />
            </ig:XamDataChart.DataContext>

            <!--#BEGIN SNIPPET#-->
            <!-- ========================================================================== -->
            <ig:XamDataChart.Axes>
                <ig:CategoryXAxis x:Name="xmDateXAxis" ItemsSource="{Binding}" Label="{}{Date:dd MMM}">
                    <ig:CategoryXAxis.LabelSettings>
                        <ig:AxisLabelSettings Location="OutsideBottom" Extent="30" VerticalAlignment="Center" />
                    </ig:CategoryXAxis.LabelSettings>
                </ig:CategoryXAxis>
                <ig:NumericYAxis x:Name="xmPriceYAxis">
                    <ig:NumericYAxis.LabelSettings>
                        <ig:AxisLabelSettings Location="OutsideLeft" Extent="75" />
                    </ig:NumericYAxis.LabelSettings>
                </ig:NumericYAxis>
                <ig:NumericYAxis x:Name="xmVolumeYAxis" Strip="Transparent" MajorStroke="Transparent">
                    <ig:NumericYAxis.LabelSettings>
                        <ig:AxisLabelSettings Location="OutsideRight" Extent="45" />
                    </ig:NumericYAxis.LabelSettings>
                </ig:NumericYAxis>
            </ig:XamDataChart.Axes>
            <!-- ========================================================================== -->
            <!--#END SNIPPET#-->

            <ig:XamDataChart.Series>
                <ig:LineSeries Title="Volume Series"
                               MarkerType="None"
                               ItemsSource="{Binding}"
                               ValueMemberPath="Volume"
                               Thickness="5"
                               XAxis="{Binding ElementName=xmDateXAxis}"
                               YAxis="{Binding ElementName=xmVolumeYAxis}">
                </ig:LineSeries>
                <ig:FinancialPriceSeries Title="Price Series"
                                         DisplayType="Candlestick"

                                         ItemsSource="{Binding}"
                                         OpenMemberPath="Open"
                                         CloseMemberPath="Close"
                                         HighMemberPath="High"
                                         LowMemberPath="Low"
                                         VolumeMemberPath="Volume"
                                         XAxis="{Binding ElementName=xmDateXAxis}"
                                         YAxis="{Binding ElementName=xmPriceYAxis}">
                </ig:FinancialPriceSeries>
            </ig:XamDataChart.Series>
        </ig:XamDataChart>

    </Grid>
</igFramework:SampleContainer>