Bluff, es una librería JS portada de Gruff (librería de gráficas para Ruby) con la que podemos crear gráficas con Javascript con un código bastante limpio y claro.
// Make a graph object with canvas id and width
var g = new Bluff.Line('example', 400);
// Set theme and options
g.theme_keynote();
g.title = 'My Graph';
// Add data and labels
g.data('Apples', [1, 2, 3, 4, 4, 3]);
g.data('Oranges', [4, 8, 7, 9, 8, 9]);
g.data('Watermelon', [2, 3, 1, 5, 6, 8]);
g.data('Peaches', [9, 9, 10, 8, 7, 9]);
g.labels = {0: '2003', 2: '2004', 4: '2005'};
// Render the graph
g.draw();
Mediante el uso de tablas podremos insertar de los datos que conformarán el gráfico, dotando a la aplicación de una alternativa visible y tabulada de mostrar datos. En caso de disponer de Javascript, Bluff mostrará un gráfico ocultando la tabla de donde recoge los datos.
<table id="data">
....
</table>
<canvas id="graph"></canvas>
<script type="text/javascript">
var g = new Bluff.Line('graph', 300);
g.theme_odeo();
g.data_from_table('data');
g.draw();
</script>
Para mostrar los datos, podemos optar por una amplia lista de posibilidades.
Bluff.AccumulatorBar
Bluff.Area
Bluff.Bar
Bluff.Line
Bluff.Mini.Bar
Bluff.Mini.Pie
Bluff.Mini.SideBar
Bluff.Net
Bluff.Pie
Bluff.SideBar
Bluff.SideStackedBar
Bluff.Spider
Bluff.StackedArea
Bluff.StackedBar
Como todos los buenos desarrollos, permiten una gran personalización y es posible modificar el aspecto de la salida con una básica API de personalización de themes.
g.set_theme({
colors: ['#202020', 'white', '#a21764', '#8ab438',
'#999999', '#3a5b87', 'black'],
marker_color: '#aea9a9',
font_color: 'black',
background_colors: ['#ff47a4', '#ff1f81']
});
3 comentarios, 0 referencias
+
#