Untitled

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="google-chart/google-chart.html" rel="import">
</head>

<body>

  <dom-module id="x-element">

    <template>
      <style>
        google-chart {
          width: 100%;
          max-height: 300px;
        }
      </style>
      <button on-tap="_show">Show</button>
      <google-chart
        id="geochart"
        type="geo"
        options={{options}}
        data={{items}}
        on-google-chart-select="_onGoogleChartSelect"
      ></google-chart>
    </template>

    <script>
      (function(){
        Polymer({
          is: 'x-element',
          properties: {
            items: {
              type: Array,
              notify: true,
              reflectToAttribute: true,
              value: function() {
                return [['State', 'Select'], ['Alabama', 0], ['Alaska', 0], ['Arizona', 0], ['Arkansas', 0], ['California', 0], ['Colorado', 0], ['Connecticut', 0], ['Delaware', 0], ['Florida', 0], ['Georgia', 0], ['Hawaii', 0], ['Iowa', 0], ['Idaho', 0], ['Illinois', 0], ['Indiana', 0], ['Kansas', 0], ['Kentucky', 0], ['Louisiana', 0], ['Massachusetts', 0], ['Maryland', 0], ['Maine', 0], ['Michigan', 0], ['Minnesota', 0], ['Missouri', 0], ['Mississippi', 0], ['Montana', 0], ['North Carolina', 0], ['North Dakota', 0], ['Nebraska', 0], ['New Hampshire', 0], ['New Jersey', 0], ['New Mexico', 0], ['Nevada', 0], ['New York', 0], ['Ohio', 0], ['Oklahoma', 0], ['Oregon', 0], ['Pennsylvania', 0], ['Rhode Island', 0], ['South Carolina', 0], ['South Dakota', 0], ['Tennessee', 0], ['Texas', 0], ['Utah', 0], ['Virginia', 0], ['Vermont', 0], ['Washington', 0], ['Wisconsin', 0], ['West Virginia', 0], ['Wyoming', 0]];
              }
            },
            options: {
              type: Object,
              notify: true,
              reflectToAttribute: true,
              value: function() {
                return {
                  region: 'US',
                  displayMode: 'regions',
                  resolution: 'provinces',
                  legend: 'none',
                  defaultColor: '#F5F5F5',
                  colorAxis: {
                    colors: ['#F5F5F5', '#455A64'],
                    minValue: 0,
                    maxValue: 1,
                  }
                }
              }
            },
          },

          _onGoogleChartSelect: function(e) {
            var str = e.path[0].textContent.split('Select')[0].trim(),
                ar = this.items,
                i = ar.length;
            while(i---1){
              if(str === ar[i][0]){
                this.set('items.' + i + '.1', ar[i][1] ? 0 : 1);
              }
            }
            console.log(this.items);
          },
          _show: function() {
            console.log(this.items);
          },
        });
      })();
    </script>

  </dom-module>

  <x-element></x-element>

</body>
</html>

this.$.geochart._dataTable=this.$.geochart._createDataTable(this.items);
this.$.geochart._chartObject.draw( this.$.geochart._dataTable, this.$.geochart.options);