Ontimize Web Charts

An implementation of nvD3 and d3 charts library for Ontimize Web.

• Examples
• Installation
• Usage

Examples

Check out examples demo here

Installation

First you need to install chart module dependencies (d3 and nvD3 libraries):

npm install [email protected] [email protected] [email protected] --save

Do not forget to add typings as well

typings install d3 nvd3 --ambient -DA

After that, install the npm chart module:

npm install ontimize-web-ng2-charts --save

Usage

Finally, you can use ontimize-web-ng2-charts in your Ontimize Web project.

Configure third party dependencies and chart module (Angular-cli & SystemeJS)

Configure third party dependencies like this:

system-config.ts

const cliSystemConfigPackages: any = {
};
// ontimize chart module
cliSystemConfigPackages['ontimize-web-ng2-charts'] = { main: 'index' };
// third party dependencies
cliSystemConfigPackages['d3'] = { main: 'd3.min' };
cliSystemConfigPackages['nvd3'] = { main: 'build/nv.d3.min' };
cliSystemConfigPackages['ng2-nvd3'] = { main: 'ng2-nvd3' };

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    ...

    'ontimize-web-ng2-charts': 'vendor/ontimize-web-ng2-charts',

    'd3': 'vendor/d3',
    'nvd3': 'vendor/nvd3',
    'ng2-nvd3': 'vendor/ng2-nvd3/build/lib',
    },
  packages: cliSystemConfigPackages
});

angular-cli-build.js

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ....

      'ontimize-web-ng2-charts/*.js',
      'ontimize-web-ng2-charts/src/**/*.js',

      'd3/*min.js',
      'nvd3/build/*min.js',
      'ng2-nvd3/build/lib/*.js',

      'ontimize-web-ng2-charts/**/*.(css|scss)',
      'nvd3/build/*.+(css|css.map)'
     ]
  });
};

index.html Do not forget to include CSS style sheets

<link rel="stylesheet" type="text/css" href="./vendor/ontimize-web-ng2-charts/styles.scss"/>

app.module.ts Include the library chart module into your app.

...
import { OChartModule } from 'ontimize-web-ng2-charts';
...

@NgModule({
  imports: [ ONTIMIZE_MODULES, routing, OChartModule],
  declarations: [
    AppComponent,
    ONTIMIZE_DIRECTIVES,
    ...APP_DIRECTIVES
  ],
  bootstrap: [ AppComponent ],
  providers: [
    ...standardProviders,
    ...customProviders
  ]
})
export class AppModule { }