aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

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