valor-software / ng2-charts Goto Github PK

Hi,

I have rewritten my app from Angular 1.5 + angular-chartjs to Angular 2 + ng2-charts and I'm experiencing a massive performance difference. I'm using sockets to update my chart 30 times per second. Maybe is related to the way rerendering is done in ng2-charts.

I was just wondering if you have done any performance tests or if you have any ideas for optimizing?

Thank you in advanced!

I'm looking forward to using ng2-charts for displaying brainwaves in real time.

Best,

Alex

We need to provide all of the properties and events logic from Line Chart (https://github.com/jtblin/angular-chart.js)

Hello,

When we can expect update of the library to work with angular2 RC version?

Since angular2 libraries are loaded from '@angular/...', i am receiving error:

• Error loading http://localhost:4200/angular2/core, angular2/common...

Thanks in advance.

Hi. i have this error when I try to show any chart.

EXCEPTION: IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-0.5) is negative.

I tried to delay chart generation until outer 'div' has shown but nothing.

It's a known bug?

Thanks.

I just can't configure this thing work with angular2-beta-17 and systemjs correctly , I already lost my faith

Hello,

When including a component into my main-app, that has an ng2-charts import
import {CHART_DIRECTIVES} from 'ng2-charts/ng2-charts';
I get the following error:
angular2-polyfills.js:332 Error: SyntaxError: Unexpected token <(…)

I installed using the instructions here and then tried the Barchart example from the demos.

