angular2-google-chart | Angular 2 google chart | Chart library

I want to use this module " angular2-google-chart".

But when start the application, get this error:

ERROR in ./node_modules/angular2-google-chart/directives/angular2-google-chart.directive.ts Module build failed: Error: /home/user/Desk/project/frontend/node_modules/angular2-google-chart/directives/angular2-google-chart.directive.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue inthe library repository to alert its author and ask them to package the library using the Angular Package Format (/goo.gl/jB3GVv). at AngularCompilerPlugin.getCompiledFile (/home/user/Desk/project/frontend/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:674:23) at plugin.done.then (/home/user/Desk/project/frontend/node_modules/@ngtools/webpack/src/loader.js:467:39) at at process._tickCallback (internal/process/next_tick.js:182:7)

How to fix this error?

I am using google chart to render charts on my angular app. This works fine for first time page visit but as soon as I refresh the page. The variables such as googleLoaded and and google becomes undefined.

I have used directive code from https://github.com/vimalavinisha/angular2-google-chart/

index.html

How do you integrate a google chart in an angular 4 application?

I read the answer to the SO question here, but I believe it's incomplete. Basically, I'm attempting the same strategy as the previous answer, using a GoogleChartComponent and another component that extends it. Two errors arise, the first is a missing call to super() for the child component and the second is the call to "new" in this code

I'm using Google Charts in Angular4 https://github.com/vimalavinisha/angular2-google-chart

example provinces chart:

I am using google charts in an angular2 environment (used this answer to get going: Angular2 + Google Charts. How to integrate Google Charts in Angular2?). My chart options are set up as follows:

I'm looking to use the Google Charts timeline to show a few minutes instead of dates. I don't mean limit the scale to minutes of the day. I mean just show 0:00 as the start and then something like 5:00 as the end time with steps by a certain number of seconds in between.

I've found a number of examples (e.g., http://almende.github.io/chap-links-library/js/timeline/doc/), but nothing like what I'm looking for. All the examples use either datetime or timeofday, but nothing seems to limit the scale to an arbitrary time duration. All the other features I want are there (zooming, eventlisteners, HTML annotations, JSON input, etc),

Is it possible to customize the scale to want I want? Or even hide it?

BTW -- This is for an Angular (4) project so I'm using the angular2-google-chart module to access the Google Charts from TypeScript. If there's another Angular component that would be better suited, I'd love to hear about it.

I am working on a project and using GoogleChart. But when I am implementing this GoogleChart directive with *ngFor then only one instance is creating though there should 4 instances of that GoogleChart. I don't know why only one chart is creating, There should be 4 charts because in GoogleChart there are 4 elements.

My code is:

profile-component.html:

I successfully cloned a git repo

I am creating an Angular project and want to implement pi-charts. I have searched a lot but didn't found anything helpful for me. I have implemented this charts from angular2-google-chart. In my HTML I want to show multiple charts ( more than 10 ). I write HTML to show pi-charts for multiple times. But it is showing only once. Can anyone suggest me why this is happening?

profile.component.ts: