Front & Back

Blog sobre el Desarrollo de aplicaciones web

Front end ChartCanvas - Ejes cartesianos y "pie charts" con Javascript

ChartCanvas es una librería en Javascript que genera gráficos simples en canvas y que puede usarse tanto en el lado cliente, como en el servidor con Node.js. Sus principales características son: generación de ejes cartesianos; "pie charts" (quesitos); multi ejes; soporte para su utilización con Node.js y "responsive design" (diseño adaptativo). Tenéis disponible el código en GitHub, con una documentación escrita en mi cuestionable inglés :-) así que os dejo a continuación un resumen en español y el repositorio en GitHub por si le queréis echar un ojo.


ChartCanvas - Imagen de ejemplo

Uso básico de ChartCanvas

Para usar la clase ChartCanvas es necesario incluir en nuestro HTML: jQuery, ChartCanvas.js y por otro lado los tipos de gráfico que necesitemos incluir:
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="ChartCanvas.js"></script>
<!-- En este punto se incluyen sólo las clases a usar; si por ejemplo no se van a utilizar gráficos de tipo
"pie chart" podría eliminarse ChartCanvas_pie.js del DOM.-->
<script src="types/ChartCanvas_axes.js"></script>
<script src="types/ChartCanvas_pie.js"></script>
</head>

Luego debemos crear uno o varios elementos canvas con el atributo 'class="ChartCanvas"' sobre los que operará la librería. Por ejemplo:
<canvas id="canvas" width="805" height="315" class="ChartCanvas">
Fallback content: (Contenido para navegadores incompatibles con Canvas)
</canvas>

A continuación debemos crear un array de datos con los datos que necesitemos mostrar en el gráfico, con la estructura: array[[timestam1, value1], [timestam2, value2]] en el caso de gráficos cartesianos o array[[index1, value1], [index2, value2]] en el caso de "pie charts".
Una vez contemos con el array, tenemos que crear la cadena JSON que servirá de configuración para nuestro gráfico.
Por poner un ejemplo. Vamos a generar un gráfico de tipo "pie chart":
var dataArrayX = new Array();
var dataBar11_X = [
    [1, 2]
    , [2, 1]
, [3, 1]
    , [4, 6]
    , [5, 1]
    , [6, 2]           
    ];
dataArrayX.push(dataBar11_X); /*Cada grupo de datos a mostrar en el gráfico se introduce en el array principal;
en este caso, al tratarse de un quesito sólo existe un grupo de valores*/

var jsonSettingsX = { "data" :    dataArrayX,
    "labels" : ['Pepe', 'Juan', 'Manolo', 'Ana', 'Eustaquio', 'Robustiana'],
"graphTypes" : ["donut"]
    };

var canvas = $.extend(new ChartCanvas($("#canvas")[0], jsonSettingsX), new ChartCanvas_pie(jsonSettingsX));
$("#canvas").data('ChartCanvas', canvas);
$("#canvas").data('ChartCanvas').render();

El resultado sería el siguiente:

Pie chart - ChartCanvas

Si nos fijamos en el código anterior, vemos que "ChartCanvas" extiende en este caso "ChartCanvas_pie", si se tratase de un gráfico cartesiano extendería "ChartCanvas_axes".

Como he dicho, si queréis más información, está disponible en la página de ChartCanvas en Github.