This is my index.html
`

<!-- build:js assets/bundle.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/Chart.js/dist/Chart.js"></script>
<script src="/bower_components/bootswatch-dist/js/bootstrap.js"></script>
<!-- endinject -->

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<!-- endbuild -->

<!-- build:remove -->
<script src="systemjs.conf.js"></script>
<!-- endbuild -->

<script>
    System.import('app/main.js')
        .then(null, console.error.bind(console));
</script>

When using bower to install Chart.js you automatically get version 2 of the library. This version of Chart.js does not work with ng2-charts (yet?). Perhaps this can be adjusted in the README.

I often have the problem that I round up or down values, to 1 decimals, but i don't know why die chart will displayed as in screenshot

 this.temperatures.forEach(function(record) {
           i++;
           labels.push(i);

           values.push(record.temperature.value.toFixed(1));
       });

       this.data = {
            labels: labels,
            datasets: [
                {
                    fillColor: 'rgba(220,220,220,0.2)',
                    strokeColor: 'rgba(220,220,220,1)',
                    pointColor: 'rgba(220,220,220,1)',
                    pointStrokeColor: '#fff',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'rgba(220,220,220,1)',
                    data: values
                }
            ]
        };

as you can see, I make a toFixed(1) but the values will displayed like in the screenshot

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

Blocked by chartjs/Chart.js#2000

Everything seems up to speed, added the CSS to get LineCharts to show up (first had the mouse over issue), a canvas is rendered, but now it is telling me this:

ReferenceError: Chart is not defined in [lineChartOptions in LineChart@4:8]

I used the demo and it does log "line demo" in the console, so it seems everything is rooted well.

Using angular2.0beta15

Help would be appreciated

Hi.

Can you give a simple demo for one chart. I can see the example with all charts but it is a mess. This is not an example for beginners.
Been struggling to make it work for 2 days but it does not work.

Getting errors when trying to build the thing by running npm start.

ERROR in ./~/ng2-bootstrap/components/datepicker/date-formatter.ts
(1,25): error TS2307: Cannot find module 'moment'.

ERROR in ./demo/components/charts-section.ts
(4,9): error TS2305: Module '"d:/charts/chartjs/ng2-charts/node_modules/ng2-bootstrap/ng2-bootstrap"' has no exported member 'tabs'.

ERROR in d:\charts\chartjs\ng2-charts\node_modules\angular2\src\facade\promise.d.ts
(1,10): error TS2661: Cannot re-export name that is not defined in the module.

ERROR in multi angular2
Module not found: Error: Cannot resolve module 'zone.js/dist/zone-microtask' in d:\charts\chartjs\ng2-charts
 @ multi angular2

ERROR in ./~/ng2-bootstrap/~/angular2/src/facade/async.js
Module not found: Error: Cannot resolve module 'rxjs/observable/PromiseObservable' in d:\charts\chartjs\ng2-charts\node_modules\ng2-bootstrap\node_modules\angular2\src\facade
 @ ./~/ng2-bootstrap/~/angular2/src/facade/async.js 10:26-70

Second error ...has no exported member 'tabs'. I fixed by replacing import {tabs} from 'ng2-bootstrap/ng2-bootstrap'; with import {TAB_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
All the rest errors are related to Agular2

I am able to use Chartjs making a custom directive with chartjs following this link http://stackoverflow.com/questions/34653045/third-party-js-in-angular2-typescript.

I am not able to get this library to work. Not sure what the error is as it is quite cryptic. I have tried referencing the d.ts file in the project with no changes to the error below.

Anyone had the same issue or who can point me in the right direction?

Uncaught SyntaxError: Unexpected token <
    Evaluating http://localhost:3000/ng2-charts/ng2-charts
    Error loading http://localhost:3000/app/main.js

I just created a project based on https://github.com/preboot/angular2-webpack and copied the charts over to play with. But getting an errors:

lang.js:352 Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
line-chart-demo.ts:17 line demo
linechart.ts:19 Hello Chart
browser_adapter.js:85 EXCEPTION: Error during evaluation of "mousemove"
browser_adapter.js:76 EXCEPTION: Error during evaluation of "mousemove"BrowserDomAdapter.logError @ browser_adapter.js:76BrowserDomAdapter.logGroup @ browser_adapter.js:86ExceptionHandler.call @ exception_handler.js:56(anonymous function) @ application_ref.js:193generatorOrNext.object.schedulerFn @ async.js:122SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:111NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:119NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:65ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244NgZoneImpl.runInner @ ng_zone_impl.js:75NgZone.run @ ng_zone.js:220outsideHandler @ dom_events.js:28ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263ZoneTask.invoke @ angular2-polyfills.js:431
browser_adapter.js:76 ORIGINAL EXCEPTION: TypeError: Cannot read property 'getPointsAtEvent' of undefinedBrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:65(anonymous function) @ application_ref.js:193generatorOrNext.object.schedulerFn @ async.js:122SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:111NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:119NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:65ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244NgZoneImpl.runInner @ ng_zone_impl.js:75NgZone.run @ ng_zone.js:220outsideHandler @ dom_events.js:28ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263ZoneTask.invoke @ angular2-polyfills.js:431
browser_adapter.js:76 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:68(anonymous function) @ application_ref.js:193generatorOrNext.object.schedulerFn @ async.js:122SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:111NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:119NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:65ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244NgZoneImpl.runInner @ ng_zone_impl.js:75NgZone.run @ ng_zone.js:220outsideHandler @ dom_events.js:28ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263ZoneTask.invoke @ angular2-polyfills.js:431
browser_adapter.js:76 TypeError: Cannot read property 'getPointsAtEvent' of undefined
    at BaseChart.hover (charts.ts:190)
    at AbstractChangeDetector.ChangeDetector_BaseChart_0.handleEventInternal (viewFactory_BaseChart:37)
    at AbstractChangeDetector.handleEvent (abstract_change_detector.js:57)
    at AppView.triggerEventHandlers (view.js:221)
    at eval (viewFactory_BaseChart:84)
    at dom_renderer.js:282
    at dom_events.js:28
    at ZoneDelegate.invoke (angular2-polyfills.js:332)
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (ng_zone_impl.js:44)
    at ZoneDelegate.invoke (angular2-polyfills.js:331)BrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:69(anonymous function) @ application_ref.js:193generatorOrNext.object.schedulerFn @ async.js:122SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:111NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:119NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:65ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244NgZoneImpl.runInner @ ng_zone_impl.js:75NgZone.run @ ng_zone.js:220outsideHandler @ dom_events.js:28ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263ZoneTask.invoke @ angular2-polyfills.js:431
browser_adapter.js:76 ERROR CONTEXT:BrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:72(anonymous function) @ application_ref.js:193generatorOrNext.object.schedulerFn @ async.js:122SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:111NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:119NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:65ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244NgZoneImpl.runInner @ ng_zone_impl.js:75NgZone.run @ ng_zone.js:220outsideHandler @ dom_events.js:28ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263ZoneTask.invoke @ angular2-polyfills.js:431
browser_adapter.js:76 EventEvaluationErrorContext {element: canvas, componentElement: base-chart.chart, context: BaseChart, locals: Object, injector: Injector}BrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:73(anonymous function) @ application_ref.js:193generatorOrNext.object.schedulerFn @ async.js:122SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:111NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:119NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:65ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244NgZoneImpl.runInner @ ng_zone_impl.js:75NgZone.run @ ng_zone.js:220outsideHandler @ dom_events.js:28ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263ZoneTask.invoke @ angular2-polyfills.js:431
angular2-polyfills.js:267 Uncaught EXCEPTION: Error during evaluation of "mousemove"
ORIGINAL EXCEPTION: TypeError: Cannot read property 'getPointsAtEvent' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'getPointsAtEvent' of undefined
    at BaseChart.hover (http://localhost:8080/js/app.bcd202a3021246321f81.js:1:13978)
    at AbstractChangeDetector.ChangeDetector_BaseChart_0.handleEventInternal (viewFactory_BaseChart:37:24)
    at AbstractChangeDetector.handleEvent (http://localhost:8080/js/common.bcd202a3021246321f81.js:11:6607)
    at AppView.triggerEventHandlers (http://localhost:8080/js/common.bcd202a3021246321f81.js:14:17188)
    at eval (viewFactory_BaseChart:84:108)
    at http://localhost:8080/js/common.bcd202a3021246321f81.js:20:30711
    at http://localhost:8080/js/common.bcd202a3021246321f81.js:20:19646
    at ZoneDelegate.invoke (http://localhost:8080/js/vendor.bcd202a3021246321f81.js:41:11578)
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (http://localhost:8080/js/common.bcd202a3021246321f81.js:13:27810)
    at ZoneDelegate.invoke (http://localhost:8080/js/vendor.bcd202a3021246321f81.js:41:11485)
ERROR CONTEXT:
[object Object]

If you please can have a look https://www.dropbox.com/s/znmcqiz6lb9q8in/angular2-webpack.zip?dl=0

I would like to change the color of the radar chart "web" and labels. I found a view posts about how to do it with chart.js but I can't figure out how to do it with ng2-charts.

I downloaded the latest version of ng2-charts from git (npm install -S valor-software/ng2-charts). Then I went to the node_modules/ng2-charts directory and attempted to run npm install. That created the following error:

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\...\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v4.3.1
npm ERR! npm  v3.7.3

npm ERR! Cannot read property 'target' of null
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     C:\....t\node_modules\ng2-charts\npm-debug.log

The reason I was running the install is because the Git repository does not have a .js file, only .ts. My plan was to run npm install and then tsc ng2-charts.ts
Any suggestions?
Also, when are you planning to release the code without @view to NPM repository?

Thanks for your help.

Hi,
I go through the following steps:

1. git clone https://github.com/valor-software/ng2-charts.git (everything is ok)
2. npm install (everything is ok)
3. gulp
   then I get the error message:
   Error: Could not find the following rules specified in the configuration:
   no-trailing-comma
   sort-object-literal-keys
   at Object.loadRules (/home/testCharts/ng2-charts/node_modules/tslint/lib/ruleLoader.js:29:15)

What is wrong with my actions?

We need to create starter-component for some chart with demo. Integrate it with Chart.js, draw separate chart. Data and logic for different types of charts is: https://github.com/borisyankov/DefinitelyTyped/blob/master/chartjs/chart-tests.ts

(12,9): error TS2305: Module '"C:/msweb/studioEnterprise/node_modules/ng2-charts/dist/index"' has no exported member 'CHART_DIRECTIVES'.

trying to include this project in http://ng2.javascriptninja.io
but can't seem to get it working with ng2 beta.1

using Webpack, but dont think matters...

regards

Sean

Hello,

i've tried it now with an old and a new project(quickstart from angular websit), but i still get problems with setting up the charts component.
For the installation i followed the instruction. For the code, i used one of the examples.
The import i changed to

import {CHART_DIRECTIVES} from 'ng2-charts/ng2-charts';

In the package file of my project, ng2-charts is available, but after starting npm, i get the error

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (ng2-charts, line 0)

[Error] Error: invoke@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:390:34 runGuarded@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:297:54 http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:273:40 Error loading http://localhost:3000/ng2-charts/ng2-charts as "ng2-charts/ng2-charts" from http://localhost:3000/app/charts.component.js error invoke run (anonymous function) invokeTask runTask drainMicroTaskQueue invoke (anonymous function) invokeTask runTask invoke

I've already changed the import in several ways, but still no success

Hello,

I'm not sure if this is an issue with your directive .. But I'm having issues while using it along with Ionic 2

I posted about it in their forums here: https://forum.ionicframework.com/t/ionic-2-ng2-charts/42926

Basically the chart would not show until I resize the screen..
Demo: http://cacoch.com/charttest/
Source: https://github.com/ihadeed/charttest

Having some odd issues here:

Did some simple debugging, and the data comes through (printing out after the canvas), just doesn't draw the chart. I've tried with Chart.js 1.1.1 (stable) and 2.0 (beta.2) and no go. Any ideas?

Hello,

Do you plan do to a 0.0.1 release?

Right now npm returns 0.0.0 which looks empty in node_modules/ng2-charts (only LICENSE, package.json and README.md).

Thanks.

Hi,

Nice work on the library, thanks.

Most users will come to this from the Angular2 docs, which use System.js rather than webpack. Your directives don't install without a change in System.js config (for me at least). I got the classic error where my index.html file is imported instead of charts.js.

See below:

    System.config({
        packages: {        
            app: {
                format: 'register'
            },
            'ng2-charts': {
                main: 'charts.js'         
            }  
        },
        map: {
            'ng2-charts': 'node_modules/ng2-charts/components/charts'
        }  
    });     
    System.import('app/boot')
        .then(null, console.error.bind(console));

We need to refactor previous solution (Line Chart) and, as result - provide functionality for other types of charts providing (Bar, Radar...). One chart -> one component.

Hi! The setLegend() function doesn't work with internet explorer because remove() function is not available. You should use polyfill as write here:

setLegend()

  setLegend() {
    let list = this.parent.getElementsByTagName('ul');
    if (list.length) {
      list[0].remove();
      this.parent.insertAdjacentHTML('beforeend', this.chart.generateLegend());
    } else {
      this.parent.insertAdjacentHTML('beforeend', this.chart.generateLegend());
    }
  }

solution

if (!('remove' in Element.prototype)) {
    Element.prototype.remove = function() {
        if (this.parentNode) {
            this.parentNode.removeChild(this);
        }
    };
}

I have a container that can be resized by user, i want to put a graph on it and that it becomes responsive to that container, it does work as responsive right now but only makes the changes in canvas on window.resize event, i would like to bind the resize event from container to resize function in chart.

Does it exists already or there's things to do here first?

We are using ng2charts in our latest app and would really like an easy way to support trend lines on bar and line charts.

This is really the only reason we still have to send some clients data in another format rather than in our standard dashboard.

Was npm update run after the commit that removed View from charts.ts?

When I npm install ng2-charts, get error re View, but when copy the version from Github into node_modules, everything works...

[email protected] flow.clean C:\Users\suhan.shetty\Documents\angular2\ng2-chart
s
del bundles coverage demo-build typings "components/*/.+(js|d.ts|js.map)" di
st "ng2-bootstrap.+(js|d.ts|js.map)"
Could Not Find ..\angular2\ng2-charts\bundles The filename, directory name, or volume label syntax is incorrect.

Kindly do let me know if I am missing something..
npm - 3.8.3
node - 5.10.1

I think you have loaded core components from 'angular2/angular2', which does not even exists right now.

So after several hours I was able to get all issues resolved and no errors.
But still no charts are rendered. For now I am forced to use ng-highcharts
https://github.com/AngularShowcase/angular2-seed-ng2-highcharts

but if you ever find time and can take a look, would appreciate it:
Charting branch: https://github.com/born2net/studioEnterprise/tree/charting
and added to login panel:
https://github.com/born2net/studioEnterprise/blob/charting/src/comps/entry/LoginPanel.ts
called MyChart
the project compiles via
git clone https://github.com/born2net/studioEnterprise.git (and switch to Charting branch after clone)
npm i
if you ever find time,
regards

Sean

I have cloned ng2-chart repo and installed it using npm install.
When I try to run webpack command I get the following messages:

t@tpk:~/work/testCharts2/ng2-charts$ webpack
clean-webpack-plugin: /home/t/work/testCharts2/ng2-charts/build has been removed.
Hash: 5b357c276e0719c954a6
Version: webpack 1.12.14
Time: 2740ms
Asset Size Chunks Chunk Names
angular2.js 3.2 MB 0 [emitted] angular2
angular2-charts.js 236 bytes 1 [emitted] angular2-charts
angular2.js.map 3.41 MB 0 [emitted] angular2
angular2-charts.js.map 95 bytes 1 [emitted] angular2-charts
[0] ./demo/index.ts 0 bytes [built] [failed]
[0] multi angular2-charts 28 bytes {1} [built] [1 error]
[0] multi angular2 64 bytes {0} [built]
[164] ./ng2-charts.ts 0 bytes [built] [failed]
+ 163 hidden modules

ERROR in ./ng2-charts.ts
Module parse failed: /home/t/work/testCharts2/ng2-charts/ng2-charts.ts Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| export * from './components/charts/charts';
|
@ multi angular2-charts

ERROR in ./demo/index.ts
Module parse failed: /home/t/work/testCharts2/ng2-charts/demo/index.ts Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import {bootstrap} from 'angular2/bootstrap';
| import {Component} from 'angular2/core';
| import {NgClass} from 'angular2/common';

How can I fix the problem?
Thanks in advance.

after install your latest ng2-chart there es no ng2-chart.ts for importing CHART_DIRECTIVES into my typscript file ...

This doesn't work
import {CHART_DIRECTIVES} from 'ng2-charts/ng2-charts';

on inspecting the node_module folder there seemes to be no chart directive, only one ng2-charts/components/charts/charts.ts file which exports an BaseChart Directive which doesn't work.

Can you also bring the module to latests ng2-bootstrap and angular2 beta6

thx

Hi!
Can you adapt for angular.rc.1?
Thanks.

Hi all,

I would like to use ng2-charts but unfortunately I can't get it to work.

There are no errors thrown or any kind of log entry, but the canvas stays empty.

This is the generated dom code:

`

