Modular charts in Ionic?

Ionic Framework ionic-v3
42

TL;DR
You patched the ng2-charts package with that import after installing charts.js and then you just used the ng2-charts package as if you had used the script tag in index.html?

43

Yes that’s correct.

And then when you import CHART_DIRECTIVES from chart.ts it will import that automatically

44

No my sample doesn’t reflect that idea but I will update it and make it reflect the idea.

45

Don’t like the idea but at least it works.

46

So it’s the start of Charts.js or can we use it now? it seems like a fork of ng2-charts just for that.

47

I think i will fork ng2-charts and add the chart.js import instead of patching the library, it will work in the meantime.

48

This is even better if it’s fully developed. Uses the latest version of Chart.js (V2 BETA)

49

So that’s why i didn’t saw the file chart.js/Chart.min.js anywhere, so you suggest i grab ng2-charts, fork, grab peer dependency on charts.js V2.beta2 and make it work?

50

Not sure if it would work like that. You might have to create the definitions/directives from scratch.

Checkout the documentation here for Chart.js v2: http://nnnick.github.io/Chart.js/docs-v2/

It looks pretty much the same as V1 but I am sure a lot has changed.

edit v2 available for download via the github repo https://github.com/nnnick/Chart.js

51

V2 docs has changed, but i have no time to mess with the code right now, later i’ll see what has changed in my home.

52

We can collaborate on it in the future once Angular2, Ionic2 & Chart.js2 are getting more stable. Would be interesting.

53

Ok i think i will stick with c3 for now, i’ll try to contribute later when i have time to spare.

54

I put a quick demo together for that concept…
You can clone repo here: https://github.com/ihadeed/ionic2-ng2charts

55

Ja, nailed it, using the Webpack ProvidePlugin we can use the ng2-charts in a cleaner way, care to try it out? i have tested but seems i’m not setting up the chart correctly and no time to debug:

var path = require('path');
var ProvidePlugin = require('webpack/lib/ProvidePlugin');

module.exports = {
  entry: [
    path.normalize('es6-shim/es6-shim.min'),
    'reflect-metadata',
    path.normalize('zone.js/dist/zone-microtask'),
    path.resolve('app/app')
  ],
  output: {
    path: path.resolve('www/build/js'),
    filename: 'app.bundle.js',
    pathinfo: false // show module paths in the bundle, handy for debugging
  },
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'awesome-typescript',
        query: {
          doTypeCheck: true,
          resolveGlobs: false,
          externals: ['typings/browser.d.ts']
        },
        include: path.resolve('app'),
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        include: path.resolve('node_modules/angular2'),
        loader: 'strip-sourcemap'
      }
    ],
    noParse: [
      /es6-shim/,
      /reflect-metadata/,
      /zone\.js(\/|\\)dist(\/|\\)zone-microtask/
    ]
  },
  plugins: [
    new ProvidePlugin({
      Chart: 'chart.js/Chart.min.js',
    })
  ],
  resolve: {
    root: ['app'],
    alias: {
      'angular2': path.resolve('node_modules/angular2')
    },
    extensions: ["", ".js", ".ts"]
  }
};
56

I manage to delete the error but nothing renders, i think is a different error of the ng2-charts lib.

57

Hey Carlos,

I will test it out soon once I’m done with some work. Seems interesting to try out!

58

You’ve almost saved my day.
I used this https://github.com/mhartington/ionicv2-c3js.git
thx.
But i get new errors. One in particular:
“ngAfterViewInit is not defined”.
How in your script do you load this function?
I tried an
import {AfterViewInit} from ‘angular2/bundles/angular2’;
But no success

59

Nop, ngAfterViewInit is a property of angular components, relate to: Directive and component change detection and lifecycle hooks

Go to that section and search for ngAfterViewInit.

60

Ok but it doesn’t explain the error.

In his script “mhartington” has an:
"import {Page} from ‘ionic-angular’;“
My imports are all from “ionic-framework/ionic” or c3:
import {Page, NavController, NavParams} from ‘ionic-framework/ionic’;
import {Platform} from ‘ionic-framework/ionic’;
import * as c3 from ‘c3’;
And i get:
“Error during instantiation of” my page and
"ngAfterViewInit is not defined”.

Is it the “export class ChartsPage implements AfterViewInit” which doesn’t really works ?
How do I have this “ngAfterViewInit” property available?

61

His example uses ionic-angular because he’s using ionic framework 2.0.0-beta.2+ (+ means 2 or more), if you see the changelog the npm package was renamed in beta.2 to ionic-angular, the c3 import is OK.

So here’s some questions to be able to answer better:

  1. Did you run npm i on the project?
  2. Are you using webpack or browserify?
  3. What’s the output of ionic info?

Side note: ngAfterViewInit is just a function that angular 2 components will call whenever the view has been initialized, just like the constructor get’s called each time you use the call, ngAfterViewInit is called just after the constructor and after the view is initialized, take note on the link of my previous post (Did you even looked at it), this method only apply to components, in ionic means it applies to Pages and Components, the ones that uses templates in html.