fernman/angular-google-charts

A wrapper for the Google Charts library written in Angular.

Angular-Google-Charts

A wrapper for the Google Charts library written in Angular.

Setup

Installation

To use Angular-Google-Charts in your project, install the package with npm by calling

npm install angular-google-charts

This will add the package to your package.json and install the required dependencies.

Importing

Import the GoogleChartsModule in your app.module.ts:

import { GoogleChartsModule } from 'angular-google-charts';

@NgModule({
  ...
  imports: [
    ...
    GoogleChartsModule,
    ...
  ],
  ...
})
export class AppModule {}

This will allow you to use all of the features provided by this library.

Configuring

For some use cases, it might be necessary to use some different config options than the default values.

All config options for Angular Google Charts are provided through a config object, which can be passed to the library by importing the GoogleChartsModule using its forRoot method or by providing the GOOGLE_CHARTS_LAZY_CONFIG injection token with an Observable<GoogleChartsConfig> value.

Using forRoot

Here you will pass the options that are passed to the google.charts.load method in the normal JavaScript library. For instance, to change the version

GoogleChartsModule.forRoot({ version: 'chart-version' }),

Another example, to specify the Google Maps API key, or any other Settings:

GoogleChartsModule.forRoot({ mapsApiKey: '<your Google Maps API Key here>' }),

Using lazy loading

Option #1

// Provide an observable through a service that fetches your chart configurations

@Injectable()
export class GoogleChartsConfigService {
  private configSubject = new ReplaySubject<GoogleChartsConfig>(1);
  readonly config$ = this.configSubject.asObservable();

  constructor(private http: HttpClient) {}

  loadLazyConfigValues(): void {
    this.http.post('https://special.config.api.com/getchartsconfig', {})
      .pipe(take(1))
      .subscribe(config => this.configSubject.next(config));
  }
}

// Factory function that provides the config$ observable from your GoogleChartsConfigService
export function googleChartsConfigFactory(configService: GoogleChartsConfigService): Observable<GoogleChartsConfig> {
  return configService.config$;
}

@NgModule({
  ...
  providers: [
    GoogleChartsConfigService,
    {provide: GOOGLE_CHARTS_LAZY_CONFIG, useFactory: googleChartsConfigFactory, deps: [GoogleChartsConfigService]}
  ]
})
export class AppModule {}

Option #2

// Use a global subject (whether this violates best practices in your case is up to you).
// This is just to point out a more simple way of achieving a lazy-loaded config.
export const googleChartsConfigSubject = new ReplaySubject<GoogleChartsConfig>(1);

// Call this from anywhere you want
googleChartsConfigSubject.next(config);

// Your app.module
@NgModule({
  ...
  providers: [
    {provide: GOOGLE_CHARTS_LAZY_CONFIG, useValue: googleChartsConfigSubject.asObservable()}
  ]
})
export class AppModule {}

NOTE

• You can provide options through the forRoot function OR the GOOGLE_CHARTS_LAZY_CONFIG token. You cannot use them interchangeably.
• If you provide a lazy-loaded config object then the charts will not render until the observable has a value for the subscriber.

Charts

The easiest way to create a chart is using the GoogleChartComponent.

<google-chart></google-chart>

Using the component, it is possible to create every chart in the Google Charts library. It has a few important input properties, which are explained below.

Type

<google-chart [type]="myType"></google-chart>

The type of chart you want to create. Must be of type ChartType. Check this file for a list of the supported types

To see examples for all chart types and more information, visit the google chart gallery.

Data

<google-chart [data]="myData"></google-chart>

The data property expects an array of a certain shape, which depends on the chart type. Some chart types even support different data formats depending on the mode.

Example with a chart that expects two-dimensional arrays:

myData = [
  ['London', 8136000],
  ['New York', 8538000],
  ['Paris', 2244000],
  ['Berlin', 3470000],
  ['Kairo', 19500000],
  ...
];

The data object can also include formatters for the given data. To use these, pass an object of type { v: any, f: string } as the data values in the inner array. The property v should contain the real value, and the property f the formatted value.

Formatters can also be passed as a separate input property, see Formatters;

