gmazzamuto / ng2-google-charts Goto Github PK
View Code? Open in Web Editor NEWAngular Google Charts module
Home Page: https://www.devrandom.it/software/ng2-google-charts/
License: MIT License
Angular Google Charts module
Home Page: https://www.devrandom.it/software/ng2-google-charts/
License: MIT License
As explained in the title, I'm trying to use mouseout event on time line chart and I get an error message saying 'chart.getChartLayoutInterface is not a function'. I've been able to use the same event with the handler function with a combo chart.
Looking a the code, it seems that all chart inherits from google-chart.component.ts.
Or is there any restriction on some charts?
Anyway here is the code I have used.
TypeScript
`import { Component, OnInit } from '@angular/core';
import { ChartSelectEvent, ChartMouseOverEvent, ChartMouseOutEvent } from 'ng2-google-charts';
@component({
selector: 'app-mycomp',
templateUrl: './mycomp.component.html',
styleUrls: ['./mycomp.component.css']
})
export class MycompComponent implements OnInit {
TimeLineOptions = {
chartType:'Timeline',
dataTable:[
['Name', 'Percent', 'Start Date', 'End Date'],
['Christophe','5',new Date(2014, 2, 10), new Date(2014, 6, 20)],
['Maxime','25',new Date(2014, 2, 22), new Date(2014, 4, 20)],
['Nicolas','75',new Date(2014, 2, 14), new Date(2014, 5,2)],
['Henry','56',new Date(2014, 2, 31), new Date(2014, 3, 20)],
['Henry','55',new Date(2015, 2, 31), new Date(2015, 3, 20)],
],
options: { height: 300, colorByRowLabel: true,
colors: ['#cbb69d', '#603913', '#c69c6e'], }
};
comboChartData:any = {
chartType: 'ComboChart',
dataTable: [
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 614.6],
['2005/06', 135, 1120, 599, 1268, 288, 682],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 609.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]
],
options: {
title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
seriesType: 'bars',
series: {5: {type: 'line'}}
}
};
constructor() { }
ngOnInit() {
}
public mouseOver(event: ChartMouseOverEvent) {
console.log('ChartMouseOverEvent');
console.log('bb: ' + JSON.stringify(event.boundingBox));
console.log('pos: ' + JSON.stringify(event.position));
console.log('type: ' + JSON.stringify(event.columnType));
console.log('label: ' + JSON.stringify(event.columnLabel));
console.log('value: ' + JSON.stringify(event.value));
}
public mouseOut(event: ChartMouseOutEvent) {
console.log('ChartMouseOutEvent');
console.log('bb: ' + JSON.stringify(event.boundingBox));
console.log('pos: ' + JSON.stringify(event.position));
console.log('type: ' + JSON.stringify(event.columnType));
console.log('label: ' + JSON.stringify(event.columnLabel));
console.log('value: ' + JSON.stringify(event.value));
}
}
html
<google-chart [data]="TimeLineOptions" (mouseOut)="mouseOut($event)">
<google-chart [data]="comboChartData" (mouseOut)="mouseOut($event)">`
Hello,
I need to create realtime Line chart. I've added an animation property to options, but animation doesn't work. Is it because of dataTable updating by reference? How animation could be implemented?
is it possible to update the moment
version to v2.19.3+? There was a recent vulnerability that was found in version v2.19.2 and below. This makes builds, which use the nsp
package to check for known vulnerabilities, to break. I see that moment
is set to v2.17.1 in your project, so adding moment
v2.19.3 to my packages.json
doesn't make a difference.
Here is the output from nsp
:
(+) 1 vulnerability found
┌────────────┬────────────────────────────────────────────────────────────────────┐
│ │ Regular Expression Denial of Service │
├────────────┼────────────────────────────────────────────────────────────────────┤
│ Name │ moment │
├────────────┼────────────────────────────────────────────────────────────────────┤
│ CVSS │ 7.5 (High) │
├────────────┼────────────────────────────────────────────────────────────────────┤
│ Installed │ 2.17.1 │
├────────────┼────────────────────────────────────────────────────────────────────┤
│ Vulnerable │ <2.19.3 │
├────────────┼────────────────────────────────────────────────────────────────────┤
│ Patched │ >=2.19.3 │
├────────────┼────────────────────────────────────────────────────────────────────┤
│ Path │ [email protected] > [email protected] > [email protected] │
├────────────┼────────────────────────────────────────────────────────────────────┤
│ More Info │ https://nodesecurity.io/advisories/532 │
└────────────┴────────────────────────────────────────────────────────────────────┘
please show me to use event select chart element
i fount https://developers.google.com/chart/interactive/docs/events
but i can't apply it
thank.
Here is the list of some of modules from my package.json:
_
"@angular/common": "^4.2.4",
"@angular/compiler": "^4.2.4",
"@angular/core": "^4.2.4",
"@angular/platform-browser": "^4.2.4",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.2.4",
"@ngrx/core": "^1.2.0",
"@ngrx/router": "^1.0.0-beta.2",
"ng2-google-charts": "^3.3.0",
_
It was working fine until 02/16/2018. But now it started throwing the below error:
ERROR in Metadata version mismatch for module /jenkins/..../node_modules/ng2-google-charts/index.d.ts, found version 4, expected 3.
This is stopping my build and deployment. Please help me.
I'm using chartType: 'Table'
and trying to have one of the cells be a router link. I've tried a bunch of stuff including using formatters but can't get any of it to work. I simply need a table cell to be formatted like <a [routerLink]="/whatever">Link</a>
which seems like it should be easy to do. Any suggestions?
I followed the instruction mentioned in readme file. But, still I am not able to integrate the charts successfully with my project.
npm i --save ng2-google-charts
.Ng2GoogleChartsModule
in your app.module.ts
..ts
file as shown in example.Following is the error that I am getting.
Can't bind to 'data' since it isn't a known property of 'google-chart'.
1. If 'google-chart' is an Angular component and it has 'data' input, then verify that it is part of this module.
2. If 'google-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
("
<div class="col-sm-12">
<h2>Gaugh Chart</h2>
<google-chart [ERROR ->][data]="pieChartOptions"></google-chart>
</div>
</div>
"): SummaryComponent@18:26
'google-chart' is not a known element:
1. If 'google-chart' is an Angular component, then verify that it is part of this module.
2. If 'google-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
<div class="col-sm-12">
<h2>Gaugh Chart</h2>
[ERROR ->]<google-chart [data]="pieChartOptions"></google-chart>
</div>
</div>
"): SummaryComponent@18:12 ; Zone: <root> ; Task: Promise.then ; Value:
Also, thanks for creating this awesome project. :)
Hi,
first of all, thank you for porting the charts into angular's world.
I've got issue, when data are append after a chart creation. I'm using Object.create()
in my subscribe
's callback to re-draw the chart with new options, what causes the method from (chartSelect)
isn't called.
Am I doing wrong or is it a bug?
scrap of code for reference:
export class Component {
activityChartOptions: any;
constructor(private service: Service) {
this.activityChartOptions = require('./charts/activity.json');
}
// ...
private fetchStats() {
this.service.get().subscribe((result) => {
this.activityChartOptions = Object.create(this.activityChartOptions);
this.activityChartOptions.dataTable = result;
});
}
}
currently when updating to angular 4 we are getting the below warning:
[email protected] requires a peer of @angular/common@^2.3.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/compiler@^2.3.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/core@^2.3.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/forms@^2.3.0 but none was installed.
The color formatter doesn't have the options
but the method. How to use the addRange method?
https://developers.google.com/chart/interactive/docs/reference#colorformat
Hi,
Ive seen your google.service.loader and i am wondering doesnt the Dom Sanitizer executes to remove the script ??
let script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://www.gstatic.com/charts/loader.js'; script.async = true; script.defer = true; script.onload = () => { this.googleScriptIsLoading = false; this.googleScriptLoadingNotifier.emit(true); resolve(); }; script.onerror = () => { this.googleScriptIsLoading = false; this.googleScriptLoadingNotifier.emit(false); reject(); }; document.getElementsByTagName('head')[0].appendChild(script);
Ive tried adding the script before and the Dom Sanitizer executes and sanitizes the index.html.
Just wondering how you handled it
Docs : https://angular.io/api/platform-browser/DomSanitizer
Hello,
I checked your docs and did not find any way to make my chart bigger. For example , I want to make my chart as high as 900 px, but I can not find place to set it, it can only show as 200px.
There are cases where I need to redraw a chart from scratch, wondering the best way to do this?
GeoChart requires a mapsApiKey
that needs to be supplied. A parameter for the element <google-charts>
should be provided.
Hi
I am trying to use ng2-google-charts to paint a pie chart
I am not able to define colors for slices. My options look like this
pieChartOptions = {
chartType: 'PieChart',
dataTable : this.pieChartData,
slices: {
0: {
fill:'#000000'
}
}
}
Please suggest
Thanks,
Pranav Kaushik
donut chart are not implemented yet !
<google-chart [data]="pieChartData" (mouseOver)="mouseOver($event)"></google-chart>
...
this.pieChartData = {
"chartType": "PieChart",
"dataTable": [["Title", "Value"], ["A", 80], ["B", 10], ["C", 30]]
// NO options
}
mouseOver(e?) {
console.log("mouseover", e);
}
throws following error:
EXCEPTION: Cannot read property 'seriesType' of undefined
i need to draw a bar cart in tooltip.
it is possible as per the google chart documentation-
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#placing-charts-in-tooltips
how can i achieve the same using this package, as i do not see such methods and configuration options mentioned in document here in this package.
@gmazzamuto please suggest.
Thanks for this awesome project. I want to use the Google Formatter, but I am unable to do so.
In Google Charts, we can use something like this to format that data. What do we need to do in this project to achieve the same result?
var data = new google.visualization.arrayToDataTable(chartData, false);
var formatter = new google.visualization.NumberFormat({
pattern: '#.##%'
});
formatter.format(data, 1);
var chart = new google.visualization.BarChart(document.getElementById('poll-result'));
Thanks
Hi gmazzamuto,
html
<google-chart [data]="columnChartOptions">
component.ts
columnChartOptions = {
chartType: 'ColumnChart',
dataTable: this.statData,
options: {'title': 'Chart'}
};
this.statData // initalize after ngOnInit
how can i redraw the google-chart graph?
I use this package for angular 2
I have configed in app.module.ts
import { Ng2GoogleChartsModule } from 'ng2-google-charts';
@NgModule({
...
imports: [
...
Ng2GoogleChartsModule,
],
})
export class AppModule { }
in package.json
"@angular/animations": "^4.1.1", "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0", "bootstrap": "^3.3.7", "chart.js": "^2.5.0", "core-js": "^2.4.1", "flag-icon-css": "^2.8.0", "jquery": "^3.2.1", "ng2-datepicker": "^1.8.3", "ng2-dnd": "^4.0.2", "ng2-tag-input": "^1.2.6", "rxjs": "^5.1.0", "zone.js": "^0.8.4"
but i get issue: Can't bind to 'data' since it isn't a known property of 'google-chart'.
Perhaps I'm doing something wrong however I can't seem to get a chart to respond to a drag event on a mobile device. The touch event works for selecting elements on the chart but dragging will not scroll, even with correctly configured viewWindow and explorer options.
This is easily reproduce-able and testable by creating a chart with a defined viewWindow and then using the Chrome DevTools device toolbar to emulate a phone.
Clicking and dragging on desktop works, however doing the same action with a touch event does not.
Any thoughts?
Hey Guys, Thanks for the great module. It works great out of the box with VS's new Angular template project. However, when publishing, and using their "prod" config of webpack, I get the following error. Was wondering if you have any suggestions. Thanks in advance!
PM> webpack --env.prod --display-error-details
ERROR in ./$$_gendir/~/ng2-google-charts/google-chart/google-chart.component.ngfactory.ts
Module parse failed: C:\Users\ryan.reynolds\Source\Repos\partner-portal\PartnerPortal\PortalWeb\$$_gendir\node_modules\ng2-google-charts\google-chart\google-chart.component.ngfactory.ts Unexpected token (12:33)
You may need an appropriate loader to handle this file type.
| import * as i1 from 'ng2-google-charts/google-chart/google-chart.component';
| import * as i2 from 'ng2-google-charts/google-charts-loader.service';
| const styles_GoogleChartComponent:any[] = ([] as any[]);
| export const RenderType_GoogleChartComponent:i0.RendererType2 = i0.ɵcrt({encapsulation:2,
| styles:styles_GoogleChartComponent,data:{}});
@ ./$$_gendir/ClientApp/app/components/customers/customers.component.ngfactory.ts 9:0-124
@ ./$$_gendir/ClientApp/app/app.module.browser.ngfactory.ts
@ ./ClientApp/boot.browser.ts
I have attached the webpack config for reference.
Thanks,
Ryan
Hi,
I think im missing something.
I've tried to import the module but i keep getting a 404 when i load my ui =>
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/ng2-google-charts Error: XHR error (404 Not Found) loading http://localhost:3000/ng2-google-charts at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1199:29) [<root>] at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:165:47) [<root> => <root>] at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:460:38) [<root>] Error loading http://localhost:3000/ng2-google-charts as "ng2-google-charts" from http://localhost:3000/app/logs/logs.module.js at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1199:29) [<root>] at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:165:47) [<root> => <root>] at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:460:38) [<root>] Error loading http://localhost:3000/ng2-google-charts as "ng2-google-charts" from http://localhost:3000/app/logs/logs.module.js
here's my import
`import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Ng2GoogleChartsModule } from 'ng2-google-charts';
import { LogsComponent } from './logs.component';
import { RawLogsComponent } from './raw-logs/raw-logs.component';
import { LogsService } from './shared/logs.service';
@NgModule({
imports: [CommonModule, Ng2GoogleChartsModule],
declarations: [ LogsComponent, RawLogsComponent ],
providers: [ LogsService ],
bootstrap: [ ]
})
export class LogsModule { }`
I'm using Angular 4 and i would like to insert some charts in my ui.
Thanks,
Théo
<google-chart [data]="pieChartData" (mouseOver)="mouseOver($event)"></google-chart>
...
this.pieChartData = {
"chartType": "PieChart",
"dataTable": [["Title", "Value"], ["A", 80], ["B", 10], ["C", 30]],
"options": {
"height": 300,
}
}
mouseOver(e?) {
console.log("mouseover", e);
}
throws following error:
EXCEPTION: Invalid column index null. Should be an integer in the range [0-1].
I guess it's because in private parseMouseEvent
(src/google-chart/google-chart.component.ts) , code tries to get values like columnType and columnLabel that do not exist for piecharts...
formatters: [{
columns: [1, 2, 3],
type: 'NumberFormat',
options: {
groupingSymbol:'\'',
decimalSymbol: '.',
fractionDigits: 0,
prefix: 'CHF ', negativeColor: '#FF0000', negativeParens: true
}}
this.cchart.wrapper.setDataTable(this.lineChartData.dataTable);
this.cchart.redraw();
Google documentation states, that one has to reformat data before it can get displayed. This is done once (when the chart is loaded) in ngOnChanges()
(google-chart.component.js
) which applies formatters to the given columns. But as far as I can tell, reformatting isn't done/triggered by redraw()
.
As a quick workaround I forked the repo and implemented a format()
function which is called before redraw()
.
in google-chart.component.js
GoogleChartComponent.prototype.format = function () {
var _this = this;
if (_this.data.formatters !== undefined) {
for (var _i = 0, _a = _this.data.formatters; _i < _a.length; _i++) {
var formatterConfig = _a[_i];
var formatterConstructor = google.visualization[formatterConfig.type];
var formatterOptions = formatterConfig.options;
var formatter = new formatterConstructor(formatterOptions);
for (var _b = 0, _c = formatterConfig.columns; _b < _c.length; _b++) {
var col = _c[_b];
formatter.format(_this.wrapper.getDataTable(), col);
}
}
}
_this.redraw();
}
then:
this.cchart.format();
this.cchart.redraw();
Another solution would be to trigger reformatting in the redraw()
function or to expose google.visualization API and/or the formatter constructor. What do you think?
hey admin,
Chart is displayed in browser, but not in actual device. I'm Not able to figure out need your help.
Thank you.
I'm creating a gantt chart as following:
chart = {
chartType: 'Gantt',
dataTable: [
['Task ID', 'Task Name', 'Start Date', 'End Date', 'Duration', 'Percent Complete', 'Deependencies'],
['1', 'Task 1', new Date(2016,0,1), new Date(2016,0,2), 200, 100, null],
['2', 'Task 2', new Date(2016,0,2), new Date(2016,0,3), null, 20, '1'],
],
options:{
title: 'Project',
height: 275,
}
}
Unfortunately, by pushing a new Task
in the dataTable
, the gantt chart is not refreshed and it still contains just the original tasks
here my code
v3.2.0 is broken. On startup I got that error message. After I downgraded to v3.1.0 everything works fine now.
Error started occuring after upgrading angular to 2.4.3
Hi, I'm getting this error message in version 1.0.2: Unexpected value 'Ng2GoogleChartsModule' imported by the module 'MyModule'
It cannot be imported as:
import { Ng2GoogleChartsModule } from "ng2-google-charts";
now, in order to make it works, It needs to be imported like:
import { Ng2GoogleChartsModule } from "ng2-google-charts/dist";
Any ideas about it?
Like the original google charts, does this package also supports 5 columns data iin Timeline Chart?
If so, can you add this support?
Reference: Google Timeline Data
Hello
I am trying to implement a responsive pie chart with width and height to 100%.
The html code:
<google-chart id="chart" [data]="pieChartData"></google-chart>
The relevant scss code:
#chart {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width:100%;
height:100%;
@include rem(max-width, 350px); // just calculates the rem
@include rem(max-height, 350px); // just calculates the rem
}
and the chartData object:
{
chartType: "PieChart",
dataTable: dataTable,
options: {
legend:"none",
height: "100%",
width: "100%",
chartArea: {
height: "94%",
width: "94%"
}
}
}
For some reason setting "100%" in width and height does not work, hard coding those to e.g 350 will not make it responsive.
Although the #chart in my browser ends up to 350 x 350 the enclosed div defaults to 350 x 200
I have tried using "100%" in plain javascript/css/html and it works.
Any idea how to implement a responsive chart or what am am I doing wrong?
Is it possible to create something like that?
https://developers.google.com/chart/interactive/docs/gallery/annotatedtimeline
Hello,
I would like to know how setting null values in a dataTable like in this example:
dataTable: [
['Task ID', 'Task Name', 'Start Date', 'End Date', 'Duration', 'Percent Complete', 'Deependencies'],
['1', 'Task 1', new Date(2016,0,1), new Date(2016,0,2), 200, 100, null],
['2', 'Task 2', new Date(2016,0,2), new Date(2016,0,3), null, 20, '1'],
]
For the moment, I have an error:
All series on a given axis must be of the same data type
Thank you in advance.
Current Behavior:
Required Behavior:
I have found that in the Table Chart there is a functionality to select multiple rows by pressing the CTRL key. Is it possible in the Pie Chart?
Any help would be appreciated.
Thanks in advance.
Firstly, thanks for writing this project, it was very helpful for getting started.
I was wondering if it was possible to add Google Charts controllers for charts using Ng2 Google Charts?
Specifically I was wondering if it was possible to add things like the Chart Range Filter and use Aggregate data?
Since the angular-cli 1.0.0 release, the project is unable to build using ng build --prod
.
It gives the error message
ERROR in .../node_modules/ng2-google-charts/google-chart/google-chart.component.ngfactory.ts (38,20): Property 'data' is private and only accessible within class 'GoogleChartComponent'.
how to connect "time line" chart https://developers.google.com/chart/interactive/docs/gallery/timeline ?
I have the following code that I am trying out.
timelineChartData = {
chartType: 'Timeline',
dataTable: [
[ 'Washington', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
[ 'Adams', new Date(1797, 2, 3), new Date(1801, 2, 3) ],
[ 'Jefferson', new Date(1801, 2, 3), new Date(1809, 2, 3) ]
],
options: {
'title': 'Tasks'
},
};
But I only see Adams and Jefferson. Washington is not showing. Any idea why?
Consider Ng2GoogleChartsModule imported into a lazily-loaded module and also into an eagerly-loaded feature module. If the lazily-loaded module is routed to at startup, then the Google charts code can throw an error warning that the chart code cannot be loaded multiple times.
This is kind of an odd-ball case but I stumbled into it as soon as I switched our app's pages to lazy load. I have a fix that eliminates the error and I'll submit a PR for it.
My change feels a little hacky and I'll be very interested in better alternatives!
I have created new column chart.
Option object is:
options: {
title: 'Company Performance',
explorer: { axis: 'vertical' },
explorer: { axis: 'horizontal' },
chartArea: {
width:'90%',
height:'60%'
}
}
Data table is:
dataTable: [
['Year', 'Sales', 'Expenses', 'Profit'],
['1998', 1030, 540, 350],
['1999', 1000, 400, 200],
['2000', 1170, 460, 250],
['2001', 660, 1120, 300],
['2002', 1030, 540, 350],
['2003', 1030, 540, 350],
['2004', 1030, 540, 350],
['2005', 1000, 400, 200],
['2006', 1170, 460, 250],
['2007', 660, 1120, 300],
['2008', 1030, 540, 350],
['2009', 1000, 400, 200],
['2010', 1170, 460, 250],
['2011', 660, 1120, 300],
['2012', 1030, 540, 350],
['2013', 1030, 540, 350],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]
Chart type is:
chartType: 'ColumnChart'
ISSUE:
Horizontal scroll is not working in column chart. But vertical chart is working as expected even Zoom also working.
If i use google-chart then both scroll is working as expected.
I´m trying to work with GeoChart, but I´m facing two issues. First, seems that be must declared the google map API-KEY on index.html, but working with a simple example like demonstrated on https://developers.google.com/chart/interactive/docs/gallery/geochart,is not necessary the API-KEY. Second, after declare the API-KEY on index.html, appears in console that world_COUNTRIES.js and countries_en.js not loading. Consequently, instead of appears the map from geochart package, appears "Requested map does not exist".
Is it possible to save the chart as an image? Is so, How?
I noticed this because my animations aren't running smoothly as new data is pushed to the chart. I think line 75 in google-chart.component.ts
is wrong. It should read (I believe):
if (this.wrapper === undefined || this.wrapper.getChartType() !== this.data.chartType) {
Note the parens after this.wrapper.getChartType
to actually execute the method call.
I had a chance to check this out and I've made a pull request.
Hi,
I'm trying to load dynamic data on the GeoChart, I'm doing a service call on ngOnInit to retrieve lat/long and updating the dataTable with that info.
It all works fine when I load the page using F5, the chart is loaded and the markers are all loaded dynamically but when I go to the page through routing (from another component), the chart is loaded empty (no markers even tough the service call was made).
export class DummyComponent implements OnInit {
public geoChartData = {
chartType: 'GeoChart',
dataTable: [
['Latitude', 'Longitude', 'Description'],
[0, 0, '']
],
options: {
'region': '154',
'displayMode': 'markers'
}
};
constructor(private dummyService: DummyService) { }
public ngOnInit(): void {
this.dummyService.getData().subscribe(data => {
const placesMap = data.map(place => ([
latitude,
longitude,
'description'
]));
this.geoChartData.dataTable = [
['Latitude', 'Longitude', 'Description'],
...placesMap
];
});
}
}
I am using the sample pie chart:
public pieChartData = {
chartType: 'PieChart',
dataTable: [
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
],
options: {'title': 'Tasks'},
};
However, later if I change this.pieChartData.dataTable[1][1] = 100
, the chart does not update.
The chartReady event fires, but the chartSelect doesn't seem to work?
import { Component, OnInit } from '@angular/core';
import { ChartSelectEvent, ChartReadyEvent } from 'ng2-google-charts';
@Component({
selector: 'app-projects',
template: `<google-chart [data]="sankeyData" (chartSelect)='select($event)' (chartReady)='ready($event)'></google-chart>`,
styleUrls: ['./projects.component.css']
})
export class ProjectsComponent implements OnInit {
sankeyData: any;
constructor() { }
ngOnInit() {
this.sankeyData = {
chartType: 'Sankey',
dataTable: [
['From', 'To', 'Weight'],
['A', 'X', 5],
['A', 'Y', 7],
['A', 'Z', 6],
['B', 'X', 2],
['B', 'Y', 9],
['B', 'Z', 4]],
options: {
width: 1000,
height: 1000
}
};
}
public ready(event: ChartReadyEvent) {
alert('ready');
}
public select(event: ChartSelectEvent) {
alert('foo');
console.log(event.selectedRowValues);
}
}
I'm trying to create a waterfall chart as seen here
This chart requires the data table that is created with the first row as data option
var data = google.visualization.arrayToDataTable([ ['Mon', 28, 28, 38, 38], ['Tue', 38, 38, 55, 55], ['Wed', 55, 55, 77, 77], ['Thu', 77, 77, 66, 66], ['Fri', 66, 66, 22, 22] // Treat the first row as data. ], true);
How do I create a data table in such a way that the API required?
Thank you
Need GeoChart events implementations for "regionClick and select"
We are trying to use GeoChart on click functionality, where we initially tried with ChartSelectEvent.
The chart select event is working in bar and pie chart. But its not working in Geo Chart. Can you help us here on how we can implement this functionality.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.