GoogleWebComponents / Google Chart
Licence: apache-2.0
Google Charts API web components
Stars: ✭ 284
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Google Chart
multiselect-combo-box
A multi select combo box web component based on Polymer and the vaadin-combo-box
Stars: ✭ 41 (-85.56%)
Mutual labels: polymer, webcomponents
Apollo Elements
🚀🌛 Use the Launch Platform 👩🚀👨🚀
Stars: ✭ 278 (-2.11%)
Mutual labels: webcomponents, polymer
vaadin-context-menu
The responsive Web Component for showing context dependent items for any element on the page. Part of the Vaadin components.
Stars: ✭ 26 (-90.85%)
Mutual labels: polymer, webcomponents
skeleton-carousel
Carousel component. Horizontal and vertical swipe navigation
Stars: ✭ 31 (-89.08%)
Mutual labels: polymer, webcomponents
polymerx-cli
⚡ Unlock the power of Polymer 3, Web Components and modern web tools.
Stars: ✭ 30 (-89.44%)
Mutual labels: polymer, webcomponents
toggle-icon
toggle-icon is a custom element created with Polymer. It provides an extremely powerful and customizable switch that looks like a paper-icon-button.
Stars: ✭ 21 (-92.61%)
Mutual labels: polymer, webcomponents
vaadin-checkbox
The Web Component for customized checkboxes. Part of the Vaadin components.
Stars: ✭ 18 (-93.66%)
Mutual labels: polymer, webcomponents
polymer-ui-router
UI-router wrapper for Web Components
Stars: ✭ 24 (-91.55%)
Mutual labels: polymer, webcomponents
vaadin-icons
Vaadin Icons is a collection of 600+ unique icons designed for web applications
Stars: ✭ 59 (-79.23%)
Mutual labels: polymer, webcomponents
lego
🚀 Web-components made lightweight & Future-Proof.
Stars: ✭ 69 (-75.7%)
Mutual labels: polymer, webcomponents
Realtime object detection
Plug and Play Real-Time Object Detection App with Tensorflow and OpenCV. No Bugs No Worries. Enjoy!
Stars: ✭ 260 (-8.45%)
Mutual labels: api, google
file-fire
Simple way to upload and download files from Firebase Storage.
Stars: ✭ 13 (-95.42%)
Mutual labels: polymer, webcomponents
scheduler-component
A Web Component wrapper for FullCalendar library that uses Polymer version 2.0 and ES6.
Stars: ✭ 24 (-91.55%)
Mutual labels: polymer, webcomponents
vaadin-split-layout
The Web Component which allows you to partition a layout into resizeable areas. Part of the Vaadin components.
Stars: ✭ 40 (-85.92%)
Mutual labels: polymer, webcomponents
mapbox-gl
Polymer 2.0 custom element for mapbox-gl-js. Uses WebGL to render interactive maps from vector tiles and Mapbox styles - compatible with deck-gl.
Stars: ✭ 24 (-91.55%)
Mutual labels: polymer, webcomponents
vaadin-dialog
High quality web component for modal dialogs. Part of the Vaadin platform.
Stars: ✭ 15 (-94.72%)
Mutual labels: polymer, webcomponents
dom-repeat-n
[Polymer 1.x] A template element that repeat n times its content.
Stars: ✭ 20 (-92.96%)
Mutual labels: polymer, webcomponents
vaadin-text-field
The themable Web Component providing input controls. Part of the Vaadin components.
Stars: ✭ 29 (-89.79%)
Mutual labels: polymer, webcomponents
google-chart
Google Charts API web components.
See: Documentation
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, customElement} from 'lit-element';
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].