myData = [
  ['London', {v: 8136000, f: '8,1360'}],
  ['New York', {v: 8538000, f: '8,530'}],
  ...
];

For further information, please see the official documentation on ArrayToDataTable, which is the function used internally.

Columns

<google-chart [columns]="chartColumns"></google-chart>

The columns property expects an array describing the columns chart data array. The number of entries must match the length of the inner array passed in the data property. Some charts don't require columns. Whether your chart requires it can be check in the official documentation.

Continuing with the simple two-dimensional example:

chartColumns = ['City', 'Inhabitants'];

For more complex formats an array of objects can be passed. For instance, the GeoChart in markers mode expects 4 columns of type number:

    chartColumns = [
        { type: 'number', role: 'latitude' },
        { type: 'number', role: 'longitude' },
        { type: 'number', role: 'markerColor' },
        { type: 'number', role: 'markerSize' }
    ];

Title

<google-chart [title]="myTitle"></google-chart>

The title property is optional and provided for convenience. It can also be included in the options property.

Width

<google-chart [width]="myWidth"></google-chart>

The width property is optional and allows to set the width of the chart. The number provided will be converted to a pixel value. The default is undefined, which makes the chart figure out its width by itself. You can also set the width using CSS, which has the advantage of allowing % values instead of only pixels. For more information on that, see dynamic resize.

Height

<google-chart [height]="myHeight"></google-chart>

The height property is optional and allows to set the height of the chart. The number provided will be converted to a pixel value. The default is undefined, which makes the chart figure out its height by itself. You can also set the height using CSS, which has the advantage of allowing % values instead of only pixels. For more information on that, see dynamic resize.

Options

<google-chart [options]="myOptions"></google-chart>

The options property is optional and allows to customize the chart to a great extent. How and what you can customize depends on the type of chart. For more information, please see the google documentation.

// example
myOptions = {
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
  is3D: true
};

Formatters

<google-chart [formatters]="myFormatters"></google-chart>

The formatter property is optional and allows to format the chart data. It requires an array of objects containing a formatter and an index.

For more information and all formatter types, please refer to the documentation.

// Formats the column with the index 1 and 3 to Date(long)
myFormatters = [
  {
    formatter: new google.visualization.DateFormat({ formatType: 'long' }),
    colIndex: 1
  },
  {
    formatter: new google.visualization.DateFormat({ formatType: 'long' }),
    colIndex: 3
  }
];

Note: When you get the error "google is not defined" whilst using the formatter in your component, you probably didn't load the google charts script. Please read the chapter on using the ScriptLoaderService.

Dynamic Resize

<google-chart [dynamicResize]="dynamicResize"></google-chart>

The dynamicResize property is optional and makes your chart redraw every time the window is resized. Defaults to false and should only be used when setting the width or height of the chart to a percentage value. Otherwise, the chart gets redrawn unnecessary and therefore slows down the site.

Styling

<google-chart style="width: 100%;"></google-chart>

Most CSS properties should work exactly as you would expect them to. If you want to have the chart full-width for example, set the width to 100%.

Events

The GoogleChartComponent provides bindings for the most common Google Chart events.

Ready

The ready event is emitted as soon as the chart got drawn and after every subsequent redraw.

<google-chart (ready)="onReady($event)"></google-chart>

The event is of type ChartReadyEvent.

Error

The error event is emitted when an internal error occurs. However, since the newer versions of google-charts, most errors are displayed in the chart HTML as well. It can be bound to like this:

<google-chart (error)="onError($event)"></google-chart>

The event is of type ChartErrorEvent.

Select

The select event is emitted when an element in the chart gets selected.

<google-chart (select)="onSelect($event)"></google-chart>

The event of type ChartSelectionChangedEvent containing an array of selected values.

Mouseover

The mouseover event fires when the mouse hovers over one of the charts elements (i. e. a bar in a bar chart or a segment in a pie chart).

<google-chart (mouseover)="OnMouseOver($event)"></google-chart>

The event is of type ChartMouseOverEvent, where column is the index of the hovered column and row is the index of the hovered row.

Mouseleave

The mouseleave event fires when the mouse stops hovering one of the charts elements (i. e. a bar in a bar chart or a segment in a pie chart).

<google-chart (mouseleave)="onMouseLeave($event)"></google-chart>

The event is of type ChartMouseLeaveEvent, where column is the index of the no-longer hovered column and row is the index of the no-longer hovered row.

Controls and Dashboards

Google Charts supports combining multiple charts into dashboards and giving users controls to manipulate what data they show, see their documentation. Using this library, dashboards can be created easily.

A dashboard component can be instantiated, which can contain child controls and charts. Every control must specify one or more charts they are controlling via their for property. It accepts a single chart as well as an array of charts, and one chart can be controlled by multiple controls.

<dashboard [columns]="dashboardColumns" [data]="dashboardData">
  <control-wrapper [for]="dashboardChart" [type]="controlFilterType" [options]="controlOptions"></control-wrapper>
  <google-chart #dashboardChart type="PieChart" [width]="300" [height]="300"> </google-chart>
</dashboard>

When creating dashboards, the charts themselves are not responsible for drawing, which means their columns, data, and (optional) formatter properties are unused. Instead, the dashboard is responsible for drawing. It therefore accepts data in the same format as charts do through the columns, data, and formatter properties.

Note that charts in a dashboard will not be visible if they are not referenced in at least one control.

Editing Charts

Google Charts comes with a full-fledged chart editor, allowing users to configure charts the way they want.

Angular-Google-Charts includes a component wrapping the native ChartEditor, the ChartEditorComponent. It has to be instantiated in HTML and can be used to edit charts by calling its editChart method.

<!--my.component.html-->
<chart-editor></chart-editor>

<google-chart #editable></google-chart>
<button (click)="editChart(editable)">Edit</button>

// my.component.ts
class MyComp {
  @ViewChild(ChartEditorComponent)
  public readonly editor: ChartEditorComponent;

  public editChart(chart: ChartBase) {
    this.editor
      .editChart(chart)
      .afterClosed()
      .subscribe(result => {
        if (result) {
          // Saved
        } else {
          // Cancelled
        }
      });
  }
}

editChart returns a handle to the open dialog which can be used to close the edit dialog.

Note that only one chart can be edited by a chart editor at a time.

Advanced

Accessing the chart wrapper directly

I case you don't need any of the special features the GoogleChartsComponent provides, the ChartWrapperComponent can be used. It is a direct wrapper of the ChartWrapper..

<chart-wrapper [specs]="chartWrapperSpecs"></chart-wrapper>

The ChartWrapperComponent should be used if you need fine-grained control over the data you are providing or you want to use e.g. the query feature that Google Charts provides, which is not supported using the GoogleChartComponent.

Using the ScriptLoaderService

If a specific chart is created a lot in your application, you may want to create custom components.

When doing so, you need to load the chart packages by yourself. The ScriptLoaderService provides a few methods helping with this.

class MyComponent {
  private readonly chartPackage = getPackageForChart(ChartType.BarChart);

  @ViewChild('container', { read: ElementRef })
  private containerEl: ElementRef<HTMLElement>;

  constructor(private loaderService: ScriptLoaderService) {}

  ngOnInit() {
    this.loaderService.loadChartPackages(this.chartPackage).subscribe(() => {
      // Start creating your chart now
      const char = new google.visualization.BarChart(this.containerEl.nativeElement);
    });
  }
}

The loadChartPackages method can also be called without any parameters. This way, only the default google charts packages will be loaded. These include the namespaces google.charts and google.visualization, but no charts.

Preloading the Google Charts script

If the existence of charts is crucial to your application, you may want to decrease the time it takes until the first chart becomes visible. This can be achieved by loading the Google Charts script concurrently with the rest of the application. In the playground application, this reduces the time until the first chart appears by roughly 20%, which means for example about 4 seconds when using the "Slow 3G" profile in Chrome DevTools.

To achieve this, two scripts have to be added to the index.html file in your apps' root folder. The first one loads the generic Google Charts script, the second one the version-specific parts of the library needed to load charts.

In the code below, <chart_version> has to be replaced with the exact of the Google Charts library that you want to use and must match the version you use when importing the GoogleChartsModule.

The only exception to this is version 46. All minor versions of Google Charts v46 require the loader to be of version 46.2.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js" async></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/<chart_version>/loader.js" async></script>

Please note that this can increase the time it takes until Angular is fully loaded. I suggest doing some benchmarks with your specific application before deploying this to production.

License

This project is provided under the MIT license.

angular-google-charts's Issues

OnReady listener does not trigger the event

Hi,

First of all, thank you for the project, the code it's pretty clear and it's easy to use. I've found a problem regarding the ready event. If you put inside your component a event binding for the ready event, the function associated to it does not execute. e.g. If you have this html

<google-chart 
[type]="chartType" [data]="chartData" [options]="options" 
[width]="width" [height]="height" (ready)="onReady()"></google-chart>

And you put a function such as:

 onReady() {
    console.log(height);
}

The code is not being executed when the chart is loaded.

Is there a way to solve this?
Thanks again for the library.

Regards

Feature request : typescript type @types/angular-google-charts

It could be very nice to be :)

Unmet peer dependency of Angular 6 with v0.1.4

I'm using angular-google-charts v0.1.4 with Angular 7, but npm is still complaining about angular-google-charts depending on angular core v6.

npm ERR! peer dep missing: @angular/core@^6.0.0-rc.0 || ^6.0.0, required by [email protected]

Is the peer dependency accurate?

Multi series bar chart with annotations

Hi again, I am trying to figure out how to setup a multi series bar chart (multiple series of 3 bars) with annotations for each of the bars. I tried passing in the roles as an array like this:

roles: [
 { role: 'annotation' },
 { role: 'annotation' },
 { role: 'annotation' },
]

and columnNames like this:

columnNames: [ 'Name', 'Col1', 'Col2', 'Col3' ]

Then, my data does match the column ordering as if you concat columnNames and roles. But when the chart renders, the annotations are not in the right places. They appear to be showing up shifted down one group (bars are horizontal).
Is this the right way to do it with this package? Based on the examples in the google charts docs, It should be in order of column, annotation, column, annotation, etc...
But I don't see how to do that passing in with your columnNames and roles @input() 's
Am I missing something?

Any chance of changing the width property to allow for percentages?

Would be super useful

Zoom breaks after resize

Hi,

I'm not 100% sure if this package is causing the issue but I seem to be losing zoom capability. After zooming once and resizing the window the chart doesn't allow for zooming anymore. It can still highlight the rectangle when dragging the mouse but doesn't do anything.

I've tried resizing the charts in pure javascript outside the project without the wrapper and the zoom isn't affected by resizing the window and redrawing the chart.

I've also tried reconstructing the redraw process with the wrapper like the updateChart function in this package and it still doesn't affect the zoom.

I made a custom component in our project that uses the GoogleChartComponent and dresses it up with some custom functionality that we need. Naturally, I thought this might be affecting it so I tried generating the chart by itself and it still affects the zoom so I'm pretty much out of ideas as to what might be messing with the zoom.

Any ideas as to what could be affecting this? Thanks!

Error TypeError: a.X is not a function

Hello, I hope you are well, I've found the library great so far for what I need but I'm having a problem now.
I'm using a chart in which the columns are [Date, number], you can see a screenshot of it here:

The thing is, I've added a formatter for the dates, so I can change how they look when you hover on a point, and this breaks the chart. This is the data that gets passed to the chart:

But the chart prints this error when I add the formatter:

I'm guessing it has something to do with it not being able to format the dates correctly?
I've also tried removing the first row of data which are the headers to see if that was it but the error persisted.

This is the html code for the chart:
<raw-chart [chartData]="rawCharts.Usd.smrCv" [dynamicResize]="true" [formatter]="formatter"></raw-chart>

If you could help me with this it would be great.

Thanks!

Best regards,
Tobías

ERROR in node_modules/angular-google-charts/lib/google-charts.module.d.ts(5,44): error TS2315: Type 'ModuleWithProviders' is not generic.

