Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Using Multiple Axes

The XamDataChart™ control use Axis objects to define axis visuals . You can add multiple axes in the same chart plot area. For each added axis in the chart control, you can specify the location in relationship to chart plot area. For more information on this, please refer to the Configuring Axis Label Settings topic. In addition to support of multiple axes, you can share axes between Series defined in the chart control.

In the following code example shows how to add two NumericYAxis objects on the left and right side of the chart plot area and hwo to share CategoryXAxis between LineSeries and FinancialPriceSeries series.

In XAML:

<ig:XamDataChart x:Name="DataChart"  >
    <!-- ========================================================================== -->
    <ig:XamDataChart.Axes>
        <ig:CategoryXAxis x:Name="xAxis" ItemsSource="{Binding}"Label="{}{Date:MMM dd}">
            <ig:CategoryXAxis.LabelSettings>
                <ig:AxisLabelSettings Location="OutsideTop" />
            </ig:CategoryXAxis.LabelSettings>
        </ig:CategoryXAxis>
        <ig:NumericYAxis x:Name="yAxis1">
            <ig:NumericYAxis.LabelSettings>
                <ig:AxisLabelSettings Location="OutsideLeft" />
            </ig:NumericYAxis.LabelSettings>
        </ig:NumericYAxis>
        <ig:NumericYAxis x:Name="yAxis2" >
            <ig:NumericYAxis.LabelSettings>
                <ig:AxisLabelSettings Location="OutsideRight" />
            </ig:NumericYAxis.LabelSettings>
        </ig:NumericYAxis>
    </ig:XamDataChart.Axes>
    <!-- ========================================================================== -->
    <ig:XamDataChart.Series>
        <ig:LineSeries XAxis="{Binding ElementName=xAxis}"
                      YAxis="{Binding ElementName=yAxis2}">
        </ig:LineSeries>
        <ig:FinancialPriceSeries XAxis="{Binding ElementName=xAxis}"
                               YAxis="{Binding ElementName=yAxis1}">
        </ig:FinancialPriceSeries>
    </ig:XamDataChart.Series>
</ig:XamDataChart>

In C#:

var DataChart = new XamDataChart();

var xAxis = new CategoryXAxis()
{
    ItemsSource = data,
    Label = "Date"
};
var yAxis1 = new NumericYAxis()
{
    LabelLocation = AxisLabelsLocation.OutsideLeft
};
var yAxis2 = new NumericYAxis()
{
    LabelLocation = AxisLabelsLocation.OutsideRight
};
var series1 = new LineSeries()
{
    XAxis = xAxis,
    YAxis = yAxis2,
    ItemsSource = data,
    ValueMemberPath="Volume"
};
var series2 = new FinancialPriceSeries()
{
    XAxis = xAxis,
    YAxis = yAxis1,
    ItemsSource = data,
    CloseMemberPath = "Close",
    OpenMemberPath = "Open",
    HighMemberPath = "High",
    LowMemberPath = "Low"
};

DataChart.Axes.Add(yAxis1);
DataChart.Axes.Add(yAxis2);
DataChart.Axes.Add(xAxis);
DataChart.Series.Add(series1);
DataChart.Series.Add(series2);

In Visual Basic:

Dim xAxis As New CategoryXAxis()
xAxis.DataSource = data
xAxis.ItemsSource = data
xAxis.Label = "{Date}"
xAxis.Label = "Date"

Dim yAxis1 As New NumericYAxis()
yAxis1.LabelLocation = AxisLabelsLocation.OutsideLeft
yAxis1.LabelSettings.Location = AxisLabelsLocation.OutsideLeft

Dim yAxis2 = new NumericYAxis()
yAxis2.LabelLocation = AxisLabelsLocation.OutsideRight
yAxis2.LabelSettings.Location = AxisLabelsLocation.OutsideRight

Dim series1 As New LineSeries()
series1.XAxis = xAxis
series1.YAxis = yAxis2

Dim series2 As New FinancialPriceSeries()
series2.XAxis = xAxis
series2.YAxis = yAxis1

DataChart.Axes.Add(yAxis1)
DataChart.Axes.Add(yAxis2)
DataChart.Axes.Add(xAxis)
DataChart.Series.Add(series1)
DataChart.Series.Add(series2)

The following image shows how the chart control will look with two NumericYAxis axes and one CategoryXAxis shared between two series.

xamWebDataChart Axes Multiple Axes 01.png

Related Content: