• Stars
    star
    342
  • Rank 123,683 (Top 3 %)
  • Language
    TypeScript
  • License
    Apache License 2.0
  • Created over 10 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Google Charts API web components

google-chart

Google Charts API web components.

See: Documentation

Published on NPM Published on webcomponents.org

Usage

Installation

npm i @google-web-components/google-chart

In HTML file

<html>
  <head>
    <script type="module">
      import '@google-web-components/google-chart';
    </script>
  </head>
  <body>
    <google-chart data='[["Month", "Days"], ["Jan", 31]]'></google-chart>
  </body>
</html>

In a LitElement

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`
      <google-chart data='[["Month", "Days"], ["Jan", 31]]'></google-chart>
    `;
  }
}

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '@google-web-components/google-chart';

class NewElement extends PolymerElement {
  static get template() {
    return html`
      <google-chart data='[["Month", "Days"], ["Jan", 31]]'></google-chart>
    `;
  }
}
customElements.define('new-element', NewElement);

More usage examples

See examples in the demo or try this live JS bin.

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). In the example below, note the addition of ::google-chart-select.

- <google-chart selection="{{chartSelection}}"></google-chart>
+ <google-chart selection="{{chartSelection::google-chart-select}}"></google-chart>

LitElement components using the selection-changed event must be updated in a similar fashion:

- <google-chart .selection="${chartSelection}" @selection-changed="${reactToChartSelection}"></google-chart>
+ <google-chart .selection="${chartSelection}" @google-chart-select="${reactToChartSelection}"></google-chart>

Removed google-chart-loader component

Its functionality can be imported from the loader.js module:

import {dataTable, load} from '@google-web-components/google-chart/loader.js';

or you may instead choose to use google.visualization.ChartWrapper directly (example).

Contributing

Instructions for running the tests and demo locally:

Installation

git clone https://github.com/GoogleWebComponents/google-chart.git
cd google-chart
npm install

Running the demo locally

npm start

The browser will open automatically.

Running the tests

npm test

More Repositories

1

google-map

Google Maps web components
HTML
427
star
2

style-guide

Google Web Component Style Guide
356
star
3

google-signin

Google Sign-in web component
JavaScript
276
star
4

google-analytics

Google Analytics web components
HTML
183
star
5

googlewebcomponents.github.io

Google Web Component collection
HTML
141
star
6

google-youtube

YouTube video playback web component
JavaScript
124
star
7

google-calendar

Google Calendar web components
HTML
96
star
8

firebase-element

Web components for the Firebase Web API
HTML
96
star
9

google-apis

Web components for loading Google's JavaScript Libraries
JavaScript
86
star
10

google-sheets

Google Spreadsheets web components
HTML
82
star
11

google-drive

Google Drive Polymer element
HTML
75
star
12

google-url-shortener

Web component that shortens URLs with the Google URL Shortener API
HTML
43
star
13

google-youtube-video-wall

CSS
41
star
14

google-castable-video

A Polymer element for casting video
HTML
41
star
15

google-youtube-upload

Element enabling you to upload videos to YouTube.
HTML
39
star
16

google-web-components

Google Web Components meta-package
HTML
35
star
17

google-hangout-button

Google Hangout button web component
HTML
34
star
18

google-streetview-pano

Google Maps Street View web component
HTML
31
star
19

google-cloud

Google Cloud Platform Elements
HTML
26
star
20

google-feeds

Polymer element for the Google Feeds API
HTML
21
star
21

places-app

Material design maps places search
HTML
21
star
22

demos

Demo apps using Google Web Components
19
star
23

google-domain-user-picker

A Polymer element for filtering and selecting people from a Google Apps Domain
HTML
6
star