Convert a Table Column to a Row

In an app that I will post soon, I needed 11 javascript arrays derived from a table with 55 rows. To do this by either entering by hand, or cutting and pasting each element would be very time consuming and tedious. I therefore thought it would be worthwhile to spend a little time finding a better way.

Copying a column from a table is not easy. Standard selection selects by rows. However, spreadsheets allow columns to be copied and pasted, so the first step was to convert the table to a spreadsheet.

To do this I saved the space delimited table as a csv file which was opened in a spreadsheet application. Any one would work. I then copied a column and pasted it into the textarea of an app I wrote which performs the reformatting into an array that could be pasted into the app I was writing.

Here is the code:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'&gt;
<html xmlns='http://www.w3.org/1999/xhtml'&gt;
<head profile='http://gmpg.org/xfn/11'&gt;
<title>Enter Title Here</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 15pt Arial;}a{ text-decoration: }:link { color: rgb(0, 0, 255) }
:visited {color :rgb(100, 0,100) }:hover { }:active { } #t1{position: absolute; width: 100%; height: 90%; top: 10%}
</style>
</head>
<body>
<textarea id=”t1″ name=”t1″ rows=” ” cols=” “></textarea>
<input type=”button” id=”b1″ name=”b1″ value=”Go” onclick = ‘run();’/>

function run() {
document.getElementById(“t1”).value = document.getElementById(“t1”).value.replace(/\n/g,’,’);
document.getElementById(“t1”).value = “var K = [” + document.getElementById(“t1″).value.replace(/,,/g,”) + “];”;
document.getElementById(“t1”).value = document.getElementById(“t1”).value.replace(/,]/g,’]’);
}

</body></html>

 

The interface contains only a textarea and a button to start the operation once the column has been pasted into the textarea.

document.getElementById(“t1”).value = document.getElementById(“t1”).value.replace(/\n/g,’,’);
This line replaces the line feeds of the column with commas so I now have comma delimited values trailed by a large number of commas,from all the empty cells of the column. I could have copied only the cells with data, but it is easier to let the software remove extraneous commas.

document.getElementById(“t1”).value = “var K = [” + document.getElementById(“t1″).value.replace(/,,/g,”) + “];”;
This line creates the array and deletes all pairs of commas.

document.getElementById(“t1”).value = document.getElementById(“t1”).value.replace(/,]/g,’]’);
If there were an add number of trailing commas, this line selectively removes the last extraneous comma.

Here is an example of an array created by this method:

var K1w =[1,1,0.9999,0.9922,0.9845,0.9768,0.9691,0.9613,0.9536,0.9458,0.9381,0.9303,0.9225,0.9146,0.9068,0.8990,0.8910,0.8831,0.8751,0.8672,0.8592,0.8510,0.8428,0.8347,0.8265,0.8183,0.8098,0.8013,0.7928,0.7843,0.7758,0.7669,0.7579,0.7490,0.7400,0.7311,0.7216,0.7121,0.7025,0.6930,0.6835,0.6732,0.6630,0.6527,0.6425,0.6322,0.6210,0.6098,0.5985,0.5873,0.5761,0.5635,0.5509,0.5384,0.5258,0.5132];

This method can convert a table column with 55 data containing cells to an array in less than a minute.

A HTML Graphing App

This app takes entered numbers and creates one of five graphs. The entered numbers are followed by spaces, including the last one.

Here is the interface:

In all cases Click Images for larger view.

graph-interface
Here is a point graph

poinrs
There is a color dialog for lines other than black.

Here is a purple line graph and a red line +_ points graph:

line

linepoints
For the bar and pie graphs using black as the color generates random colors; otherwise the color is the one chosen:

pie

bar
The width of the bars can be set. In this example I have chosen a value to make the bars contiguous.

Although I have nor shown it, the numbers can be sorted.

Here is the code:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'&gt;
<html xmlns='http://www.w3.org/1999/xhtml'&gt;
<head profile='http://gmpg.org/xfn/11'&gt;
<title>Graph</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 15pt Arial; background: #EEEEEE}a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }
input{font:normal normal normal 15pt Arial}
#t1{position: relative; width: 98%; left: 1%}
#svg1{position: absolute; left:0 ; top:0 ; width:100% ; height:100% ; }
#mnu{position:absolute;width:100%;height:95%; top: 5%; border-width:0;font:normal normal normal 15pt Arial; background: #EEEEEE; padding: 10px}
</style>
</head>
<body>
<svg id=”svg1″ xmlns=”http://www.w3.org/2000/svg&#8221; version=”1.1″ width=”” height=”” onclick=’reset();’></svg>
<input type=”text” id = “t1″ name=”t1″ value=”Enter Points” />


