Gráficos de gestión

Name: Aprender a desarrollar con JavaScript Aspectos principales del uso de frameworks (4ª edición)
Rating: 1 (1 reviews)

Diferentes soluciones de diseño de gráficos de gestión

Existen múltiples soluciones que permiten elaborar gráficos de gestión (histogramas, representaciones en sectores, nube de puntos...), disponibles en las páginas web.

Estas herramientas son a menudo librerías escritas en PHP e incluso en Java. Algunos ejemplos son:

JpGraph: http://jpgraph.net/
JFreeChart : http://www.jfree.org/jfreechart/
GraphoViz: http://www.graphviz.org/
Highcharts JS: http://www.highcharts.com/

Por su parte, Google ha desarrollado una serie de API que permiten diseñar, de manera sencilla, gráficos de gestión interesantes. Estos API se agrupan en la denominada Google Charts.

Ejemplos de uso de los API de Google Charts

No se pretende reproducir todos los ejemplos propuestos por Google para ilustrar las diferentes y abundantes posibilidades que ofrecen estos API. Nos conformamos aquí con proponer algunos ejemplos significativos.

Los ejemplos ofrecidos por Google están disponibles en la dirección: https://developers.google.com/chart/?hl=es

1. Ejemplo 1: Dibujar un histograma

El objetivo de este gráfico es sencillo. Se trata de asegurar la presentación como un histograma (barras verticales) de la producción de un producto LAMBDA (expresado en toneladas) en tres países (Italia, Francia y España), para los años 2010, 2011 y 2012.

Sobre el histograma, se dibujará una "línea punteada" con la media de la producción por año.

Sección HTML <body>

El código situado en esta sección será casi idéntico para todos los ejemplos de este capítulo. Aquí se reproduce íntegramente:

<!-- Inicio sección body del script HTML --> 
<body> 
    
   <!-- Título del procesamiento --> 
   <h1>Ediciones ENI - JavaScript - COMBO</h1> 
  
   <!-- Inicio script JavaScript --> 
   <script type="text/javascript"> 
             
           /* Visualización del nombre del script */ 
           alert("COMBO"); 
     
   </script> 
     
   <!-- Definición de la capa de visualización del gráfico --> 
   <div id="chart_div" style="width: 900px; height: 500px;"></div> 
     
   <!-- Visualización del código fuente --> 
   <br /><br /><br /> 
   <center>  
   <a href="JavaScript:window.location='view-source:' + 
   window.location"> 
           Código fuente 
   </a> 
   </center> 
  
</body>

Se diseña una capa (chart_div) en este código...