plOOtr
Actualización: Lista la versión 0.2.0!!!!
plOOtr es una librería libre y gratuita para generar gráficas web utilizando el canvas html, y que está integrado totalmente con MooTools. Es realmente una adaptación de la librería Plotr, la cual está integrada con Prototype, y que a su vez es una adaptación de PlotKit, que funciona con Mochikit.
Requerimientos:
- MooTools 1.1 (no sé si con alguna versión más baja, sólo lo he probado con 1.1)
- ExplorerCanvas
Compatibilidad:
- Se ha probado en Mozilla Firefox e Internet Explorer 6
Cambios:
- versión 0.20:
- Optimización de código
- Pueden usarse sombras
- Gráficas de líneas sin relleno
- Se agrega funcionalidad para mostrar leyendas
- Se agrega a las gráficas la propiedad “showInSide“. Por default está en false y las leyendas se muestran en la parte inferior de las gráficas, al ponerla en true se muestra en la parte de un costado, a la derecha.
Descarga:
- plOOtr 0.2.0 (librerias con código fuente y ejemplos en zip - 54kb
plOOtr 0.14 (librerias y ejemplos en zip - 52kb
Instalación:
- Copiar la carpeta lib a tu proyecto
- Hacer la referencia a las librerias en la sección HEAD del documento.
<script src=”lib/mootools/MT11.js” type=”text/javascript”></script>
<script src=”lib/plotr/excanvas.js” type=”text/javascript”></script>
<script src=”lib/plotr/Plotr.js” type=”text/javascript”></script> - Poner el contenedor donde se visualizará el gráfico<div class=”graph”><canvas id=”plotr1″ height=”500″ width=”600″></canvas></div>
- Poner las opciones, y construir la gráfica. var Site={
dataset1:{
‘myFirstDataset’: [[0, 1.4], [1, 3], [2, 1.414], [3, 1.73], [4, 2.56]]
},
options:{
strokewidth: 1,
backgroundColor: ‘#fff’,
colorScheme: ‘blue’,
xTicks: [{v:0, label:’Firefox’},
{v:1, label:’Opera’},
{v:2, label:’Safari’},
{v:3, label:’IE6′},
{v:4, label:’IE7′}
]
},
graph:function(){
/*Se llama la instancia para la grafica, se le pasan los datos y se construye*/
var pie = new Plotr.PieChart(’plotr1′,Site.options);
pie.addDataset(Site.dataset1);
pie.render();}
/*Una vez listo el DOM, se llama la función que graficará*/
window.addEvent(’domready’,Site.graph); - Disfruta tus gráficas.
Documentación:
- Por ahora básicamente es la de PlotKit, a la brevedad pondré una versión adaptada a plOOtr, resumida y en español.
Ejemplos(0.20):
Ejemplos(0.14):
Gráfica de barrasGráfica de pastelGráfica de líneasGráfica de los 3 tipos, pero a partir de una tabla HTML
Próximas mejoras:
- Añadir eventos en las barras o en las rebanadas de las gráficas de barras y pastel, respectivamente.
June 25th, 2007 a las 3:30 pm
Hi,
I’d like to first thank you for taking the time to port over this great library to Mootools.
I am currently using it for a project I am developing, and was wondering if you were looking for contributing help. I am willing to help out if you are looking for some. Please let me know anyway I can contribute.
If not, may I ask for a few updates to be included in the next release?
1:
For bar charts, it would be nice to be able to specify diffent colors for each bar in a single dataset. I had to modify the core code to achieve this with one line (line 1261 of uncompressed version):
cx.fillStyle = $type(this.options.colorScheme[bar.name]) == ’string’ ? this.options.colorScheme[bar.name] : this.options.colorScheme[bar.name][index];
Basically it mimics the old behaviour, but you can also pass in an array of colors for a single dataset.
Also, I found that when updating a graph dynamically, the old labels were not removed. I had to manually remove them myself.
$ES(’div’,$(’line-chart-canvas’)).each(function(el){el.remove();});
Maybe I am just doing something wrong, but it might be nice if that were called in the reset() method.
Anyways, please accept my thanks for the great work, and I am more than willing to help contribute if you are looking for help.
Thanks again
Mike Marrone
June 26th, 2007 a las 10:05 pm
I was hoping someone had some nice graphs for mootools, great work. Is there a way to add opacity so when shouldFill is true one set is visible if it drops below another set?
August 12th, 2007 a las 11:03 pm
Gran trabajo !
Solo una sugerencia: cuando el ancho ( o alto ) del se define con JavaScript ( $(’canvas’).setStyle(’width’, 500); ) en vez de a traves de la propia etiqueta ( width=”500″ ), el grafico sale distorsionado porque no detecta correctamente las dimensiones del canvas.
Esto es útil para crear gráficas donde el ancho sea un porcentaje del ancho disponible, que se calcula a través de JavaScript. Estaría bien arreglar ese detalle…
Espero haberme explicado…
September 3rd, 2007 a las 6:50 am
English Please!!!!! I would really like to uses this project but can’t seem to find any English Documentation.
October 24th, 2007 a las 10:43 am
I have worked about another way to use you class. This is documented into: http://www.copix.org/index.php/wiki/Mootools/Charts/en
You could get my tabletochart.js in Copix CVS tree :
http://adullact.net/plugins/scmcvs/cvsweb.php/Copix_3/www/js/mootools/plugins/?cvsroot=copix#dirlist
December 16th, 2007 a las 5:33 pm
it would be cool to have an option to show an effect….say if its a bar chart, we can see each bar raise up to its proper size. Its just adding an effect to the chart, it would be cool
Good job though.
December 20th, 2007 a las 10:50 pm
How do you use a define a custom color scheme in the options (defining individual color hex values rather than a generated gradient)? The syntax used in plotr3.0 doesn’t work. I’ve been scouring through the code and can’t seem to figure it out.
January 6th, 2008 a las 1:49 pm
Someone knows if there is a mootools 1.2 port of plootr ?
February 1st, 2008 a las 3:10 pm
Ok, there’s some bug and i want to port plootr to Mootools 1,2.
Plotr has new version, Plootr isn’t still supported ?
If you can help me to explain what you did to port Plotr to Plootr (mootools), I will be glade to continue development.
Regards,