Modular charts in Ionic?

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

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.

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

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

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

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"]
  }
};

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

Hey Carlos,

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

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

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.

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?

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.

Thx for you help
I’ve just poorly copy and past the ngAfterViewInit function inside the constructor.:confused:

:smirk:Oh nononono, it goes side to side with the constructor method.

btw… does this chart library work well on Android 4.4 (Kitkat+)? I am starting to investigate a visualization library for an ionic2 app and can benefit from the homework already done by others.

Thanks.

It does, i recently tested with 4.4.2, well it should, the hotfix versions should be backwards compatible (4.4.x)

1 Like

I have another pb.
Althoug i include c3 in ionic’s build process as described, the include c3 scss is not compiled with the rest of css.
I tried a “ionic setup sass”.
But it doesn’t work because “No gulpfile found”.
Why ?

Here is my Sys infos:
Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Version: 2.0.0-beta.1
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X Mavericks
Node Version: v4.3.0
Xcode version: Xcode 6.0.1 Build version 6A317

Because of my previous c3 scss compilation pb, I decided to update (as advised by ionic) my cli.
Aouch.
I have only SyntaxErrors one after another.
I tried to fix them as it should be now but didn’t succeed.
I get a weird “SyntaxError: Unexpected token” for the i of implements.
Unexpected token (8:24)
6 | templateUrl: ‘build/pages/charts/charts.html’,
7 | })

8 | export class ChartsPage implements AfterViewInit {

Please Mike Hartington can you update your ionicv2-c3js git in order it works with the new cli and explain how to create a ionic project with it through the CLI.

PS: the learning curve of ionic 2 is really hard.

Learning curve is not that hard, the hard parts is to set the dev env and the third party libraries.
I used ng2-charts instead of c3, c3 + d3 increases the apk file size +800 kb, while the chart.js + ng2-charts only increase +70 kb.

PD: I tested with webpack-bundle-size-analyzer npm package.

Hi @ihadeed,

Have you tried the latest chart.js 2.0.2?

I just discovered, by mistake, that one does not have chart.ts anymore and don’t know how I will be able to use the new one. For now, I will revert back to 1.1.1

Thanks in advance