🎃 Grandes descuentos en libros en línea, eformaciones y vídeos*. Código CALABAZA30. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros
  2. Aprender a desarrollar con JavaScript
  3. Gráficos de gestión
Extrait - Aprender a desarrollar con JavaScript Aspectos principales del uso de frameworks (4ª edición)
Extractos del libro
Aprender a desarrollar con JavaScript Aspectos principales del uso de frameworks (4ª edición)
1 opinión
Volver a la página de compra del libro

Gráficos de gestión

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:

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...