Bar Width



Points line
Line + Points
Bar
Pie


Sort Descending


var ht = screen.height; var wd = screen.width; pt = new Array(); var max2 = .7 * ht; var max3 = 0; var n = -1; var fil = “black”; var a = 0; var b = 0; var max = 1; var plot; var max3; var xold = 0; var yold = 0; var wdth = 0; var sum = 0; ang2a = new Array(); var ang2 = 0; var poly = “”; var angb = 0; ptx = new Array(); pty = new Array(); tot = new Array(); var ang = 0; var mult = 0; var descend = false;

function drawSector(ang, anga, clra, clrb, lwd) {
var xcent = Math.floor( screen.width/2);
var ycent = Math.floor(.9*(screen.height/2));
var rad = .35*screen.height;
poly += ‘
for (var i = angb; i
ang2 = i * (Math.PI/180);
ptx[i] = Math.floor(rad*Math.sin(ang2) + xcent);
pty[i] =Math.floor( rad*Math.cos(ang2) + ycent);
poly += ptx[i] + ‘,’ + pty[i] + ‘ ‘;
}
poly += ‘” style=”fill:’ + clra + ‘; stroke:’ + clrb + ‘; stroke-width:’ + lwd + ‘” />’;
document.getElementById(“svg1”).innerHTML = poly;
}

function reset() {
document.getElementById(“mnu”).style.visibility = “visible”;
document.getElementById(“svg1”).innerHTML = “”;
for (var i = 0 ; i
pt[i] = 0;
tot[i] = 0;
ang2a[i] = 0;
ptx[i] = 0;
pty[i] = 0;
}
ang2 = 0;
ang = 0;
max = 1;
a = 0;
b = 0;
max2 = .7 * ht;
max3 = 0;
n = -1;
xold = 0;
yold = 0;
wdth = 0;
sum = 0;
angb = 0;
}

function sort() {
if (document.getElementById(“c1”).checked) {
descend = true;
} else {
descend =- false;
}

var str = “”;
var pts = document.getElementById(“t1”).value;
document.getElementById(“t1”).value = “”;
while (a != -1) {
n ++;
a = pts.indexOf(” “, b + 1);
pt[n] = parseFloat(pts.substr(b, a – b));
b = a;
}

for (var j = 1; j
for (var i = 0; i

if (! descend) {
if (pt[i+ 1]
var tmp = pt[i];
pt[i] = pt[i + 1];
pt[i + 1] = tmp;
}
} else {
if (pt[i+ 1] > pt[i]) {
var tmp = pt[i];
pt[i] = pt[i + 1];
pt[i + 1] = tmp;
}
}

}
}

for (var i = 0; i
str += pt[i].toString() + ” “;
document.getElementById(“t1”).value = str;
}
reset();
}

function graph() {
a = 0;
n = -1;
var r =document.getElementsByName(“r1”);
for (var i=0; i
if (r[i].checked){
plot = r[i].value;
}
}

fil = document.getElementById(“coldlg”).value;
document.getElementById(“mnu”).style.visibility = “hidden”;
var pts = document.getElementById(“t1”).value;
while (a != -1) {
n ++;
a = pts.indexOf(” “, b + 1);
pt[n] = parseFloat(pts.substr(b, a – b));
if (n > 0) sum += pt[n-1];
b = a;
}
wdth =Math.floor( wd / (n+1));
xold = wdth;
for (var i = 0 ; i
ang2a[i] = parseFloat(360 * (pt[i]/sum));
tot[0] = ang2a[0];
if (i> 0) tot[i] = (ang2a[i] + tot[i – 1]) ;
if (pt[i] > max) max = pt[i];
}

for (var i = 0 ; i
max3 = (pt[i] / max) * max2 + 125;
if (plot == “dot”) document.getElementById(“svg1”).innerHTML += ‘ ‘;
if (plot == “line” || plot == “line+pts”) {
if ( plot == “line+pts”) document.getElementById(“svg1”).innerHTML += ‘ ‘;
if (i > 0) document.getElementById(“svg1″).innerHTML += ”
yold = ht – Math.floor(max3);
xold = (wdth*(i + 1));
}
;
if (plot == “bar” || plot == “pie”) {
var bw = document.getElementById(“t2”).value;
if (bw == “full”) bw = wdth.toString();
var r = parseInt(255* Math.random());
if (r
r = r.toString(16);
var g = parseInt(255* Math.random());
if (g
g = g.toString(16);
var bl = parseInt(255* Math.random());
if (bl
bl = bl.toString(16);
fil = ‘#’ + r + g + bl;
if ( document.getElementById(“coldlg”).value != “#000000”) fil = document.getElementById(“coldlg”).value;
if (plot == “bar”) document.getElementById(“svg1”).innerHTML += ‘ ‘;

if (plot == “pie”) {
if (i > 0) angb = tot[i-1] ;
drawSector(angb, tot[i], fil, “black”, “5”);
}

}
}
}

</body></html>

Clicking the graph resets everything but the numbers, allowing a new graph:
<svg id=”svg1″ xmlns=”http://www.w3.org/2000/svg&#8221; version=”1.1″ width=”” height=”” onclick=’reset();’></svg>
function reset() {
document.getElementById(“mnu”).style.visibility = “visible”;
document.getElementById(“svg1”).innerHTML = “”;
for (var i = 0 ; i <= n; i ++) {
pt[i] = 0;
tot[i] = 0;
ang2a[i] = 0;
ptx[i] = 0;
pty[i] = 0;
}
ang2 = 0;
ang = 0;
max = 1;
a = 0;
b = 0;
max2 = .7 * ht;
max3 = 0;
n = -1;
xold = 0;
yold = 0;
wdth = 0;
sum = 0;
angb = 0;
}

The bar and pie are drawn with the following:
if (plot == “bar” || plot == “pie”) {
var bw = document.getElementById(“t2”).value;
if (bw == “full”) bw = wdth.toString();
var r = parseInt(255* Math.random());
if (r < 20) r += 20;
r = r.toString(16);
var g = parseInt(255* Math.random());
if (g < 20) g += 20;
g = g.toString(16);
var bl = parseInt(255* Math.random());
if (bl < 20) bl += 20;
bl = bl.toString(16);
fil = ‘#’ + r + g + bl;
if ( document.getElementById(“coldlg”).value != “#000000”) fil = document.getElementById(“coldlg”).value;
if (plot == “bar”) document.getElementById(“svg1″).innerHTML += ‘<rect x=”‘ + (wdth*(i + 1) – (bw /2) ) + ‘” y=”‘ + (ht – Math.floor(max3)) + ‘” width=”‘ + bw + ‘” height =”‘ +( 125 + Math.floor(max3)) + ‘” style = “fill: ‘ + fil + ‘; stroke: black; stroke-width: 1” /> ‘;

if (plot == “pie”) {
if (i > 0) angb = tot[i-1] ;
drawSector(angb, tot[i], fil, “black”, “5”);
}

}
}

HTML Pulse App Updated

I had previously described an app to take a pulse. This app adds a delay timer, allowing  measurement of the recovery rate from exercise, with the addition of a warning sign to be begin counting the pulse. It also permits timing for multiple people.

Here is the code:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'&gt;
<html xmlns='http://www.w3.org/1999/xhtml'&gt;
<head profile='http://gmpg.org/xfn/11'&gt;
<title>Pulse</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 15pt Arial; background: #FFDD99}a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { } #b1, #b2{position: relative; width: 300px; height: 200px; background: #22AA22; text-shadow: 5px 5px 5px #000000; color : white; font: normal normal 800 64pt Arial} #t1, #t2, #t3, #t4, #t5, #t6, #t7, #t8, #t9, #t10, #t0{font: normal normal 800 15pt Arial}
#t0{background: yellow}
</style>
</head>
<body>
<center><input type=”button” id=”b1″ name=”b1″ value=”Start” onclick=’run();’ /> <input type=”button” id=”b2″ name=”b2″ value=”Ready” onclick=’run2();’ /></center><br />
<center><input type=”text” id=”t0″ name=”t0″ value=”Delay” /><br />
<input type=”text” id=”t1″ name=”t1″ value=”0″ /><br />
<input type=”text” id=”t2″ name=”t2″ value=”0″ /><br />
<input type=”text” id=”t3″ name=”t3″ value=”0″ /><br />
<input type=”text” id=”t4″ name=”t4″ value=”0″ /><br />
<input type=”text” id=”t5″ name=”t5″ value=”0″ /><br />
<input type=”text” id=”t6″ name=”t6″ value=”0″ /><br />
<input type=”text” id=”t7″ name=”t7″ value=”0″ /><br />
<input type=”text” id=”t8″ name=”t8″ value=”0″ /><br />
<input type=”text” id=”t9″ name=”t9″ value=”0″ /><br />
<input type=”text” id=”t10″ name=”t10″ value=”0″ /><br />
</center>
var then; var cnt = 0;function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i milliseconds){
break;
}
}
}

function run() {
if (document.getElementById(“b1”).value == “Reset”) {
cnt = 0;
document.getElementById(“t1”).value = “0”;
document.getElementById(“t2”).value = “0”;
document.getElementById(“t3”).value = “0”;
document.getElementById(“t4”).value = “0”;
document.getElementById(“t5”).value = “0”;
document.getElementById(“t6”).value = “0”;
document.getElementById(“t7”).value = “0”;
document.getElementById(“t8”).value = “0”;
document.getElementById(“t9”).value = “0”;
document.getElementById(“t10”).value = “0”;
document.getElementById(“b2”).value = “Ready”;
document.getElementById(“b1”).value = “Start”;
document.getElementById(“t0”).value = “Delay”;
document.getElementById(“t0″).style.backgroundColor=”yellow”;
} else {
if (document.getElementById(“t0”).value == “Delay”) document.getElementById(“t0”).value = “0”;

if (document.getElementById(“t0”).value != “0”) {
var del = parseInt(document.getElementById(“t0”).value) * 1000;
sleep(del);
}
document.getElementById(“t0”).value = “0”;
document.getElementById(“t0″).style.backgroundColor=”red”;
then = new Date();
document.getElementById(“b2”).value = “Split”;
document.getElementById(“b1”).value = “Reset”;
}
}

function run2() {
cnt ++;
var now = new Date();
var pulse = Math.floor(600000/(now – then));
if (cnt == 1)document.getElementById(“t1”).value = pulse;
if (cnt == 2)document.getElementById(“t2”).value = pulse;
if (cnt == 3)document.getElementById(“t3”).value = pulse;
if (cnt == 4)document.getElementById(“t4”).value = pulse;
if (cnt == 5)document.getElementById(“t5”).value = pulse;
if (cnt == 6)document.getElementById(“t6”).value = pulse;
if (cnt == 7)document.getElementById(“t7”).value = pulse;
if (cnt == 8)document.getElementById(“t8”).value = pulse;
if (cnt == 9)document.getElementById(“t9”).value = pulse;
if (cnt == 10)document.getElementById(“t10”).value = pulse;
}

</body></html>

There is a new function that puts a delay before the timing starts:
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e30; i++) {
if ((new Date().getTime() – start) > milliseconds){
break;
}
}
}

The argument milliseconds is set by the following:
if (document.getElementById(“t0”).value != “0”) {
var del = parseInt(document.getElementById(“t0”).value) * 1000;
sleep(del);
}
document.getElementById(“t0”).value = “0”;
document.getElementById(“t0″).style.backgroundColor=”red”;

When the yellow box turns red and reads 0, it is time to start counting the pulse. To measure pulse rates for a group, set a delay and tell them to find a pulse. When the box turns red, tell them to count ten beats and let ytou know. Click Split and a new box will indicate a pulse rate.

Here are some view of the pulse counter in action:

Click Images for larger view

Interface

pulse-start

Delay

pulse-delay

Start Counting

pulse-count

Multiple Pulses

pulse-pulses

HTML Mandelbrot & Julia Updated

I had previously posted a fractal generator written in HTML. This is an expansion to powers other than two.

The classic fractal is the following:

while ((zx*zx + zy*zy) <= 16 && iters < 32) {
iters ++;
var z2x = zx*zx – zy*zy;
var z2y = 2*zx*zy;
zx = z2x;
zy = z2y;
zx += cx;
zy += cy;
}

in which c is a normalized screen coordinate for the Mandelbrot and a constant value for the Julia.

However, powers greater than two can also be used and give interesting results:

if (pwr == “3”) {
while ((zx*zx + zy*zy) <= 16 && iters < 32) {
iters ++;
var z2x = zx*zx*zx – 3*zx*zy*zy;
var z2y = 3*zx*zx*zy – zy*zy*zy;
zx = z2x;
zy = z2y;
zx += cx;
zy += cy;
}
}

