Google-chart polymer demo and web API are Okay, but ...

It would be really nice to have a “true” Polymer example of the google-chart element.

Specific examples of how to structure data, row, column, options using data-binding would be nice.

How to make it so that charts will size and resize appropriately depending on the container and with different viewports and devices, would also be nice.

For example,

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/google-chart/google-chart.html">


<link rel="import" href="shared-styles.html">

<dom-module id="my-gauge">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
      }
    </style>

    <div class="wrapper">
      <google-chart
          id="gauge"
          type="gauge"
          data='{{data}}'
          options='{{options}}'
          on-google-chart-ready='chartLoaded'>
      </google-chart>
    </div>

  </template>

  <script>
    Polymer({
      is: 'my-gauge',

      properties: {
        data: {
          type: Array,
          notify: true
        },

        options: {
          type: Object,
          notify: true
        }
      },

      behaviors: [
        Polymer.AppNetworkStatusBehavior,
        Polymer.IronResizableBehavior,
      ],

      listeners: {
        'iron-resize': '_onIronResize'
      },

      ready: function() {
        console.log('my-gauge is ready')
      },

      attached: function() {
        this.async(this.notifyResize, 1);

      },

      _onIronResize: function() {
      },

      chartLoaded: function() {
        console.log('google gauge chart is loaded')
      }
    });
  </script>
</dom-module>

[DMTSource]

To get resizing of google-chart object to work from inside a Polymer template, I set the css of my chart div to 100% and used the IronResizeableBehavior to trigger on resize actions. One main issue was the use of “redraw” on the google-chart vs other incorrect examples online. The charts now smoothly resize to fit their responsive containers.

<style>
#marketchart {
        height: 200px;
        width: 100%;
 }
</style>

<google-chart
        id="marketchart"
        type="line"
        options='{"vAxis": {"minValue" : 0, "maxValue": 10},
                  "chartArea": {"width": "90%"},
                  "legend": {"position": "none"},
                  "selectionMode": "multiple"}'
        cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}, {"label": "Days", "type": "number"}]'
        rows='[["Jan", 31, 22],["Feb", 28, 19],["Mar", 31, 17],["Apr", 30, 25],["May", 31, 29],["Jun", 30, 22]]'>
</google-chart>

<script>
    Polymer({
      is: 'my-dashboard',

      behaviors: [
        Polymer.IronResizableBehavior
      ],

      listeners: {
        'iron-resize': '_onIronResize'
      },

      attached: function() {
        this.async(this.notifyResize, 1);
      },

      get parent() {
        if (this.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
          return this.parentNode.host;
        }
        return this.parentNode;
      },

      _onIronResize: function() {
        // Ensure every chart is redrawn on resize for full responsiveness
        this.$.marketchart.redraw(); 
      }

    });
  </script>

[esd100]

@wesalvaro it looks like you are making some big changes, some of which look very interesting.

You mention in the draft that loading will be done through iron-ajax for example. I think providing one complete example of that would be nice and very useful for people that aren’t very familiar with web development.