I keep getting this error when I compile -
ERROR in node_modules/angular-google-charts/lib/google-charts.module.d.ts(5,44): error TS2315: Type 'ModuleWithProviders' is not generic.

I have installed google charts. After installation, it does not give any error.
ng serve is throwing this error.

Add Controls and Dashboards

I was wondering if someone could add a public function to the google-chart component that returns the wrapper object (the chart javascript object) so that I could be able to add dashboards and controls to my charts. To do that I need access to the chart object to bind to like in the example here:
https://developers.google.com/chart/interactive/docs/gallery/controls

dashboard.bind(donutRangeSlider, pieChart);

the pieChart object in the example is created the same way as the wrapper object in the component:

var pieChart = new google.visualization.ChartWrapper();

A function that returns the wrapper would allow all me to do all kinds of things the way they are done in the google documentation, without having to figure out how you got the library into the component.

thanks

Adding Events

Is it possible to add my own events to the GoogleChartComponent? Or would it be possible to add an Input that takes an array of

interface ChartEventWithCallback { eventName: string, callback: Function } 

of events that the GoogleChartComponent can register when it registers all other events? This might be a silly idea but I'm trying to add an observer to a chart that will observe the data points when the user zooms in on a certain section.

Set API_KEY in geocharts

Hi,
i am getting an error message saying " Geocoding Service: You must use an API key to authenticate each request to Google Maps Platform APIs. For additional information, please refer to http://g.co/dev/maps-no-account For more information on authentication and Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/get-api-key"
in normal javascript , there is a provision to add "'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'" in google.charts.load.. but here , where should it be added?

Current version blocks ng update.

Angular 8 was release. Running ng update results in the following error

` ng update @angular/cli @angular/core
Your global Angular CLI version (7.3.8) is greater than your local
version (7.3.1). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
Package "angular-google-charts" has an incompatible peer dependency to "@angular/core" (requires "^6.0.0-rc.0 || ^6.0.0" (extended), would install "8.0.0").
Package "angular-google-charts" has an incompatible peer dependency to "@angular/common" (requires "^6.0.0-rc.0 || ^6.0.0" (extended), would install "8.0.0").
Incompatible peer dependencies found. See above.`

Angular 7

Are you planning upgrading to Angular 7 soon?

Setting the language/locale

Hi,

So far I really like this project, it does exactly what it should do, and does it neatly.
As I'm developing an app for the Dutch crowd, it would be great to be able to set the locale for the charts. Google refers to it by 'language'. See their page about the language setting.

Have I maybe overlooked how to set this currently?

Regards

Getting an undefined value somewhere in the script loading process leading to a 404 error

I get a 404 error when the module tries to get the google script by the looks of it:

GET https://www.gstatic.com/charts/45.2/js/jsapi_compiled_undefined_module.js

Looks like there is a variable merging into the script name there which is undefined, but there is no error handling to alert me to what is missing.

Could do with some guidance on what I have done wrong, and an enhancement here could be to check for undefined and report it instead of allowing the GET to still fire.

Thanks for you help in advance!

Custom tooltip in TimeLine chart

Hi, @FERNman.
I tried to create a custom tooltip in a Timeline chart, but this chart not change the default tooltip.
Follow example of default tooltip:

The component has no errors.
I tested this same method in Bar chart and he works..
Example:

Dependencies on Angular 7

Is necessary import this on my index.html ?

  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script src="//www.google.com/jsapi"></script>

  <script type="text/javascript">
     // Load the Visualization API and the corechart package.
     google.charts.load('current', {'packages':['corechart']});
  </script>

If I dont I get "google is not defined"

=> ERROR ReferenceError: google is not defined

How to create a timeline chart using angular-google-charts?

I am trying to create a timeline chart in angular.
here is my code

app.component.html

<google-chart [data]="myData" [type]="type"></google-chart>

app.component.ts