• Series A
• Series B

I can see the legend, but not the graph itself.
I followed exactly the tutorial, this is my template:

<base-chart class="chart" [data]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [series]="barChartSeries" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></base-chart>

And the whole component:

`import {Component, View, ViewEncapsulation, EventEmitter} from "angular2/core";
import {COMMON_DIRECTIVES, CORE_DIRECTIVES, NgClass} from "angular2/common";
import {HTTP_PROVIDERS, Http, Request, RequestMethod} from "angular2/http";

import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';
import {CHART_DIRECTIVES} from 'ng2-charts/ng2-charts';

import {ConfigurationService} from "../../../common/lib/ConfigurationService/ConfigurationService";
import {ISystemInformation} from "./ISystemInformation";

@component({
templateUrl: "app/modules/systemStatus/systemStatus.html",
directives: [COMMON_DIRECTIVES, CORE_DIRECTIVES, PROGRESSBAR_DIRECTIVES, CHART_DIRECTIVES, NgClass],
encapsulation: ViewEncapsulation.None // don't use View Encapsulation because we wan't to overwrite some css
})
export class SystemStatusComponent {
BASE_URL: string;

systemInformation: ISystemInformation;

constructor(private http: Http, private configurationService: ConfigurationService) {
    this.BASE_URL = configurationService.config.WebApiUrl;

    var url: string = this.BASE_URL + "/api/v1/Server/Information";

    this.http.request(new Request({
        method: RequestMethod.Get,
        url: url
    })).map(res => res.json()).subscribe(res => {
        this.systemInformation = res;
    });
}

getPercent(value: number, total: number, decimal: number = 0): number {
    var result: number = (value / total * 100);
    return isNaN(result) ? 0 : parseFloat(result.toFixed(decimal));
}

BytesToXBString(bytes: number): string {
    var extension: string = "bytes";
    var convertedBytes: number = bytes;

    // to TB
    if (bytes > 1e+12) {
        convertedBytes = bytes / 1e+12;
        extension = "TB";
    }
    // to GB
    else if (bytes >= 1e+9) {
        convertedBytes = bytes / 1e+9;
        extension = "GB";
    }
    // to MB
    else if (bytes >= 1000000) {
        convertedBytes = bytes / 1000000;
        extension = "MB";
    }

    return convertedBytes.toFixed(2) + " " + extension;
}

// lineChart
private barChartOptions = {
    scaleShowVerticalLines: false,
    responsive: true,
    multiTooltipTemplate: '<%if (datasetLabel){%><%=datasetLabel %>: <%}%><%= value %>'
};
private barChartLabels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
private barChartSeries = ['Series A', 'Series B'];
public barChartType = 'Bar';
private barChartLegend:boolean = true;

private barChartData = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
];

// events
chartClicked(e:any) {
    console.log(e);
}
chartHovered(e:any) {
    console.log(e);
}

}`

