how to integration zoom Chart with angular 2

Question

is this possible to integrate Zoom chart with angular 2need basic idea is anyone done this before , didn't find any thread related to this on Internet that's why i asked here, any clue ?

Answer 1

1. Description based on angular-seed application

For Angular2 - here are step by step instructions on how to get ZoomCharts running within the angular-seed application. Note that they only describe the steps to get a sample running within the seed application, not the steps required to build fully functional component.

1. Copy zoomcharts.d.ts file into /tools/manual_typings/project/ folder.

2. Modify the zoomcharts.d.ts file to support CommonJS/SystemJS module system by adding at the top of it these lines:

declare module "ZoomCharts" { export = ZoomCharts; }

3. In the tools\project.config.ts file add this line into the constructor (of course, using CDN is optional) to register the library with SystemJS loader:

this.addPackagesBundles([{ name: "ZoomCharts", path: "https://cdn.zoomcharts-cloud.com/1/latest/zoomcharts.js" }]);

4. Create a new component for the chart, for example, /src/client/app/home/zc-pie-chart.component.ts

``` ///

import { Component, OnInit, ViewChild, AfterViewInit, ElementRef } from '@angular/core'; import { PieChart } from "ZoomCharts";

@Component({ moduleId: module.id, selector: "zc-pie-chart", template: "PieChart is being initialized..." }) export class ZcPieChart implements AfterViewInit {

@ViewChild("container") 
private container: ElementRef;

ngAfterViewInit() {
    var x = new PieChart({
        container: this.container.nativeElement,
        assetsUrlBase: System.paths["ZoomCharts"] + "/../assets/",
        data: [{
            url: "https://zoomcharts.com/dvsl/data/pie-chart/browsers.json",
        }]
    });
} } ```

5. Register the component in the module (in this sample case, home.module.ts):

``` import { ZcPieChart } from './zc-pie-chart.component';

.. declarations: [..other components.., ZcPieChart], .. ```

6. Add it to the view, for example, home.component.html:

<zc-pie-chart></zc-pie-chart>

2. Integration with Webpack

Note: I tested this with Webpack 2.2.1.

With Webpack you can use simple import ZoomCharts from './zoomcharts/zoomcharts.js'; and it works fine - including bundling of the zoomcharts.js code.

Though in such case ZoomCharts will now load dependencies such as moment.js by itself even if they are already included in the webpack bundle. To enable loading moment.js from the bundle, I used this webpack.config.js file (and using the imports-loader plugin):

```js var path = require('path');

module.exports = { entry: './index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname) }, resolve: { alias: { "moment": path.resolve(__dirname, "zoomcharts", "assets", "moment.js"), "moment-timezone": path.resolve(__dirname, "zoomcharts", "assets", "moment-tz.js"), "zoomcharts": path.resolve(__dirname, "zoomcharts", "zoomcharts.js"), } }, module: { rules: [ { test: path.resolve(__dirname, "zoomcharts", "zoomcharts.js"), loader: { loader: "imports-loader", options: { "moment": "moment", "momentTimezone": "moment-timezone", // workaround that sets window.moment as required by zoomcharts.js "_": ">window.moment=moment;" } } } ], } }; ```

Answer 2

first install zoomchart dependency

npm install --save @dvsl/zoomcharts

Html

<script src="https://cdn.zoomcharts-cloud.com/1/latest/zoomcharts.js"></script>
<div id='demo' style='width:100%; height:300px;'></div>

in ts file create a method

import * as zc from '@dvsl/zoomcharts';
import { WindowRef } from './../../WindowRef';
import { Component, OnInit} from '@angular/core';

export class ZoomChartImplementation implements OnInit{

private zc: any = zc;

constructor(private winRef: WindowRef){
winRef.nativeWindow.ZoomChartsLicense = 'INSERT YOUR ZOOM CHART LICENSE HERE';
winRef.nativeWindow.ZoomChartsLicenseKey ='INSERT YOUR ZOOM CHART LICENSE KEY HERE';
}

loadZoomChart(){
const PieChart = this.zc.PieChart;
const t = new PieChart({
  container: document.getElementById('demo'),
  area: { height: 350 },
  data: {
    preloaded: {
      subvalues: [
        {
          id: 'foo', value: 100, subvalues: [
            { id: 'foo-1', value: 50, style: { expandable: false } },
            { id: 'foo-2', value: 50, style: { expandable: false } }
          ]
        },
        { id: 'bar', value: 50, style: { expandable: false } },
        { id: 'baz', value: 30, style: { expandable: false } }
      ]
    }
  }
});

}

}

you can use any chart instead of pie-chart in my example
this.zc.ANY_CHART