I am building multi-axes line graphs using the RADCartesianChart control.
If I fill in the control using XAML, I get PanZoomBars as expected. See sample XAML below
<UserControl x:Class="TestTelerik.ChartViewUserControl"
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"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:TestTelerik="clr-namespace:TestTelerik"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.DataContext>
<TestTelerik:ViewModel/>
</UserControl.DataContext>
<Grid>
<telerik:RadCartesianChart Name="Chart" Zoom="{Binding Path=Zoom, Mode=TwoWay}" PanOffset="{Binding Path=PanOffset, Mode=TwoWay}">
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:LinearAxis Name="Time" Title="Time (sec)"/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis Name="Speed" Title="Speed (km/h)"/>
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.Behaviors>
<telerik:ChartPanAndZoomBehavior ZoomMode="Both" PanMode="Both"/>
<telerik:ChartTrackBallBehavior ShowIntersectionPoints="True" ShowTrackInfo="False"/>
</telerik:RadCartesianChart.Behaviors>
<telerik:ScatterLineSeries ItemsSource="{Binding Data}" YValueBinding="vCar" XValueBinding="Time" Stroke="Black" DisplayName="vCar"/>
<telerik:ScatterLineSeries ItemsSource="{Binding Data}" YValueBinding="sLap" XValueBinding="Time" Stroke="Blue">
<telerik:ScatterLineSeries.VerticalAxis>
<telerik:LinearAxis Name="sLap" Title="Distance (m)"/>
</telerik:ScatterLineSeries.VerticalAxis>
</telerik:ScatterLineSeries>
<telerik:ScatterLineSeries ItemsSource="{Binding Data}" YValueBinding="ETyreTotalFL" XValueBinding="Time" Stroke="Red">
<telerik:ScatterLineSeries.VerticalAxis>
<telerik:LinearAxis Name="ETyreTotalFL" Title="Energy (kJ)"/>
</telerik:ScatterLineSeries.VerticalAxis>
</telerik:ScatterLineSeries>
<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid MajorLinesVisibility="XY" />
</telerik:RadCartesianChart.Grid>
</telerik:RadCartesianChart>
</Grid>
</UserControl>
If I attempt the same thing in code, then the graphs appear correctly, but the PanZoomBars are missing!
Code extract from a user control code behind file showing how I am filling in the control is shown below (NOTE chart is a RadCartesianChart control specified in XAML of the UserControl).
private void UpdateFromCollection()
{
if ((XAxes != null) && XAxes.Any() && (YAxes != null) && YAxes.Any())
{
var xAxis = XAxes.First();
this.Chart.HorizontalAxis = new LinearAxis
{Name = xAxis.Name, Title = string.Format("{0} ({1})", xAxis.Name, xAxis.Units)};
this.Chart.Behaviors.Clear();
var panAndZoomBehavior = new ChartPanAndZoomBehavior();
panAndZoomBehavior.ZoomMode = ChartPanZoomMode.Both;
panAndZoomBehavior.PanMode = ChartPanZoomMode.Both;
this.Chart.Behaviors.Add(panAndZoomBehavior);
var trackBallBehaviour = new ChartTrackBallBehavior();
trackBallBehaviour.ShowIntersectionPoints = true;
trackBallBehaviour.ShowTrackInfo = false;
this.Chart.Behaviors.Add(trackBallBehaviour);
this.Chart.Series.Clear();
bool firstYAxis = true;
foreach (var yAxis in YAxes)
{
var scatterLineSeries = new ScatterLineSeries {DisplayName = yAxis.Name};
scatterLineSeries.Stroke = new SolidColorBrush(yAxis.Colour);
for (var i = 0; i < xAxis.Data.Count; i++)
{
var sp = new ScatterDataPoint { XValue = xAxis.Data[i], YValue = yAxis.Data[i] };
scatterLineSeries.DataPoints.Add(sp);
}
if (firstYAxis)
{
this.Chart.VerticalAxis = new LinearAxis() { Name = yAxis.Name, Title = string.Format("{0} ({1})", yAxis.Name, yAxis.Units) };
firstYAxis = false;
}
else
{
scatterLineSeries.VerticalAxis = new LinearAxis() { Name = yAxis.Name, Title = string.Format("{0} ({1})", yAxis.Name, yAxis.Units) };
}
this.Chart.Series.Add(scatterLineSeries);
}
}
}
Is there something else I have to specify in order to get the PanZoomBars included?
Regards
Craig Littlewood
If I fill in the control using XAML, I get PanZoomBars as expected. See sample XAML below
<UserControl x:Class="TestTelerik.ChartViewUserControl"
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"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:TestTelerik="clr-namespace:TestTelerik"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.DataContext>
<TestTelerik:ViewModel/>
</UserControl.DataContext>
<Grid>
<telerik:RadCartesianChart Name="Chart" Zoom="{Binding Path=Zoom, Mode=TwoWay}" PanOffset="{Binding Path=PanOffset, Mode=TwoWay}">
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:LinearAxis Name="Time" Title="Time (sec)"/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis Name="Speed" Title="Speed (km/h)"/>
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.Behaviors>
<telerik:ChartPanAndZoomBehavior ZoomMode="Both" PanMode="Both"/>
<telerik:ChartTrackBallBehavior ShowIntersectionPoints="True" ShowTrackInfo="False"/>
</telerik:RadCartesianChart.Behaviors>
<telerik:ScatterLineSeries ItemsSource="{Binding Data}" YValueBinding="vCar" XValueBinding="Time" Stroke="Black" DisplayName="vCar"/>
<telerik:ScatterLineSeries ItemsSource="{Binding Data}" YValueBinding="sLap" XValueBinding="Time" Stroke="Blue">
<telerik:ScatterLineSeries.VerticalAxis>
<telerik:LinearAxis Name="sLap" Title="Distance (m)"/>
</telerik:ScatterLineSeries.VerticalAxis>
</telerik:ScatterLineSeries>
<telerik:ScatterLineSeries ItemsSource="{Binding Data}" YValueBinding="ETyreTotalFL" XValueBinding="Time" Stroke="Red">
<telerik:ScatterLineSeries.VerticalAxis>
<telerik:LinearAxis Name="ETyreTotalFL" Title="Energy (kJ)"/>
</telerik:ScatterLineSeries.VerticalAxis>
</telerik:ScatterLineSeries>
<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid MajorLinesVisibility="XY" />
</telerik:RadCartesianChart.Grid>
</telerik:RadCartesianChart>
</Grid>
</UserControl>
Code extract from a user control code behind file showing how I am filling in the control is shown below (NOTE chart is a RadCartesianChart control specified in XAML of the UserControl).
private void UpdateFromCollection()
{
if ((XAxes != null) && XAxes.Any() && (YAxes != null) && YAxes.Any())
{
var xAxis = XAxes.First();
this.Chart.HorizontalAxis = new LinearAxis
{Name = xAxis.Name, Title = string.Format("{0} ({1})", xAxis.Name, xAxis.Units)};
this.Chart.Behaviors.Clear();
var panAndZoomBehavior = new ChartPanAndZoomBehavior();
panAndZoomBehavior.ZoomMode = ChartPanZoomMode.Both;
panAndZoomBehavior.PanMode = ChartPanZoomMode.Both;
this.Chart.Behaviors.Add(panAndZoomBehavior);
var trackBallBehaviour = new ChartTrackBallBehavior();
trackBallBehaviour.ShowIntersectionPoints = true;
trackBallBehaviour.ShowTrackInfo = false;
this.Chart.Behaviors.Add(trackBallBehaviour);
this.Chart.Series.Clear();
bool firstYAxis = true;
foreach (var yAxis in YAxes)
{
var scatterLineSeries = new ScatterLineSeries {DisplayName = yAxis.Name};
scatterLineSeries.Stroke = new SolidColorBrush(yAxis.Colour);
for (var i = 0; i < xAxis.Data.Count; i++)
{
var sp = new ScatterDataPoint { XValue = xAxis.Data[i], YValue = yAxis.Data[i] };
scatterLineSeries.DataPoints.Add(sp);
}
if (firstYAxis)
{
this.Chart.VerticalAxis = new LinearAxis() { Name = yAxis.Name, Title = string.Format("{0} ({1})", yAxis.Name, yAxis.Units) };
firstYAxis = false;
}
else
{
scatterLineSeries.VerticalAxis = new LinearAxis() { Name = yAxis.Name, Title = string.Format("{0} ({1})", yAxis.Name, yAxis.Units) };
}
this.Chart.Series.Add(scatterLineSeries);
}
}
}
Is there something else I have to specify in order to get the PanZoomBars included?
Regards
Craig Littlewood