dbk4002 / angular-google-chart

Google Chart Implementation In Angular 6

Angular Google Chart Component

This project was generated with Angular CLI version 6.0.7.

How To Use

1. Import Google Chart Module to your module file : import {GoogleChartModule} from './angular-google-chart/google-chart.module';

2. Add component in HTML <google-chart [chartType]="'LineChart'" [dataPromise]="dataPromise" [options]="options" (onSelect)="onSelect($event)" ></google-chart>

Options

• chartType - Type of Chart. For example: LineChart, ScatterChart, AreaChart, BarChart, BubbleChart, CandlestickChart, ColumnChart, ComboChart, PieChart, Gantt,Gauge, GeoChart, Histogram, OrgChart, Sankey, SteppedAreaChart, Table, Timeline, TreeMap, WordTree, Calendar, Map

• dataPromise - Promise to fetch data

• options - Google Chart Option Object Google Chart Customization

• config - Chart additional configuration object. For example, chart data does not have header & starts with row only then set firstRowAsData as true.

• onInit - Event which will be fired when angular chart component will be initialized with ChartWrapper. It will return div - dynamic generated div Id for reference & wrapper - Reference to ChartWrapper to make changes and modify chart configuration and data manually

• onReady - Event which fires every time chart is rendered & ready with new data or options. This event has no parameters.

• onError - Event which fires on error while rendering chart.

• onSelect - Event which will ne called on selecting data points on chart

Configuration

Provided angular-google-chart.config JSON file which has following configuration options:

• packages - Packages to load. This is depend on chart type you use.

• mapsApiKey - Google Developer API Key in order to access google map JS API.

Features

• Inbuild Google Library Loading - All related library and packages will be loaded throgh component so no need to include explicitly and loading chart relaed packages

• Data Changes Aware - Component is data changes aware so in case of changes in data promise, chart will rerender again automatically.

• Option Changes Aware - Any changes made to Google Option Object, will be automatically drawn to chart.

Demo

Setup latest angular CLI(6.0.7) then clone this repo and fire command ng serve

Please refer demo.component for all chart type demo.

Roadmap

Reffer Wiki

Screenshot

angular-google-chart's Issues

Resize Sankey

I want to resize the sankey chart, but it has a custom div that i can't change.

angular-google-chart "geochart" with slider through years

Hi, I'm trying to create a map to show the effects of climate change on the planet through the years, the problem is that when I run the slider the geochart "flicker" / "blincking" .
but after 1/2 minutes go smooth, as if the geochart keeps making requests and when it is finished then the geochart with the slider goes smooth, but these requests continue even after it goes smooth so I don't understand how to make the geochart go smooth from start, I leave you my question on stackoverflow below for all the information
Thank you
https://stackoverflow.com/questions/70999445/angular-google-chart-geochart-with-slider-through-years