Skip to content

This example demonstrates how to apply zooming in 3D Charts using scrollbar

Notifications You must be signed in to change notification settings

SyncfusionExamples/How-to-apply-zooming-in-3D-Charts-using-scrollbar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 

Repository files navigation

How to apply zooming in 3D Charts using scrollbar?

This example demonstrates 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 = "";
    }
}

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

KB article - How to apply zooming in 3D Charts using scrollbar?

See also

How to display the axis labels in a particular format

How to define ticker labels of custom axis

How to display the visible range of labels while zooming

About

This example demonstrates how to apply zooming in 3D Charts using scrollbar

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published