Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/googlewebcomponents/google-chart
Google Charts API web components
https://github.com/googlewebcomponents/google-chart
api google polymer visualizations webcomponents
Last synced: about 21 hours ago
JSON representation
Google Charts API web components
- Host: GitHub
- URL: https://github.com/googlewebcomponents/google-chart
- Owner: GoogleWebComponents
- License: apache-2.0
- Created: 2014-05-01T19:03:53.000Z (over 10 years ago)
- Default Branch: main
- Last Pushed: 2024-03-01T18:47:07.000Z (7 months ago)
- Last Synced: 2024-04-14T15:38:15.513Z (5 months ago)
- Topics: api, google, polymer, visualizations, webcomponents
- Language: TypeScript
- Homepage: https://www.webcomponents.org/element/@google-web-components/google-chart/elements/google-chart
- Size: 2.33 MB
- Stars: 351
- Watchers: 35
- Forks: 126
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# google-chart
[Google Charts API](https://developers.google.com/chart/) web components.
See: [Documentation](https://www.webcomponents.org/element/@google-web-components/google-chart)
[](https://www.npmjs.com/package/@google-web-components/google-chart) [](https://www.webcomponents.org/element/@google-web-components/google-chart)
## Usage
### Installation
```sh
npm i @google-web-components/google-chart
```
### In HTML file
```html
import '@google-web-components/google-chart';
```
### In a LitElement
```typescript
import {LitElement, html} from 'lit';
import {customElement} from 'lit/decorators.js';
import '@google-web-components/google-chart';
@customElement('new-element')
export class NewElement extends LitElement {
render() {
return html`
`;
}
}
```
### In a Polymer 3 element
```javascript
import {PolymerElement, html} from '@polymer/polymer';
import '@google-web-components/google-chart';
class NewElement extends PolymerElement {
static get template() {
return html`
`;
}
}
customElements.define('new-element', NewElement);
```
### More usage examples
See examples in the demo or try this live [JS bin](https://jsbin.com/zitotejimi/edit?html,output).
## Uprading from 3.x
The component has been migrated to LitElement and uses TypeScript now. This migration introduced two breaking changes.
### Removed Polymer-specific `selection-changed` event
The Polymer-specific `selection-changed` event commonly used for 2-way bindings has been removed.
There were previously two events for observing chart selection changes: `google-chart-select` and the Polymer-generated `selection-changed`.
For consistency with other events (e.g. `google-chart-ready`), we keep only `google-chart-select`.
Polymer components using this feature must be updated to explicitly name the selection event ([details](https://polymer-library.polymer-project.org/3.0/docs/devguide/data-binding#two-way-native)).
In the example below, note the addition of `::google-chart-select`.
```diff
-
+
```
LitElement components using the `selection-changed` event must be updated in a similar fashion:
```diff
-
+
```
### Removed `google-chart-loader` component
Its functionality can be imported from the `loader.js` module:
```javascript
import {dataTable, load} from '@google-web-components/google-chart/loader.js';
```
or you may instead choose to use `google.visualization.ChartWrapper` directly ([example](https://developers.google.com/chart/interactive/docs/reference#chartwrapper-class)).
## Contributing
Instructions for running the tests and demo locally:
### Installation
```sh
git clone https://github.com/GoogleWebComponents/google-chart.git
cd google-chart
npm install
```
### Running the demo locally
```sh
npm start
```
The browser will open automatically.
### Running the tests
```sh
npm test
```