This is actually part of a series that includes Google Charts API and Processing.js examples.
Annual Data Graph Applet: This is an embedded interactive Java applet that demonstrates a simple annual data graph. Click and drag the date slider at the bottom with the left mouse button to control the amount of the year shown and the start-date.
Keyboard Controls
TAB/ENTER Key:
Cycles the node focus between the start day, the end day and the scrolling block. Moving the mouse to hover over these nodes will affect the current focus, but you can avoid this by locating the mouse above within the main graph.Left/Right Arrow Keys:
Moves the focussed node left or right by one day.Up/Down Arrow Keys:
Moves the focussed node left or right by seven days.PageUp/PageDown Keys:
Moves the focussed node to the start/end of the last/next month.
Mouse Controls
Click & Drag:
To interact with the graph, click and drag either the start/stop day nodes or the scrolling block bar at the very bottom. The graph will update automatically in real time as you drag.Mouse Wheel:
You can use the mouse wheel to interactively adjust the current focussed node, though I haven’t yet worked out how to stop the whole page scrolling up and down at the same time. IE in Windows and Safari on the Mac have issues, though Safari is fine in Windows and Firefox seems fine a all platforms. If your browser doesn’t have this problem, then you can hold the CONTROL or SHIFT key down to increase the rate of change from one day to seven.
For more details on the technical side of things, see the Embedding Java Applets in a Web Page item.
Background
I get asked a lot to explain exactly what all the charts and graphs in Autodesk Ecotect actually show. To augment basic descriptions, I have been putting together examples of some of the patterns and insights to look for in these graphs. A lot of these examples would seem to work better if they were more dynamic and interactive, so I have been looking at Flash and Java as potential ways to make them so. The interactive controls within this particular graph were inspired by the Google Finance timeline charts they use for historical share information. I’m not quite there yet in terms of all the dynamic animation, but give it time…
Click here to comment on this page.