if (pwr == “4”) {
while ((zx*zx + zy*zy) <= 16 && iters < 32) {
iters ++;
var z2x = zx*zx*zx*zx -6*zx*zx*zy*zy + zy*zy*zy*zy;
var z2y = 4*zx*zx*zx*zy – 4*zx*zy*zy*zy;
zx = z2x;
zy = z2y;
zx += cx;
zy += cy;
}
}

if (pwr == “5”) {
while ((zx*zx + zy*zy) <= 16 && iters < 32) {
iters ++;
var z2x = zx*zx*zx*zx*zx -10*zx*zx*zx*zy*zy + 5*zx*zy*zy*zy*zy;
var z2y = 5*zx*zx*zx*zx*zy – 10*zx*zx*zy*zy*zy + zy*zy*zy*zy*zy;
zx = z2x;
zy = z2y;
zx += cx;
zy += cy;
}
}

if (pwr == “6”) {
while ((zx*zx + zy*zy) <= 16 && iters < 32) {
iters ++;
var z2x = zx*zx*zx*zx*zx*zx – 15*zx*zx*zx*zx*zy*zy + 15*zx*zx*zy*zy*zy*zy – zy*zy*zy*zy*zy*zy;
var z2y = 6*zx*zx*zx*zx*zx*zy – 20*zx*zx*zx*zy*zy*zy + 6*zx*zy*zy*zy*zy*zy;
zx = z2x;
zy = z2y;
zx += cx;
zy += cy;
}
}

Each increase in the power adds a new degree of reflection to the Mandelbrot and a new degree of rotation to the Julia.

Below are images of the Mandelbrot and a Julia for powers 3 – 6:

In each instance click image for larger view

3

m3j3
4

m4j4
5

m5j5
6

m6j6

A HTML Standard Deviation Calculator

This app will take a series of numbers and calculate the mean and standard deviation.

Here is the appearance:

Click Image for larger view

sd

Here is the code:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'&gt;
<html xmlns='http://www.w3.org/1999/xhtml'&gt;
<head profile='http://gmpg.org/xfn/11'&gt;
<title>Std Deviation</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 15pt Arial; background: #F8E8AA}a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { } input{font:normal normal normal 15pt Arial}
</style>
</head>
<body>
<input type=”text” style=”width: 100%” id=”vals” name=”vals” value=”[20,30,40,50,50,60,60,60,65,65,65,65,75,75,75,85,85,90,95]” /><br /><br />
<input type=”button” id=”b1″ name=”b1″ value=”Calculate” onclick=’calc();’/><br /><br />
<input type=”text” id=”sd” name=”sd” value=”” />
var str = “”; var dev = 0; var sqr = 0; var n = 0; var mean = 0; var a = 0; vals = new Array();
function calc() {
mean = 0;
dev = 0;
sqr = 0;
n = 0;
a = 0;
str = document.getElementById(“vals”).value;
while (a != -1) {
a = str.indexOf(“,”, a+1);
vals = JSON.parse(str);
mean += vals[n];
n ++;
}
mean /= n;
for (var i=0; i
</body></html>

Values are entered between the brackets, separated by commas.

Clicking the button calls the function calc()

In the function, values are set to their initial state and a string is created from the contents of the text box:
str = document.getElementById(“vals”).value;

The string is searched for commas and an array is created from the string:
while (a != -1) {
a = str.indexOf(“,”, a+1);
vals = JSON.parse(str);

A variable named mean sums the elements of the array, the number of values is placed in a variable n, and the mean is calculated by division:
mean += vals[n];
n ++;
mean /= n;

A string containing the mean and standard is then created and displayed with the following code:
for (var i=0; i < n; i++) {
dev += (Math.abs((vals[i] – mean)) * Math.abs((vals[i] – mean)));
}
dev = “Mean: ” + mean.toFixed(3) + ” SD: ” + (Math.sqrt(dev/n)).toFixed(2);
document.getElementById(“sd”).value = dev;
}