[Javascript] Gráficas sin flash ni imágenes

Introducción

Las gráficas en el desarrollo web son un mundo, existe multitud de formas de realizarla, pero a mi entender la más elegante es con Javascript. Y como usar código ya hecho si nos sirve siempre es una ventaja veremos dos casos prácticos.

HighCharts

highcharts

Uso

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

//Incluimos lo que nos descargamos + Jquery
<script src="jquery.min.js" type="text/javascript"></script>
<script src="highcharts.js" type="text/javascript"></script>
<script src="excanvas.js" type="text/javascript"></script>
$(document).ready(function() {
	var chart1 = new Highcharts.Chart({
		chart: {
			renderTo: 'chart-container-1',
			defaultSeriesType: 'bar'
		},
		title: {   //Título de la gráfica
			text: 'Fruit Consumption'
		},
		xAxis: { //Categorías en el eje de las x
			categories: ['Apples', 'Bananas', 'Oranges']
		},
		yAxis: { //Título del eje de las ys
			title: {
  				text: 'Fruit eaten'
			}
		},
		series: [{ //Aquí especificamos los datos
			name: 'Jane',
			data: [1, 0, 4]
		}, {
			name: 'John',
			data: [5, 7, 3]
		}]
	});
});

Descarga

Pincha aquí para descargar

Emprise JavaScript Charts

ejschart

Uso

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script type="text/javascript">
var myChart6 = new EJSC.Chart( 'myChart1a' , {
	// TItulo de la gráfica
	title: "Sample Function Chart" ,   
	// Para ver ambos ejes
	axis_bottom: {         
		caption: "X Value" ,
		zero_plane: { show: true, color: 'rgb(0,0,0)' , thickness: 1 }
	} ,
		axis_left: {
			caption: "Y Value" ,
			zero_plane: { show: true, color: 'rgb(0,0,0)' , thickness: 1 }
		}
	});
	// Aqui añadimos funciones para dibujarlas
	myChart6.addSeries( new EJSC.FunctionSeries( function(x) { return Math.pow(x,2); } , 
	{ title: "Function x^2" } ) );
	myChart6.addSeries( new EJSC.FunctionSeries( function(x) { return Math.pow(x,3); } ,
	{ title: "Function x^3" } ) );
	myChart6.addSeries( new EJSC.FunctionSeries( function(x) { return x; } ,
	{ title: "Function x" } ) );            
</script>

Descarga

Pincha aquí para descargar