Chart.js is included in the head of index.html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
And system.js is also configured fine:
<script> System.config({ defaultJSExtensions: true, packages: { app: { format: 'register', defaultExtension: 'js' }, "/ng2-translate": { defaultExtension: 'js' } }, map: { 'ng2-translate': 'node_modules/ng2-translate', 'rxjs': 'node_modules/rxjs', 'angular2': 'node_modules/angular2', 'ng2-bootstrap': 'node_modules/ng2-bootstrap', 'ng2-charts': 'node_modules/ng2-charts', 'moment': 'node_modules/moment/moment.js' } }); System.import('app/boot') .then(null, console.error.bind(console)); </script>

Hope somebody has an idea what's wrong.

It seems that in beta 12 Google removed @view directive from angular2/core. When I run TypeScript transpiler, it generates an error.

Unable to compile TypeScript
node_modules\ng2-charts\components\charts\charts.ts (2,14): Module '"C:...node_modules/angular2/core"' has no exported member 'View'.
2305)

Can we have chart.js version 2? I really want a horizontal bar chart, which is in version 2.

I have been trying to set this up for a couple of days and still I am having no luck, I can't be the only one...

Is it possible to create a sample stand alone ng2 project along with a tutorial and put it on guthub? I know there is the demo folder but this does not really represent how a user might go about setting up a project from scratch and as a result makes it unclear as to why the project is not working...

