Techs Tricks

Dynamic graphic chart with canvas

2010-04-26T04:55:00.000-07:00

Hi,
I tried to use canvas ability to draw graphs, dynamic in this case, client-side without need of flash or whatever demanding to install plugin to our web browser. It works in almost all browser except IE...
Here is the code :

var mem = Array();var dataSpan = Array();var ctx;var timer;var inc=0;var scale;var initLimUp=200;var axisMid;var axisTop;

Init function including canvas context declaration, transformation to put the origin at left bottom (mor natural for me) and launching of the recursive main function.

function initGraph(){
axisTop = document.getElementById('axisTop');
axisMid = document.getElementById('axisMid');axisBot = document.getElementById('axisBot');
var canvas = document.getElementById('canv');
if (canvas.getContext){
ctx = canvas.getContext('2d');
//Put the origin at left bottom
ctx.transform(1, 0, 0, -1, 0, 200);
ctx.lineWidth = 5;ctx.lineJoin = 'round';
ctx.save();
timer = setInterval('process()', 500);
}
}

Main function

function process() {
dataGeneration();
scaling();
draw();
changeAxis();
}

Function used to generate values feeding the graph.

function dataGeneration() {
//A dummy way to generate data
mem.push((inc%20==0)?Math.random()*400:mem[mem.length-1]+25);
dataSpan=mem;
//We keep only the last 35 values
if(mem.length>35) {
dataSpan.shift();
}
inc++;
}

I add a y-axis scaling ability to fit the graph with the values displayed.

function scaling() {
//To find out what is the scaling to apply, I look for the highest value to display
//then I compare it to the original display size of the canvas (that mean I'll have to apply scaling to the original state of the canvas)
var dataToCheck = new Array();
dataToCheck = dataToCheck.concat(dataSpan);
dataToCheck.sort(sortNumber);
var max = dataToCheck[dataToCheck.length-1];
scale = 1/(Math.ceil(max/initLimUp));
}

Simple function to chnage the legend of y-axis regarding the current scale.

function changeAxis() {
axisTop.innerHTML=initLimUp/scale;
axisMid.innerHTML=initLimUp/scale/2;
}

Comparison function used to find out what is the highest value displayed.

function sortNumber(a,b) {return a - b;}

Drawing function:

Clear the canvas
Adjust scaling
Add a plot for each value and join (stroke) them

function draw(){
//We need to restore to the original state to be able to apply scaling (due to my scaling calculation method)
ctx.restore();
//We need to save directly to keep the original state in the stack else next restore won't work
ctx.save();
//As we've restored the initial scale, we can clear the whole canvas efficiently
ctx.clearRect(0,0,350,initLimUp);
//Then after applying the current scale value we draw the graphic
ctx.scale(1,scale);
ctx.beginPath();
for(i=0;i < dataSpan.length;i++){
ctx.lineTo(10*i,dataSpan[i]);
}
ctx.stroke();
}

You can test the graph by clicking down the button under the graph.

Test a HTTP request with wget

2008-12-11T06:59:00.000-08:00

Few usefull options of the wget command to quickly test the response of a web application.

First

wget http://www.google.com

will save the result send by the server in a file with the samename as the page asked (index.html in the case of www.google.com)

use "-o" option to log the wget operation

wget -o wget.log http://www.google.com

Log you can grep 'HTTP request sent, awaiting response... 200 OK' in a script to simply know if the wget succeed

use "-O" to redirect the result in a specified file

wget -O google.index.txt http://www.google.com

"--post-file" allows you to POST data included in the specified file

wget --post-file=POSTdata.txt http://xxxxxx.yyy

Finally use "-no-check-certificate" option to don't check the server's certificate when connecting with SSL.

wget --no-check-certificate https://xxxxxx.yyy

If you need to go through proxy, just use export command before wget to specify the login, password and url of the proxy.

export http_proxy="http://login:password@proxy.exemple.org:8080"

Send a mail by tunning headers

2008-12-11T06:34:00.000-08:00

You can do it thanks to the unix command : sendmail.

sendmail allows you to specify header fields before sending a mail thanks to "-t" option.

So you can explicitly configure mail's attributes like: From, Subject, Bcc, or even Importance, etc... (You can find here an exhaustive list of these fields).

Here is a template called "mail.txt" containing both header and message to send :

From: XXX <xxx@mail.com>
To: YYY <yyy@mail.com>
CC: ZZZ <zzz@mail.com>
Bcc: HHH <hhh@mail.com>
Subject: Your subject
Importance: High
Content-Type: text/html
MIME-Version: 1.0
Return-Path: XXX <xxx@mail.com>
Your message.
Your message..

Then simply send the mail with command:

sendmail -t < mail.txt

Don't worry about Bcc field, it will not appear in the received mail (sendmail removes it).