Menu

Gráficos con Ngx-charts

chartsdemos - September 26, 2017 por Nicolas Molina
ionic3.6.1ionic-native4.2.1ionic-app-scripts2.1.4cordova-cli7.0.1ionic-cli3.10.3

La visualización de datos es una de las habilidades que ahora es relevantes debido a la gran cantidad de información que se tiene en el momento, estas gráficas ayudan a ver métricas que facilitan la toma decisiones y en Angular existe ngrx-charts una grandiosa librería que nos ayuda con esta labor.

En el artículo vamos a implementar la librería de ngrx-charts en Ionic/Angular, la cual es una librería para mostrar gráficas usando Angular y D3JS. Pero lo que hace diferente a esta librería, es que no es wrapper de D3JS, ngrx-charts usa SVG manipulado por Angular y D3JS para funciones matemáticas, escalas, ejes etc. Y esto hace que los gráficos generados por ngrx-charts pueda usar ventajas de Angular como AOT, Angular Universal, Angular Animations etc.

Aquí pueden ver la motivación de los creadores de esta librería y el porqué renderizar con Angular Vs crear un wrapper de D3JS.

Dentro de sus características nos ofrecen varios componentes que tienen los siguientes tipos de gráficas:

  • Horizontal & Vertical Bar Charts (Standard, Grouped, Stacked, Normalized)
  • Line
  • Area (Standard, Stacked, Normalized)
  • Pie (Explodable, Grid, Custom legends)
  • Donut
  • Gauge
  • Force Directed Graph
  • Heatmap
  • Treemap
  • Number Cards
  • Bubble/Scatter

Sin embargo si contamos con conocimientos de SVG, D3JS y animaciones podemos extender la librería y crear componentes personalizados. Pueden ver mas de sus caracteristicas en https://swimlane.gitbooks.io/ngx-charts/content/intro/features.html.

En ion-book hemos creado un proyecto donde irémos agregando cada uno de los tipos de gráficos con cada artículo y funcionará como App Web, PWA y para Android y IOS, La pueden ver en:

Ver demo

Y el código en: https://github.com/ion-book/demo121.

Iniciando el proyecto

Lo primero que haremos será iniciar un nuevo proyecto con ionic, vamos a nuestra terminal y ejecutamos:

ionic start demo121 blank --cordova

Para usar ngrx-charts en Ionic/angular solo debemos instalar como dependencias a @angular/animations, ngrx-charts y d3js, así:

npm install @angular/animations@4.1.3
npm install @swimlane/ngx-charts --save
npm install d3 --save

Nota: ngx-charts 5.0.0 funciona solo con versiones de Angular 4.x. Para usar ngx-charts con Angular 2.x, se puede usar ngx-charts 4.x.

Y ya eso es todo! ahora vamos a trabajar dentro de Ionic con Lazy Loading, recuerda que esto reduce tiempos de carga en la aplicación, puedes ver más sobre Lazy Loading en: Reduce el tiempo de carga de tu app.

Como vamos a trabajar con Lazy Loading, en cada module que queramos usar las gráficas de ngx-charts debemos importar el módulo de ngx-charts, así:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { BarHorizontalPage } from './bar-horizontal';
import { NgxChartsModule } from '@swimlane/ngx-charts';

@NgModule({
  declarations: [
    BarHorizontalPage,
  ],
  imports: [
    NgxChartsModule,
    IonicPageModule.forChild(BarHorizontalPage),
  ],
})
export class BarHorizontalPageModule {}

Luego debemos importar BrowserAnimationsModule en el archivo app.module.ts, asi:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

...

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    ...
    BrowserAnimationsModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    DuetyApp
  ],
  providers: [...]
})
export class AppModule {}

Con esto ya podemos empezar a trabajar, ngx-charts es declarativo, así que solo hace falta empezar a usar sus componentes dentro de nuestro template con los datos necesarios.

Bar charts

En este primer artículo implementaremos los gráficos de barras de nos ofrece ngx-charts y luego en siguientes artículos veremos los demás gráficos, hasta llegar a crear componentes personalizados.

Una gráfico de barras simple se veria, así (sin hacer mayor trabajo en las opciones que tiene):

Para mostrar el gráfico anterior solo se necesita declarar en el template, el siguiente componente:

<ngx-charts-bar-vertical
  [view]="view"
  [results]="data"
  xAxis="true"
  yAxis="true"
  legend="true"
  legendTitle="Countries"
  showXAxisLabel="true"
  showYAxisLabel="true"
  xAxisLabel="Country"
  yAxisLabel="GDP Per Capita">
</ngx-charts-bar-vertical>

Donde los parámetros más importantes son view y results, view son las dimensiones que tendrá la gráfica y results los datos que va a graficar. Por ejemplo para el gráfico anterior corresponden los siguientes datos:

[
  {
    'name': 'Germany',
    'value': 31229
  },
  {
    'name': 'United States',
    'value': 19869
  },
  {
    'name': 'France',
    'value': 21359
  },
  {
    'name': 'United Kingdom',
    'value': 20598
  },
  {
    'name': 'Spain',
    'value': 56009
  },
  {
    'name': 'Italy',
    'value': 24090
  }
];

Otra buena opción cuando contamos con una serie de datos del mismo grupo, puede ser mostrar gráficos de barras en grupos, así:

Para mostrar el gráfico anterior solo se necesita declarar en el template, el siguiente componente:

<ngx-charts-bar-vertical-2d
  [view]="view"
  [results]="data"
  xAxis="true"
  yAxis="true"
  legend="showLegend"
  legendTitle="Countries"
  barPadding="2"
  showXAxisLabel="true"
  showYAxisLabel="true"
  xAxisLabel="GDP Per Capita"
  yAxisLabel="Country">
</ngx-charts-bar-vertical-2d>

Donde esta vez los datos deben ir organizados así:

[
  {
    'name': 'Germany',
    series: [
      {
        name: '1990',
        value: 32961
      },
      {
        name: '2000',
        value: 10723
      },
      {
        name: '2010',
        value: 54488
      }
    ]
  },
  ...
];

Otro tipo de gráfica que en mi opinión es muy interesante es el tipo Stacked Bar donde cada barra está dividida por el peso de cada número y la peso total de la barra es la suma total de ellos:

Para mostrar el gráfico anterior solo se necesita declarar en el template, el siguiente componente:

<ngx-charts-bar-vertical-stacked
  [view]="view"
  [results]="data"
  xAxis="true"
  yAxis="true"
  legend="true"
  legendTitle="Countries"
  showXAxisLabel="true"
  showYAxisLabel="true"
  xAxisLabel="GDP Per Capita"
  yAxisLabel="Country">
</ngx-charts-bar-vertical-stacked>

Y los datos también van agrupados en series, así:

[
  {
    'name': 'Germany',
    series: [
      {
        name: '1990',
        value: 32961
      },
      {
        name: '2000',
        value: 10723
      },
      {
        name: '2010',
        value: 54488
      }
    ]
  },
  ...
];

Con frecuencia un Stacked Bar se usa para notar que el peso total de la barra está relacionada con otros valores. Ejemplos:

Source: http://www.thevisualagency.com/portfolio/grafici-interattivi-comunicazione-finanziaria/
Source: https://www.behance.net/gallery/21631653/Merck-Infographic
Source: https://www.flickr.com/photos/densitydesign/8089722832/in/album-72157631774207511/


Ahora al compilar para Android veremos el resultado:


Ver código

Ver demo

¡Compártelo!