Building efficient websites with AJAX
Picture Perfect
The previous examples have been restricted to simple HTML elements such as lists and tables. Widgets and functions that HTML does not provide natively can be programmed in JavaScript in combination with cascading style sheets.
Querying the mouse position allows the developer to implement tool tips and even drag and drop. Most JavaScript libraries include implementations.
This does not exhaust the capabilities of dynamic HTML, including graphics that legacy HTML could only implement by embedding bitmaps.
Figure 5 shows a tree structure drawn by JavaScript. Client-side dynamic graphics have a number of advantages compared with bitmaps: The resolution is not fixed and can thus be modified to reflect the browser's preset font size.

User input can be visualized without server interaction, thus reducing the load on the server. Normally, much of a web server's bandwidth is consumed by serving up graphics.
HTML Extensions
Basically, there are two approaches to using JavaScript to create graphics. The greatest feature scope is offered by the XML-based graphics languages SVG [8], Canvas [9], and Vector Markup Language (VML) [10]. They can be embedded in HTML like normal graphics, but also can add typical graphical elements – such as lines, areas, or text at run time. They can thus respond interactively to user input like dynamic JavaScript-modified HTML.
Drawing programs such as Inkscape [11] or Karbon [12] will help you create a draft.
Unfortunately, multi-browser support is not guaranteed: None of the popular browsers support all three formats referred to here.
Firefox can handle SVG and Canvas, Safari just Canvas, and Internet Explorer just VML.
Google JavaScript has two libraries for SVG [13] or Canvas [14]; however, support on the Windows platform is not guaranteed.
Tried and Trusted Tools
Many diagrams or graphs can be created with JavaScript and the standard HTML and CSS tools, such as the tree graph in Figure 5.
The boxes are made up of freely positioned CSS div elements. If em is used as a unit instead of px (pixel) for placing and sizing, the box height, width, and position are based on the size of the letter "m."
The whole graph will then scale to reflect the text size without any effort on the developer's part.
Users can also easily scale the graphic up and down in most browsers with the mouse wheel.
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Support Our Work
Linux Magazine content is made possible with support from readers like you. Please consider contributing when you've found an article to be beneficial.
News
-
Fedora 39 Beta is Now Available for Testing
For fans and users of Fedora Linux, the first beta of release 39 is now available, which is a minor upgrade but does include GNOME 45.
-
Fedora Linux 40 to Drop X11 for KDE Plasma
When Fedora 40 arrives in 2024, there will be a few big changes coming, especially for the KDE Plasma option.
-
Real-Time Ubuntu Available in AWS Marketplace
Anyone looking for a Linux distribution for real-time processing could do a whole lot worse than Real-Time Ubuntu.
-
KSMBD Finally Reaches a Stable State
For those who've been looking forward to the first release of KSMBD, after two years it's no longer considered experimental.
-
Nitrux 3.0.0 Has Been Released
The latest version of Nitrux brings plenty of innovation and fresh apps to the table.
-
Linux From Scratch 12.0 Now Available
If you're looking to roll your own Linux distribution, the latest version of Linux From Scratch is now available with plenty of updates.
-
Linux Kernel 6.5 Has Been Released
The newest Linux kernel, version 6.5, now includes initial support for two very exciting features.
-
UbuntuDDE 23.04 Now Available
A new version of the UbuntuDDE remix has finally arrived with all the updates from the Deepin desktop and everything that comes with the Ubuntu 23.04 base.
-
Star Labs Reveals a New Surface-Like Linux Tablet
If you've ever wanted a tablet that rivals the MS Surface, you're in luck as Star Labs has created such a device.
-
SUSE Going Private (Again)
The company behind SUSE Linux Enterprise, Rancher, and NeuVector recently announced that Marcel LUX III SARL (Marcel), its majority shareholder, intends to delist it from the Frankfurt Stock Exchange by way of a merger.