Javascript

Jquery + Math + Flot (e html 5)


Ola pessoal, fiz um pequeno projeto usando as cancalharias citadas no titulo. A idéia é simples: montei alguns gráficos usando as principais funções trigonométricas e recursos nativos do web browser. A tarefa em si já não é muito dificil, mas com as bibliotecas citadas ser torna coisa de criança :-). E você não precisa de softwares matemáticos complexos para renderizar.

A Biblioteca Math

A biblioteca Math já provê algumas (poucas) constantes e funções que da a base para várias coisa legais. Não tem nada de muito avançado, mas já tem o básico para começar a brincadeira. Achei a seguinte tabela de referência da biblioteca no site w3schools :

Math Object Properties

 

 Property Description
 E Returns Euler’s number (approx. 2.718)
 LN2  Returns the natural logarithm of 2 (approx. 0.693)
 LN10  Returns the natural logarithm of 10 (approx. 2.302)
 LOG2E  Returns the base-2 logarithm of E (approx. 1.442)
 LOG10E  Returns the base-10 logarithm of E (approx. 0.434)
 PI  Returns PI (approx. 3.14159)
 SQRT1_2  Returns the square root of 1/2 (approx. 0.707)
 SQRT2  Returns the square root of 2 (approx. 1.414)

Math Object Methods

 Method  Description
 abs(x)  Returns the absolute value of x
 acos(x)  Returns the arccosine of x, in radians
 asin(x)  Returns the arcsine of x, in radians
 atan(x)  Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians
 atan2(y,x)  Returns the arctangent of the quotient of its arguments
 ceil(x)  Returns x, rounded upwards to the nearest integer
 cos(x)  Returns the cosine of x (x is in radians)
 exp(x)  Returns the value of Ex
 floor(x)  Returns x, rounded downwards to the nearest integer
 log(x)  Returns the natural logarithm (base E) of x
 max(x,y,z,…,n)  Returns the number with the highest value
 min(x,y,z,…,n) Returns the number with the lowest value
 pow(x,y)  Returns the value of x to the power of y
 random()  Returns a random number between 0 and 1
 round(x) Rounds x to the nearest integer
 sin(x)  Returns the sine of x (x is in radians)
 sqrt(x)  Returns the square root of x
 tan(x)  Returns the tangent of an angle

Fonte: http://www.w3schools.com/jsref/jsref_obj_math.asp

Jquery e Flot

A biblioteca Flot é uma biblioteca para plotagem de gráficos que promete funcionar em vários browsers (inclusive IE6), usando o tão falado HTML Canvas do HTML 5. Em browsers mais antigos (como o IE6) eles usam uma simulação canvas também via JS. Para maiores informações, visite a página oficial do projeto http://code.google.com/p/flot/ .

Alguns gráficos de funções

Cos, sin, tan, cotan, sec, cossec:

  Parabola, Parabola (inv), Cubic, Log, Abs: 

cos * (1/x) :

cos(1/sin(x)) , sin(1/cos(x)): 

Para quem se interessou, coloquei todos os arquivos com os gráficos acima no meu github – http://github.com/pedrolopesme/Flot-Samples. Coloquei lá um livedemo que você passa a função e ele constrói o gráfico. Se alguém se habilitar em fazer uma coisa mais legal para plotagem de gráficos de funções rodando direto via browser, entre em contato 🙂


I'm Pedro Mendes, a passionate developer and technology enthusiast. This blog covers programming and technology in the broadest sense possible. It's the place I collect my thoughts, work and findings to share with the public.

View Comments