The gross domestic product (composition by sector) of all countries can be viewed as pie chart. Pick a country from the listbox - use the character buttons or the scroll buttons for navigation.
There are three displaying modes: single country and either comparing two or up to four countries. For multiple panels: A little dot indicates which panel has the focus. Click on panel to change it.
This sample also introduces a feature for left-handed persons: click on the left half of the title bar to mirror certain components of the application; like the listbox, the scroll buttons and the chart display area. Clicking on the right half of the title bar switches those components back.
graph that is updated dynamically; how it basically works: request via getUrl(), a php-script generates random data and returns it as object in literal notation (JSON), which then is processed client-side with the eval()-function
features: request-rate can be set from 1 up to 30 secs, graph scrolls up automatically when bottom is reached, three graph-types: polylines,dots or both, tooltip showing the value when moving over a dot (can be turned off)
simulates how the position of several objects is retrieved and displayed - move over object to show tooltip
train/track animation using custom font and textPath
creating curly curves (paths) with custom font
placing markers on path using textPath and custom font
shows one solution for the game 'Klotski'; animation with navigation buttons: play/pause, reset, step back/forward
algorithm for rotating an ellipse built from a path so it is congruent to the original ellipse
using native shapes and png-image as background pattern
two handles and a rectangle: you can move the rectangle in between the handles, when you move the handles, the rectangle keeps the position relative to the handles
path with icons
paths patterns made of shapes created with script
displays several values, indicating maximum/minimum, using a gradient in the background to show different states
animating a shape, changing action by using the end attribute
hatchings created by using patterns
moving a circle within bounds using the arrow keys; controlling speed, size and direction; pressing two keys to move diagionally
an object (circle) is created at a random starting position; it gets an unique ID and random color; it then can be moved with the arrow keys; the position is sent to the server every second and stored in a database; also open the realtime monitor to watch your circle move; then try opening several tabs/windows of the cockpit and see how the monitor fills up
here you can watch the objects moving that are created when a realtime cockpit window is opened; the monitor calls the server every second to request the IDs and current positions of all objects; the object will disappear a few seconds after the cockpit window has been closed
retrieving json data using eval to process it; then displaying data
retrieving xml data parsing it client-side; then displaying data
displaying sulphur concentrations on a map; data stored as JSON; tooltip; legend
meet the Simpsons and the Flanders hitting the toogle buttons; one uses declarative animation (SMIL), the other works with script
yes, boring squares - but you will find many interesting techniques inside, so make sure to read the comments in the source code!
switching the coordinates and the gradient units of a linear gradient on the fly
make-some-pie-on-the-fly (1): getting familiar with the elliptical arc command
make-some-pie-on-the-fly (2): playing with different starting positions and sizes
make-some-pie-on-the-fly (3): pieChart presentation