Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Chart control
  • Overview
  • Implementation
  • Animating a Chart control
  • Modifying or deleting the animation through programming
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WindowsLinuxPHPWEBDEV - Browser code
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Stored procedures
The animation of Chart controls allows you to define a dynamic display in your applications.
For example, during the first display of a Column chart, each bar seems to fly out from the X-axis. The animation is also performed when a value is modified.
The animation of the Chart control is defined in the editor, in the "Details" tab of the control description window.

Animating a Chart control

To animate a Chart control:
  1. Open the Chart control description window.
  2. In the "Details" tab:
    • WINDEV In "Animations of 2D charts", check "Enable animations".
    • AndroidiPhone/iPad In "Animations", check "Enable animations".
    • WEBDEV - Server code In "Interactivity", check "Interactive chart" if necessary, then "Enable animations".
      Remark: The "Interactive chart" option allows to create charts that react to the actions of the user. For example, in a Pie chart, the hovered section is automatically pulled out, the clicked section is positioned at the bottom of chart, the value selected in the legend is made invisible, ...
      PHP Only interactive charts are available.
  3. Validate the control description window.
  • This option is available for the following types of charts:
    • WINDEV Area, Bubble, Line, Donut, Column, MinMax, Radar, Pie, Waterfall.
    • AndroidiPhone/iPad Area, Bubble, Line, Donut, Column, Pie.
    • WEBDEV - Server codePHP Area, Line, Bar, Stacked Column, Pie, Donut, Semi-circular.
  • The animation performed on the Chart controls depends on the type of chart displayed. This animation cannot be configured.
  • By default, the animation of a Chart control lasts 30 milliseconds.
  • If a Chart control is animated, the animation will also be performed when the chart is drawn further to a change of value (grDraw).
  • Android grDraw is not a locking function. If he chart is drawn with an animation, the function will give control back as soon as the animation starts. Therefore, if several charts are drawn in the same window, the controls can be animated simultaneously.
  • WINDEViPhone/iPad The Chart controls created from version 19 are animated by default.

Modifying or deleting the animation through programming

The AnimationDuration property allows you to:
  • Find out and modify the duration of the animation in a Chart control.
    // Increase timeout
    CHART_MyChart.AnimationDuration = 2000
  • Cancel the animation of a Chart control. To do so, change the duration of the animation and give it a null value.
    // Temporarily stops the animation
    CHART_MyChart.AnimationDuration = 0
Related Examples:
WD Chart Training (WINDEV): WD Chart
[ + ] This example presents the different uses of the Chart control.
Different types of charts are presented:
- Pie
- Sunburst
- Line
- Scatter
- Column
- Area
- etc.

The main features presented here are the possibility to customize of charts from the code, as well as to fill the chart from an HFSQL data file, or in the editor.
The Chart functions Unit examples (WINDEV): The Chart functions
[ + ] Using the main chart designer features of WINDEV:
- Create a Pie, Column or Line chart
- Define the display area of a chart
- Define the chart options (legend, percentage, ...)
- Draw a line on a chart
Minimum version required
  • Version 19
This page is also available for…
Click [Add] to post a comment

Last update: 06/22/2023

Send a report | Local help