Para crear el gráfico, primero buscaremos los datos presentes en nuestra hoja de cálculo a través de una llamada AJAX. Después de que la llamada AJAX tenga éxito, reestructuraremos los datos de la hoja de cálculo y crearemos el gráfico usando FusionCharts.
Para hacer la llamada AJAX, usaremos el método $.get() de jQuery.
Obtención de los datos
Para incluir jQuery, añade la siguiente etiqueta de guión:
1<scripttype="text/javascript "src="https://code.jquery.com/jquery-1.12.0.min.js></script>
html
Ahora haremos una llamada AJAX a la hoja de Google que creamos usando el método $.get() de jQuery en el controlador de nuestra aplicación.
12345678$.get({ url:$0027https://spreadsheets.google.com/feeds/list/187iKB7ekhP96evCySKBWy5LfWErrJDono-8glzFPcCY/od6/public/basic?alt=json$0027,success:function(revenueData){// procesamiento de datos y creación de gráficos para ir aquí});js
Análisis de los datos
Los datos que obtuvimos de la hoja de cálculo tienen que ser convertidos al formato que FusionCharts entiende. FusionCharts acepta los datos JSON como un conjunto de objetos que contienen una etiqueta y un valor. Así es como se ve:
1234567[{"etiqueta": "Patata", "valor": "80"},{"etiqueta": "Tomate", "valor": "70"}...]js
Para lograrlo, necesitamos ejecutar el siguiente trozo de código en la función de éxito de la función jQuery get que definimos anteriormente.
123456789101112var data = revenueData.feed.entry, revenueDataLength = data.length, chartData =[], datum;for(var i =0; i < revenueDataLength; i++){ datum = data[i]; chartData.push({ label: datum.title.$t, value: datum.content.$t.replace("revenue: ","")});}js
Explicación del código anterior: Estamos usando un bucle de for para iterar sobre cada objeto de datos de la hoja de cálculo presente en la entrada revenueData.feed. Estamos haciendo esto para extraer la etiqueta y el valor de la misma. Luego almacenamos los valores extraídos en una nueva matriz llamada chartData, que será utilizada por el gráfico.
La etiqueta está disponible en la clave title.$t y el valor está disponible en la clave content.$t del objeto de datos. El valor que hemos extraído contiene el nombre de la columna de la hoja de cálculo, que no es necesario, y por lo tanto lo eliminamos. El resto de los datos de la hoja de cálculo no son necesarios para nuestro proyecto.
chartData contiene ahora datos en un formato que será comprendido por FusionCharts. Finalmente, estamos listos para crear el gráfico!
Renderizando el gráfico
Para crear el gráfico usaremos el plugin de gráficos AngularJS de FusionCharts. El plugin expone FusionCharts a través de una directiva de AngularJS que hace que la creación del gráfico en AngularJS sea un poco más fácil. Para aprender más sobre el plugin o ver algunas demostraciones en vivo, dirígete a la página oficial. Para este tutorial, he alojado el plugin en Google Drive.
Crearemos un gráfico de rosquillas en 3D, así que sólo necesitamos la biblioteca central de FusionCharts; fusioncharts.js.
Incluiremos AngularJS, jQuery, FusionCharts, y el plugin AngularJS de FusionCharts usando etiquetas HTML:
1234<scriptsrc=$0027https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.min.js$0027></script><scriptsrc=$0027https://code.jquery.com/jquery-1.12.0.min.js$0027>/script><scriptsrc=$0027/location/of/fusioncharts.js$0027>/script>;scriptsrc=$0027/location/of/angular-fusioncharts.min.js$0027>/script>
html
Después de incluir estas dependencias, modificaremos la aplicación que hemos creado para incluir el módulo ng-fusioncharts, que es el plugin que estamos usando.
1var myApp = angular.module("chartApp",["ng-fusioncharts"]);js
Y ahora, necesitamos añadir la directiva del plugin en la plantilla:
123456<fusionchartswidth="100%"height="400 "type="doughnut3d "datasource="{{sheetDataSource}}"html
Este código le dice al plugin que cree el gráfico doughnut3d usando el objeto sheetDataSource y las dimensiones especificadas. Una vez que establezcamos el objeto sheetDataSource después de obtener los datos, el gráfico se renderizará. El siguiente código en la llamada de éxito establece la hojaFuente de Datos:
1234567891011$scope.$apply(function(){ $scope.sheetDataSource={ chart:{ caption: "Revenue Split", captionFontColor: "#000"// more chart cosmetics}, data: chartData };});js
Aquí estamos envolviendo la configuración de la hoja Fuente de Datos en $scope.$aplicar para activar un observador en ella y actualizar el gráfico. Esto se hace porque, por defecto, Angular no actualiza la UI–una vez que la variable se actualiza, tenemos que activarla manualmente. Mucho más sobre $applyhere.
En el fragmento de código anterior sólo he mostrado dos atributos; caption y captionFontColor, pero hay literalmente cientos de atributos que FusionCharts ofrece para personalizar un gráfico. No es posible definir todos los atributos aquí, así que sólo he explicado los pocos que son más importantes.
- BaseFont: Puedes usar el atributo baseFont para ajustar la familia de fuentes que se utiliza en tu gráfico. Puedes usar cualquier fuente bajo el sol. En mi ejemplo, usé «Open Sans». Simplemente incluye el archivo de fuente relevante en tu HTML y estarás listo para empezar a usarlo en tu gráfico
- paletaColores: Puedes definir un conjunto de colores en código hexadecimal usando este atributo. El pastel más grande tomará el primer color y el siguiente tomará el segundo y así sucesivamente.
- toolTipBgColor: Este atributo controla el color de fondo de la punta de la herramienta. Puedes usar atributos similares como toolTipPadding y toolTipBgAlpha para controlar el relleno y la transparencia del fondo, respectivamente.
Para más información, puede visitar la página de atributos del gráfico para el gráfico de rosquillas.