› Apps for Statistics
  Introduction to HTML5 canvas for graphs in statistics

Step-by-step webpages:

Code samples: - full code in HTM-pages and .js-files.

Result images, snapshots:
• Step 1 "Hello world" HTML5 canvas
Plots a fixed time-series, and x,y-axis
Also adds some text in a td-box.
Script is in the HTML-file!
In HTML: <canvas id="canvas_chart" width=1600 height=600>
In JS:
var canv = document.getElementById('canvas_chart');
var c = canv.getContext('2d');
To plot a line: c.beginPath();
for (var it=1; it<x.length; it++) c.lineTo(x[it],y[it]);
c.stroke(); //performs the plotting
• Step 2 - scaling, text
Statistical data must be scaled, here with ymax.
Since canvas has y=0 at top:
  ypix = gBox.H - y[it]/ymax * gBox.H;

Add text to y-axis and x-axis

(One might use c.transform to invert y-axis,
  but it also puts texts upside-down!)
In JS:
xpix = gBox.x0 + it * gW/(Nx-1);
ypix = gBox.height+gBox.padding  -  y[it]/ymax*gBox.H;

str=ymax;   c.fillText( str, x, y, maxLen);
• Step 3 - select series
Several data-series. Plot 1..3 of them: lineA,B,C.
Use HTML select list.

NEW3: func. getDataValues, and
which returs a stat-object.
In HTML: <select id="selA" onchange="selChanged(this);" >
<option value="x">(not selected)</option>
<option value="0" selected>Serie 0 </option> etc. Series 0,1,2,..
In JS:
function selChanged( el ) {
selInd = el.selectedIndex;
and then plot the selected: yarr[selInd][it]
• Step 4
Program and data put in .js-files

select-option filled from data yNames[.]

NEW4: function fillFormSelects, addOption,

Now a generic program! - only switch data-file!
<script src="app_pgm.js"> <script>
<script src="app_data.js"> <script>

Data as JS arrays:
var xarr = [ '2009', '2010', '2011', '2012', '2013', '2014' ];
var yNames = [ '0. Apples', '1. Oranges', '2. Lemons',... ];
var yarr = [
  [ 3030, 1550, 3200, 2150, 3450, 5120 ], // =yarr[0][it]
  [ 2901, 3102, 2813, 3001, 2502, 1403 ], // =yarr[1][it]
  ... ];
• A side-step to Bar and Pie charts

How to plot Bars and Pies with HTML5 canvas.
Useable functions: plotBars, plotPie.

See also: • Maps with Pie charts
In JS. Bars:
c.fillRect( x, y, W, H);     // x,y top-left corner.
c.strokeRect( x, y, W, H ); // border-line

Pies: Somewhat tricky loop over sectors
Begin with rad1 = -PI/2 (for start at 12 o'clock) then in step i :
  c.moveTo(x0,y0);   // pie center
  rad2 = rad1 + (yarr[i] / ysum) * PI*2;
  c.arc( x0, y0, r, rad1, rad2, false); //'false' for clock-wise!
  c.closePath();   rad1=rad2;
• Step 5 - PX-files as input
The PC-Axis system is used by many statistical offices. It delivers data in PX file format, which with some small canges can be put into javascript vars and arrays, and then used in apps.
- Conversion program: px2js.exe

NEW5: fillFormSelects, getDataValues for px.js-files.

• More on PX.JS-files and px2js program
In HTML: <script src="app_data.px.js"> </script>

Some px.js code:
CONTENTS="Building of new dwellings";
VAR[0].NAME="region";   VAR[1].NAME="house type";    VAR[2].NAME="year";
VAR[0].CODES=["0180","1480",....];   etc. for VAR[1], VAR[2]
DATA=[1595, 1564, 4149,... ];   // can be a very long array.
• Step 6 Mouse tooltip
Shows time-series values, when mouse is over.

Uses: var mouse = mousePos(ev, canv);
  c.isPointInPath( mouse.x, mouse.y );
  <canvas id="canvas_chart" onmousemove="appTooltip(event);"..
In JS:
function appTooltip(ev)
Draw a polygon around each time-series: ypix[i]+10, ypix[i]-10
isOn = isPointInPath( mouse.x, mouse.y );
Text-values with fillText( yval, xpix, ypix );
Erase by drawing all again!

• Step 7 - Get Top 10 series
Interactive apps are especially interesting for large datasets, like export/import data.
- Many countries (266), many commodities (66 for SITC 2-digit).
  <button onclick="getTopSeries(1);">in column 1</button>
  <button onclick="setEqual('sel1A');" > = </button> etc.1B, 2A,2B,...
In JS:
function setEqual( selxZ ) - to set select equal.
function getTopSeries(icol) - to find top 10

Usage: Set one column equal, and get Top 10 for the other.
(one SITC + top10 countries, or one country + top10 commodities)

Website: www.justus2.se     Program: © 2015 Bo Justusson, Stockholm - Opensource and freeware.