Contenido

Bluff, gráficos canvas con Javascript

26 oct

+ 3

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

bluff_javascript_graphics

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']
  });

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.