PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

  • Overview
  • Implementation
  • Animating a Chart control
  • Modifying or deleting the animation by programming
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview
The animation of the Chart control allows you to propose 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 description window of control.
Versions 20 and later
Android This feature is now available for the android applications.
WEBDEV - Server codeWindowsLinux This feature is now available for the WEBDEV sites.
New in version 20
Android This feature is now available for the android applications.
WEBDEV - Server codeWindowsLinux This feature is now available for the WEBDEV sites.
Android This feature is now available for the android applications.
WEBDEV - Server codeWindowsLinux This feature is now available for the WEBDEV sites.
Versions 23 and later
PHP This feature is now available for the PHP sites.
New in version 23
PHP This feature is now available for the PHP sites.
PHP This feature is now available for the PHP sites.
Implementation

Animating a Chart control

To animate a Chart control:
  1. Display the description window of Chart control.
  2. In the "Details" tab:
    • WINDEV In the "Animations of 2D charts" area, check "Enable the animations".
    • iPhone/iPad In the "Animations" area, check "Enable the animations". AndroidiPhone/iPad In the "Animations" area, check "Enable the animations".
    • Versions 20 and later
      WEBDEV - Server code In the "Interactivity" area, check "Interactive chart" if necessary then "Enable the animations".
      Note: The "Interactive chart" option is used to get charts that react to the actions of Web 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 the interactive charts are available.
      New in version 20
      WEBDEV - Server code In the "Interactivity" area, check "Interactive chart" if necessary then "Enable the animations".
      Note: The "Interactive chart" option is used to get charts that react to the actions of Web 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 the interactive charts are available.
      WEBDEV - Server code In the "Interactivity" area, check "Interactive chart" if necessary then "Enable the animations".
      Note: The "Interactive chart" option is used to get charts that react to the actions of Web 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 the interactive charts are available.
  3. Validate the description window of control.
Notes:
  • 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, Bar, Pie.
    • WEBDEV - Server codePHP Area, Line, Bar, Stacked Bar, 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 by programming

..AnimationDuration is used to:
  • Find out and modify the duration of the animation performed in a Chart control.
    // Increase the time-out
    CHART_MyChart..AnimationDuration = 2000
  • Canceling 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 educational example present different uses of the chart control.
The following charts are presented:
- Semi-circular
- Donut
- Pie
- Sunburst
- Line
- Scatter
- 3D Scatter
- Column
- Area
- Bubble
- Radar
- Funnel
- Surface
- Waterfall
- Composite

The main features presented in this example are the ability to customize the charts by programming as well as the method used to fill a chart from a HFSQL 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 required version
  • Version 19
This page is also available for…
Comments
Click [Add] to post a comment