*When i serve my project locally i got this error ? *

node_modules/ng2-charts/ng2-charts.ts:1
export * from './components/charts/charts';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

Currently the peerDeps force Angular-2.0.0-beta.15 however the peerDeps should state the minimum version, unless it breaks if used with a recent version of Ng2 (unlikely) could you guys change the peerDeps to allow recent versions after beta.15? (Current Ng2 version is beta.17).

In the line chart example, user could click randomize and change the data by this.lineChartData = _lineChartData;. This is working.

However, if I try to update the labels with the same way
var _lineChartLabels = ['December', 'February', 'March', 'April', 'May', 'June', 'July']; this.lineChartLabels = _lineChartLabels;
This is not working.

Is labels supposed to be unchangeable or is this a bug? Thank you.

Here's the sceneario, i have a doughnut chart that shows a percentage, as it is defined the chart starts empty thus rendering with animation 100%, but 250 ms later i change the data to be say 80%, now it re-render the chart so you can see it jumping and playing the animation again, it looks like a bug.

As some data comes from servers outside of an application, it would be great if we could delay or cancel the first refresh in:
charts.ts#L129

Tried npm install ng2-charts and the line chart demo code work in my ng2 beta 7 app.
(tested it with angular2 beta 8 and 9 too) but I had the same problem as #58

I then tried clone the repo but tsc fails when running npm install with

> 
> node_modules/angular2/src/facade/promise.d.ts(1,10): error TS2661: Cannot re-export name that is not defined in the module.
> 
> npm ERR! Darwin 15.3.0
> npm ERR! argv "/opt/local/bin/node" "/opt/local/bin/npm" "install"
> npm ERR! node v0.12.7
> npm ERR! npm  v2.14.3
> npm ERR! code ELIFECYCLE
> npm ERR! [email protected] prepublish: `gulp clean && tsc`
> npm ERR! Exit status 2

I thought it was combination of me using newer ng2 so I tried to upgrade ng2-charts to beta7-9 but no luck.

What am I missing?

I am trying to use your base-chart component but I am not able to get the chart shown on the browser.
If I inspect, I see that the dimension of the is null. What I actually see is

Could you help me in finding what I am doing wrong?

Thanks
Enrico