The uprising of JavaScript and HTML5

The role of JavaScript has been shifted significantly from a few simple client routines to a dominant language for creating and managing web user interfaces. The programming technique is nothing like what it was a decade ago. This is driven by a group of pioneers such as Douglas Crockford who is responsible for transforming the language for educating and making JavaScript a better language with his book JavaScript: The Good Parts, O'Reilly Media / Yahoo Press; and both Sam Stephenson, creator of Prototype JavaScript library (http://www.prototypejs.org), and John Resig, creator of JQuery library (http://jquery.com), who brought JavaScript into a framework for building more complicated web frontend software.

To give an introduction of the new programming style is beyond the scope of this book. However, throughout this book, we will see examples in jQuery (because Highcharts uses a jQuery library as the default choice and jQuery is the most popular JavaScript framework). Readers are expected to know the basics of jQuery and CSS selector syntax. Readers should also be familiar with advanced JavaScript scripting described in the book JavaScript: The Good Parts, such as prototypes, closure, inheritance, and function objects.

HTML5 (SVG and canvas)

In this section, two HTML5 technologies, SVG and canvas, are covered with examples.

SVG (Scalable Vector Graphics)

HTML5 is the biggest advancement so far in the HTML standard. The adoption of the standard is growing fast (also fuelled by Apple mobile devices, which stopped supporting Adobe Flash). HTML5 comes with many new features. Again, it is beyond the scope of this book to cover them. However, the most relevant part to web charting is Scalable Vector Graphics (SVG). SVG is an XML format for describing vector-based graphics, which is composed of components such as paths, text, shapes, color, and so on. The technology is similar to PostScript except that PostScript is a stack-based language. As implied by its name, one of the major advantages of SVG is that it is a lossless technology (same as PostScript); it doesn't suffer from any pixelation effect by enlarging the image. A reduced image size will not suffer from loss of original content.

Furthermore, the SVG can be scripted with timing animation Synchronized Multimedia Integration Language (SMIL) and event handling. SVG technology is supported by all the major browsers.

The following is a simple example of SVG code—a single curved line between two points:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path id="curveAB" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
  <!-- Mark relevant points -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="400" cy="350" r="3" />
  </g>
  <!-- Label the points -->
  <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="400" y="350" dx="30">B</text>
  </g>
</svg>

The preceding SVG code is executed in the following steps:

1. Draw a path with id="curveAB" with data (d). First, move M to an absolute coordinate (100, 350), then draw a Bézier quadratic curve from the current position to (150, -300) and finish at (300, 0).

2. Group (g) the two circle elements—"pointA" and "pointB"—with the center coordinates (100, 350) and (400, 350) respectively with a radius of 3 pixels. Then fill both circles in black.

3. Group the two text elements A and B, started at (100, 350) and (400, 350), which display with the sans-serif font in black, and then shift along the x axis (dx) 30 pixels left and right, respectively.

The following is the final graph from the SVG script:

Canvas

Canvas is another new HTML5 standard, which is used by some JavaScript chart software. The purpose of canvas is as its name implies; you declare a drawing area in the canvas tag, then use the new JavaScript APIs to draw lines and shapes in pixels. Canvas has no built-in animation routine, so the API calls in timing sequences are used to simulate an animation. Also, there is no event handling support; developers need to manually attach event handlers to certain regions in the canvas. Hence, fancy chart animation may prove more complicated to implement.

The following is an example of canvas code, which achieves the same effect as the preceding SVG curve:

<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;">Canvas tag not supported</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Draw the quadratic curve from Point A to B
ctx.beginPath();
ctx.moveTo(100, 250);
ctx.quadraticCurveTo(250, 0, 400, 250);
ctx.strokeStyle="blue";
ctx.lineWidth=5;
ctx.stroke();
// Draw a black circle attached to the start of the curve
ctx.fillStyle="black";
ctx.strokeStyle="black";
ctx.lineWidth=3;
ctx.beginPath();
ctx.arc(100,250,3, 0, 2* Math.PI);
ctx.stroke();
ctx.fill();
// Draw a black circle attached to the end of the curve
ctx.beginPath();
ctx.arc(400,250,3, 0, 2* Math.PI);
ctx.stroke();
ctx.fill();
// Display 'A' and 'B' text next to the points
ctx.font="30px 'sans-serif'";
ctx.textAlign="center";
ctx.fillText("A", 70, 250);
ctx.fillText("B", 430, 250);
</script> 

As you can see, both canvas and SVG can do the same task whereas canvas takes more instructions:

Instead of a continuous path description in SVG, a sequence of JavaScript drawing methods are called. Instead of a single tag with multiple attributes, multiple attribute setting routines are called. SVG is mostly declarative, while canvas enforces an imperative programming approach.