How to apply zooming in 3D Charts using scrollbar?

2 mins read

This article describes how to zoom the SfChart3D using the ScrollBar.

The Maximum, Minimum properties and LabelCreated event of NumericalAxis3D will help to achieve zooming the SfChart3D using the scrollbar by these following steps.

Step 1: Create Scrollbars and register the ValueChanged event for getting the position and factor for zooming.

  <!--ZoomFactor-->
<Grid>
 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition/>
 </Grid.ColumnDefinitions>
  <TextBlock Text="X-Axis ZoomFactor    :"  VerticalAlignment="Center"/>
  <ScrollBar Height="15" Grid.Column="1" Orientation="Horizontal"    Margin="35,5,10,5" x:Name="zoomFactor" Minimum="0" Maximum="1" Value="1"
  ValueChanged="zoomFactor_ValueChanged"/>
</Grid>
<!--ZoomPosition-->
<Grid>
 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition/>
 </Grid.ColumnDefinitions>
  <TextBlock Text="X-Axis ZoomPosition :"  VerticalAlignment="Center"/>
  <ScrollBar Height="15" Grid.Column="1" Orientation="Horizontal" 
  x:Name="zoomPosition" Margin="35,5,10,5" Minimum="0" Maximum="1"
  ValueChanged="zoomPosition_ValueChanged"/>
</Grid>

Step 2: Update the Maximum and Minimum properties of PrimaryAxis based on Scrollbar values.

//Calculating the Maximum and Minimum properties of Axis.        
private void UpdateRange()
{
 if (zoomPosition != null && zoomFactor != null)
 {
  double start = minimum + zoomPosition.Value * maximum;
  double end = start + zoomFactor.Value * maximum;
 
  if (end > maximum)
  {
   start = start - (end - maximum);
   end = maximum;
  }
 
  if (start < minimum)
  start = minimum;
 
  xAxis.Minimum = start;
  xAxis.Maximum = end;
 }
}

Step 3: Update the LabelContent property based on the value of Position property of ChartAxisLabel in LabelCreated event.

<chart:SfChart3D.PrimaryAxis>
 <chart:NumericalAxis3D  Interval="1" EnableAutoIntervalOnZooming="False"   LabelCreated="xAxis_LabelCreated" LabelRotationAngle="-90" x:Name="xAxis" />
</chart:SfChart3D.PrimaryAxis>

// Update LabelContent property of Position of AxisLabel
private void xAxis_LabelCreated(object sender, LabelCreatedEventArgs e)
{
 if (e.AxisLabel.Position - (int)e.AxisLabel.Position < 0.5)
 {
  int position = (int)Math.Floor(e.AxisLabel.Position);
 
  if (position < months.Count() && position >= 0)
   e.AxisLabel.LabelContent = months[position].ToString();
  else
   e.AxisLabel.LabelContent = "";
 }
 else
 {
  int position = (int)Math.Ceiling(e.AxisLabel.Position);
 
  if (position < months.Count() && position >= 0)
   e.AxisLabel.LabelContent = months[position].ToString();
  else
   e.AxisLabel.LabelContent = "";
 }
}

You can download the complete sample in this GitHub Location.

Refer to this KB article, for applying default zoom and pan position in SfChart.

How to apply zooming in 3D Charts using scrollbar?

Access denied