@Component({`
 selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
 title = "CodeSandbox";

  myData = [
    ['Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)],
    ['Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)],
    ['Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)]
  ];
  type: string = 'TimelineChart';
}

OrgChart view

For the OrgChart, I have a problem. I call it correctly with the right data but I have horizontal lines that appear. Is this a bug? Or an option to add to remove?

google.visualization.DataTable column types

in google charts there is an option to provide column types as part of the data array.
google.visualization.DataTable parses it correctly. this is mainly important where you have dates that can be sent as a string "Date(1,1,2019)";
getDataTable function in goolge-chart-component prevents this.
is there a way to allow this?

Is there support for diff charts?

https://developers.google.com/chart/interactive/docs/gallery/diffchart

Debounce resizing

Thanks for the project!

I started using angular-google-charts before you had dynamic resize and added my own. I noticed the recently added implementation resizes on every window resize event which is fired a lot.

I did the the following at the parent container level but would be nice to have something like this at the component level:

  ngAfterViewInit() {
    fromEvent(window, 'resize')
      .pipe(debounceTime(500))
      .subscribe(() => {
        this.chartComponents.forEach( c => {
          c.wrapper.draw();
        })
      })
  }

Getting error while loading the chartjs

When trying to set the data to it gives following error:
GET https://www.gstatic.com/charts/45.2/js/jsapi_compiled_undefined_module.js net::ERR_ABORTED 404
Even its random and sometimes its consistant.

set AP_KEY for using geocharts

Hi,
i am getting an error message saying " Geocoding Service: You must use an API key to authenticate each request to Google Maps Platform APIs. For additional information, please refer to http://g.co/dev/maps-no-account For more information on authentication and Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/get-api-key"
in normal javascript , there is a provision to add "'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'" in google.charts.load.. but here , where should it be added?

Material Charts

Hi, great project and I love that I don't have to try and do this myself. I do have a question/request though. I looked at the script loader service and I see that you only include the corechart package and I was wondering if you are planning on adding the new material packages as well. It would be nice if I didn't have to do additional theming on the charts that already have the material themes in the newer packages like this example: https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart#creating-material-bar-charts
thanks

Is there a way to save the chart as an image?

Trying to figure out a way to save the resulting chart as an image, sorry for opening this as an issue - not sure where else to ask?

New chart being drawn before old chart disappears

Not sure if this is an issue with the component or the library, but sometimes when I'm low on memory, and the chart is redrawn due to the data changing, I see the new chart below or next to the old chart before the old chart disappears. Any idea why that would happen and/or how I might fix it or hide it somehow?

Default color gradient & colorAxis property does not apply on GeoChart.

demo.html
<google-chart [type]="type" [data]="data" [options]="options"></google-chart>

In demo.component.ts I have declared options variable with following values:

data = [
    ['State', 'Sales'], 
    ['US-NY', 100],
    ['US-OR', 200],
    ['US-PA', 300], 
    ['US-TX', 400],
   ['US-UT', 500] 
];

options = {
    region: 'US',
    resolution: 'provinces',
    defaultColor: '#3687ee'
}

By default GeoChart shows color gradient of 'defaultColor: '#3687ee', but after implementing it only shows same color (#3687ee) for every state 'data' and ' colorAxis' property also doesn't apply on chart.

Dynamically redraw the chart when data changes

Hi

I am getting the values of [data] from an API. It renders fine in the first time. But when these values change, the chart does not redraw though [data] has updated. but the graph does not re render itself.

When rendering an OrgChart, I get an error in the console:

I get the following error: core.js:1673 ERROR TypeError: Cannot read property '__eventTarget' of null

I don;'t get these with charts from the core package, the OrgChart does however render correctly.

NodeClass option doesnt work for orgchart

Hello,
I have a probleme witch i cant solve .. i try to add nodeClass : 'myClass' in my optionObject but the class is not loaded, but when i inspect node i see her in html but not any style applyed !! ..
Can't google chart component load class from my component .css file ?
Thank you

Timeline - Can't change specific bars color

Hi there,
So i'm trying to make a Timeline chart where the manager can see if the consultant is on a project or not.

The issue is that I can't change the color on each bar the right way, because I want the bar with projects in green and the bar without projects in red.

Here's what I get:

As you see, the consultant 2 has a project associated and it appears red instead of green, and when he doesn't have a project it appears green instead of red.

This is because I can't apply roles to the timeline chart, in others chart I tested and I could change the color as I wished, but in the timeline chart is other story.

So I have in options this:
chart.options = { colors: ["green", "red"] }

So the first value I insert will be green, the second (different from the 1st) red and the third will be green.
If I only needed two inserts (On Project and Without Project) this would work just fine, but I want (NameOfProject1, NameOfProject2, NameOfProject3, NameOfProjectN and Without Project)

I think it's a bug from this chart, but I want to make sure with you

Thanks for your help!

---

Best regards,
Fernando Caria

Unable to add vertical lines

Looks as if this is "filtered" when setting the options. Anyway following the document does not show the vertical lines on the Line type

Next publish to NPM?

Hi FERNman,

Do you have a timeline on when the next publish to npm will be for the latest updates?

Thanks,
Alex

Bar chart is rendered too wide when chart data is a list of nulls and has only one non-null value

When the data for the chart has the following structure, the bar chart is rendered too wide:

But when I replace one null value with 0, the bar chart is rendered correctly:

Problems when including formatters inside my code

Hi,

I was trying to introduce formatter inside my code but when loading the application appears the following error:

vendor.js:56007 ERROR Error: Uncaught (in promise): ReferenceError: google is not defined
ReferenceError: google is not defined
    at new SpecificInformationComponent (main.js:1640)
    at createClass (vendor.js:63635)
    at createDirectiveInstance (vendor.js:63520)
    at createViewNodes (vendor.js:64740)
    at callViewAction (vendor.js:65056)
    at execComponentViewsAction (vendor.js:64975)
    at createViewNodes (vendor.js:64768)
    at createRootView (vendor.js:64654)
    at callWithDebugContext (vendor.js:65685)
    at Object.debugCreateRootView [as createRootView] (vendor.js:65172)
    at new SpecificInformationComponent (main.js:1640)
    at createClass (vendor.js:63635)
    at createDirectiveInstance (vendor.js:63520)
    at createViewNodes (vendor.js:64740)
    at callViewAction (vendor.js:65056)
    at execComponentViewsAction (vendor.js:64975)
    at createViewNodes (vendor.js:64768)
    at createRootView (vendor.js:64654)
    at callWithDebugContext (vendor.js:65685)
    at Object.debugCreateRootView [as createRootView] (vendor.js:65172)
    at resolvePromise (polyfills.js:3136)
    at resolvePromise (polyfills.js:3093)
    at polyfills.js:3195
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2743)
    at Object.onInvokeTask (vendor.js:58149)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2742)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:2510)
    at drainMicroTaskQueue (polyfills.js:2917)

The code I tried to introduce was:

  myFormatter = [
    {
      formatter: new google.visualization.NumberFormat({ fractionDigits: 5 }),
      colIndex: 1
    }
  ];

I saw that there is an example project in the repository but I haven't found anything that says how to properly use objects imported from the chart js script. Do I miss any step?

Thank you for your time and for your effort to maintain the repository

Cheers!

Accessing google.visualization

I was wondering how you suggest to add the google object to an angular project so it can be access for making formatters or some of the more advanced chart operations (currently trying to figure out how to do a bar diff chart)
Thanks

google.charts not loaded if google.maps already loaded

I'm using both Angular Google Maps https://angular-maps.com/ and angular-google-charts in my app. However, if google.maps gets loaded prior to google.charts, I get this error:

core.js:14597 ERROR TypeError: Cannot read property 'load' of undefined
at Observable._subscribe (angular-google-charts.js:87)

which is this line:
google.charts.load('45.2', config);

I believe that the source of the issue is here:

    Object.defineProperty(ScriptLoaderService.prototype, "doneLoading", {
        get: /**
         * @return {?}
         */
        function () {
            if (typeof (google) !== 'undefined') {
                return true;
            }
            return false;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(ScriptLoaderService.prototype, "isLoading", {
        get: /**
         * @return {?}
         */
        function () {
            var _this = this;
            if (typeof (google) === 'undefined') {
                /** @type {?} */
                var pageScripts = Array.from(document.getElementsByTagName('script'));
                return pageScripts.findIndex(function (script) { return script.src === _this.scriptSource; }) >= 0;
            }
            return false;
        },
        enumerable: true,
        configurable: true
    });

where the test if (typeof (google) !== 'undefined') fails when google.maps is already loaded, which short-circuits the loading of google.charts.

My chart works fine if I avoid displaying a map prior to a chart. Is there a workaround?

Cannot initiate gantt or timeline charts

Trying to create a timeline or Gantt chart. (Thank you for the wrapper by the way)
home.component.ts

 changingChart = {
    title: 'Changing Chart',
    type: 'timeline',
    data: [
      ['Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)],
      ['Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)],
      ['Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)]],
    columnNames: [{ type: 'string', id: 'Term' }, { type: 'string', id: 'Name' }, { type: 'date', id: 'Start' }, { type: 'date', id: 'End' }],
    options: {
      animation: {
        duration: 250,
        easing: 'ease-in-out',
        startup: true
      }
    }
  }

home.component.html

<google-chart style="width: 100%" [type]="changingChart.type" [data]="changingChart.data" [columnNames]="changingChart.columnNames"
              [options]="changingChart.options" [dynamicResize]="true"></google-chart>

I get an error on the console:
loader.js:222 GET https://www.gstatic.com/charts/45.2/js/jsapi_compiled_undefined_module.js net::ERR_ABORTED 404

Any thoughts?

How to get selected element value?

I have created org chart using this angular 6 wrapper. I would like to do some changes based on click events.

(select)="onSelect($event) - this gives me only row and column. How can i get which item i have clicked?

Can't get this to work – 404 on google resource

Hello,

I get a loader.js:222 GET https://www.gstatic.com/charts/45.2/js/jsapi_compiled_undefined_module.js 404 () for some reason, please help!

Thank you

Cannot find module 'projects/angular-google-charts/src/public_api'.

import { ChartErrorEvent, ChartEvent, GoogleChartComponent } from 'projects/angular-google-charts/src/public_api'; errors with Cannot find module 'projects/angular-google-charts/src/public_api' as there is no projects folder in my project. What process sets up the projects folder with contents?

Full width chart

It would be great to be able to get the chart to the full width of its parent element.
Currently width only supports numbers (converted to px) but it would be nice if one could pass %.

Is possible to Add image to treemap chart?

I'm creating SDG Goal to treemap chart. now I can generate chart with label text like this

If it possible,I would like to insert some image and label to each data like this

Thanks.

Would offloading dynamic resizing to a webworker improve performance?

I'm not too sure on the specifics of web workers, just voicing a curiosity out loud. Cheers!

ScriptLoaderService

Thank you for this project! I'm looking for example code for including and using ScriptLoaderService. It's not something I can find in this library.

Zoom in on mobile or add DateRangeFilter?

It seems as i cannot use the 'explorer' when on mobile? Cannot zoom or pan the chart. Dont know if it's the library but my bet its not? And If that's the case do this library support DateRangeFilter? It's for a continous linechart.

https://angular-vh5ijj.stackblitz.io/ The chart in ##question.
https://stackblitz.com/edit/angular-vh5ijj For the code.

#Helpwanted

Re-render chart

Is there a way to re-render a chart without using the chart wrapper (because then I may as well not use this library?)

For instance, it renders fine the first time within a tab, but when I switch tabs and go back, the angular component is destroyed - when I re click the tab, it is initialized again but this time the chart does not load?

Is angular-google-charts compatible with angular 6.0.0?

When I compile my Angular application with @angular/core 6.0.0 and angular-google-charts - the typescript compiler complains:
ERROR in node_modules/angular-google-charts/lib/google-charts.module.d.ts(5,44): error TS2315: Type 'ModuleWithProviders' is not generic
We are currently tied to version 6.0.0 of angular because of other dependencies. I was wondering it here is a way to get this component to work with version 6.0.0 of angular as well.
Thank you,
Mark

ERROR ReferenceError: google is not defined

I am sorry, but I keep having the 'google is not defined' error when I am using the "Formatter" object and I don't see how to load the script as you describe in the Readme.