Lit

Migrated to latest Lit version: https://lit.dev/

LitElement & TypeScript

The component has been migrated to LitElement and uses TypeScript now. This migration introduced two breaking changes.

See the upgrade notes.

Shadow DOM support

v2.0.1

2.0.0 -> 2.0.1

v2.0.0

1.1.1 -> 2.0.0

Style module and more chart types

Moves the CSS into a proper Polymer Style Module.

Adds chart types:

• Sankey
• Wordtree

v1.1.1

v1.1.0 => 1.1.1

1.1.0

Major Changes

• A new element googleChartLoader has been created. See below for details.
• Package loading is debounced to load all packages in one call.

Bug Fixes

• google.charts.load is only called once
• Material chart types may be added (md-bar added as sample)
• Some tests were updated

Minor API Changes

• google-chart-render event renamed to match chart event google-chart-ready
• google-chart-select event no longer contains the selection directly
• Method drawChart has been renamed redraw
• Stopgap googleChart.pkg is gone. Instead, use:
  • googleChartLoader.dataTable to create a promise for a DataTable
  • googleChartLoader.dataView to create a promise for a DataView
• googleChart.getImageURI() is now googleChart.imageURI
• You may now check googleChart.drawn to see if the chart is drawn

The <google-chart-loader>

Do I need it?

You won't need it unless you:

• Make use of DataTables, DataViews, etc.
• Create charts dynamically

If that's not you, then you don't need to read any of this. The googleChart element itself contains a loader to make sure that the packages for the chart type you've requested are in place.

What is it?

The googleChartLoader element is responsible for loading all of the visualization packages required for rendering charts. This should be done at page load so that google.charts.load is only called once. The element will also create promises for DataTables and DataViews as well as attach event listeners to the chart.

How do I use it?

If you fall into the above crowd of DataView/DataTable/etc. users or you want to create charts long after the page has been loaded, here's what you need to know:

Create

var myLoader = document.createElement('google-chart-loader');

<google-chart-loader id="myLoader"></google-chart-loader>

Create a DataTable

myLoader.dataTable([cols, ...rows]).then(function(dataTable) {
  // Do something with the dataTable...
  chart.data = dataTable;
});

Create a DataView

myLoader.dataTable([cols, ...rows])
  .then((dataTable) => {
    this.dataTable = dataTable;
    return loader.dataView(dataTable);
  })
  .then((dataView) => {
    // Do something with the dataView...
    chart.view = dataView;
  });

Preload packages for charts created dynamically after pageload

Chart packages should be loaded all-at-once on pageload. If you are creating charts of various types/packages after pageload, you should use a loader element to make sure the proper packages are loaded immediately as google.charts.load may only be called once at the moment.

If this is you, just place a googleChartLoader element with the needed details in some markup that is loaded with the page:

<!-- load by package name -->
<google-chart-loader packages='["gauge", "timeline"]'></google-chart-loader>
<!-- load by chart type -->
<google-chart-loader type="table"></google-chart-loader>

Other functionality

The googleChartLoader element also exposes two other public methods: create and fireOnChartEvent. These two functions are not ready for the prime time, so you shouldn't use them quite yet. The loader that actually loads the packages also fires a loaded event with it, but you probably shouldn't rely on that right now, either.

1.0.6

• Allow multiple loads via a URL
• Bug fixes.

1.0.5

Rev 1.0.5

1.0.4

• Added support for getImageURI(), which returns the chart as a dataurl.

158c81f