Ontimize Web Charts
An implementation of nvD3 and d3 charts library for Ontimize Web.
Examples
Check out examples demo
here
Installation
First you need to install chart module dependencies (d3 and nvD3 libraries):
npm install d3@3.5.6 nvd3@1.8.4 ng2-nvd3@1.1.3 --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 { }
