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

[esd100]

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>

[wesalvaro]

@esd100

Yes, since the charts are drawn as statically sized SVGs by the Google Visualization libraries, it's not super straightforward to get resizing correct for all cases. In the case of using percentages, it's easy for a chart to not size-down or size-right depending on height, width values. If you have a demo that addresses the sizing issue nicely, I would love to see it!

What do you mean about the data-binding examples? Can you elaborate more about what in the documentation is insufficient/unclear?

Thanks!

[esd100]

@wesalvaro

Well, I'm no expert, but it seems to me that the data binding capabilities using {{TwoWayData}} and [[OneWayData]], are really fundamental components of Polymer.

Yet, the examples all show "hard-coded" data for the row, col, or data properties of the charts.

I think it would be nice to have a real world example. For example, charts are often plotted with dynamic data that is acquired from an ever-changing sql or json database. The data is almost never hard coded into the chart. I would imagine that one element would be the fetcher of the data and then would pass the results on to the chart element via data-binding.

Because the row,col or data and options properties expect data in a certain format, it would be good to show an example of what sort of format transformations might be needed.

[wesalvaro]

Hmm... I can see what you mean but I'm not sure I totally agree.

As for the "hard-coded" data. You're right. It'd be pretty rare to specify data in this way in a real application. However, this is showing exactly the format (or transformation results) the data should be in for it to work without having to follow a variable reference around. The only difference between it and real-world usage is the data would be in a property on the parent element instead of as a string in the google-chart attribute(s). And all these formats are really just mirroring the Google Visualization formats well documented on that site. The links to which are on the google-chart properties. (e.g. row format)

As for loading from a URL, there are two examples of this in the demo page. One using the double array format and one using the DataTable format.

To over-simplify using {{}} or [[]], it boils down to whether or not the element will modify the data. In the case of google-chart, it doesn't really modify stuff so every attribute should use [[]] except for the selection and drawn (if used).

But I do plan on revamping the documentation when I get more work done on v2. The rough draft of which I'd like if you reviewed and let me know what you think. You can see the rough examples of setups there. I'd like to expand more on documenting the setups rather than each individual chart. It would be nice to use one dataset for all (or most) of the charts, making it very easy to follow (and extend).

[wesalvaro]

@esd100 Here is the first draft of the new demo for the v2 changes I'm working on.
Do you think it's better?

[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.