Chart Directive not found

[parakhkunal]

I'm getting an error when I try to load the ng2-charts directives I've the charts.js package installed via npm.

Any help would be appreciated

[parakhkunal]

Do we have to inject any dependencies in the boot file?

[born2net]

same issue here... any resolution?

[valorkin]

https://github.com/valor-software/ng2-charts#quick-start point number 2 if installed via npm, just change the route

[born2net]

sorry I dont understand, what do you mean change route? tx for the reply,

Sean

[valorkin]

I mean in quickstart sample using bower <script src="bower_components/Chart.js/Chart.min.js"></script> if you will be using npm, it should be something line <script src="node_modules/chart.js/Chart.min.js"></script>

[parakhkunal]

Hi valorkin,

I'm using node_modules and I have imported the right script. The error is not at the import statement. It only occurs when I provide CHART_DIRECTIVES as a part of the directives list.

[valorkin]

than provide more details about error and maybe gist for your use case

[born2net]

tx again for the time, for me, I don't get any errors, and I do see the Series A and Series B but nothing is rendering. You can see my webconfig: https://github.com/born2net/studioEnterprise/blob/charts/webpack.config.js

and you can see my source: https://github.com/born2net/studioEnterprise/blob/charts/src/comps/app1/business/BusinessView.ts

I am suspecting something is wrong with my webconfig as I am not loading the same way as you, but did include the CDN for charts.js

regards

[valorkin]

https://github.com/born2net/studioEnterprise/blob/charts/src/comps/ng2-charts/demo/index.html#L36

[valorkin]

I am afraid there could be a problem with charts.js itself if you are (and you are) using use strict chart.js wrapped in (function(){}).call(this); with use strict this will be undefined and not windows to make it work properly we need to update chart.js lib itself to be compiled in UMD style at least so you can require it

[born2net]

tx can you recommend snippet? I think if I can include it in http://ng2.javascriptninja.io/ it will add lots of followers to this project,,,

[born2net]

I had some progress but now stuck in Uncaught ReferenceError: webpackJsonp is not defined

[parakhkunal]

@valorkin , Here is the gist link https://gist.github.com/parakhkunal/acabbc452ed9a8a7d89f

I keep getting this error. Uncaught SyntaxError: Unexpected token < Uncaught SyntaxError: Unexpected token < Evaluating http://localhost:3002/ng2-charts/ng2-charts Error loading http://localhost:3002/app/boot.js

[cdaniel77]

@parakhkunal, I am getting that exact error now. Have you resolved the issue?

[parakhkunal]

@cdaniel77 , I could not. Waiting for some help from @valorkin

[born2net]

most of the issues were with my webconfig, this works: https://github.com/born2net/studioEnterprise/blob/charting/webpack.config.js

and here main dir: https://github.com/born2net/studioEnterprise/tree/charting/src/comps

but while I was able to load everything without errors, I could not get it to render. for now I am using ng2-highcharts until this project becomes more stable.

tx all for help

Sean

[cdaniel77]

@born2net , do you have an example I can follow? I can't seem to find anything past the initial install for high-charts for angular 2 beta. The GitHub for it has me very confused.

[born2net]

I have the links above, and a "smaller" project, but based on same git: https://github.com/born2net/ng2-charts but honestly I could not get it to render so not sure if worth your time... for now I went with: https://github.com/Bigous/ng2-highcharts which works in 5min essentially a wrapper for highcharts: https://github.com/Bigous/ng2-highcharts/blob/master/src/directives/ng2-highmaps.ts

I am sure this project will get better and more stable as all ng2 stuff in all beta...

[cdaniel77]

@inoabrian , those changes are already in my ng-charts code. My export has the exact same thing you have but it still throws the error that @parakhkunal has.

[cdaniel77]

(ng-charts:1) Uncaught SyntaxError: Unexpected token < (angular-polyfills.js:138) Uncaught SyntaxError: Unexpected token < Evaluating http://loclahost:3000/ng2-charts/ng2-charts Error Loading http://localhost:3000/app/boot.js

[cdaniel77]

the only thing I noticed is that when I add a new folder outside of the app folder, if I don't set the defaultExtensions in the System.config I get the exact same error. Once I add the new folder to the System.config and set it's defaults then the error goes away. I am wondering if the chart.js folder itself should be outside the node_modules and set in the System.config but leave the ng2-charts folder in the node_modules. If that could be a possible fix.

[parakhkunal]

@cdaniel77 According to me, it's best to keep all the node dependency modules inside the node_modules directory. Were you able to see the charts after your fix?

[parakhkunal]

@inoabrian No luck for me either

[inoabrian]

I got it to work... Follow this guy's stack Overflow post. http://stackoverflow.com/questions/34653045/third-party-js-in-angular2-typescript

[cdaniel77]

@inoabrian, I don't follow where things go at all. So do we add a chart.d.ts file in the chart.js folder? Can you provide more information please

[inoabrian]

chart.d.ts Can go anywhere you want the definition files to be.. I have mine in my tsd directory.

/app --/home --/schedule /tsd --/chartjs -----/chart.d.ts --/jquery -----/jquery.d.ts

and in your new directive like in the stack overflow answer you have the reference to it via /// <reference path="../../../../tsd/chartjs/chart.d.ts" />

The new directive could be a shared component so I placed it in my common/components directory.

/// <reference path="../../../../tsd/chartjs/chart.d.ts" />
import {Directive, ElementRef, Renderer, Input} from 'angular2/core';
@Directive({
    selector: '[chart]',
    properties:[
      'chartData'
    ]
})
export class LineChartDirective {
    public data:any = {};
    private ctx:any = {};
    private lineChart:any = {};
    constructor(el: ElementRef, renderer: Renderer) {
        this.ctx = el.nativeElement.getContext("2d");
        this.lineChart = new Chart(this.ctx);
    }

    @Input() set chartData(data:any){
      if(!!data){
        this.data = data;
        this.lineChart.Line(this.data,{
          responsive: true
        });
      }
    }
}

And in my safety component where I want to render my chart I import the LineChartDirective

import {LineChartDirective} from '../common/Component/Charts/LineChart/linechart.directive';
@Component({
  selector: 'safety',
  template: `
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <input [(ngModel)]="id" (keydown.enter)="getSingleElement()"class="form-control" type="text" required>
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <canvas id="myChart" chart [chartData]="data" width="400" height="400"></canvas>
      </div>
    </div>
  `,
  directives: [NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES,LineChartDirective]
})

[valorkin]

should be fixed in #136 please check (release 1.0.2)