Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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}}
       
      ></google-chart>
    </template>
​
    <script>
      (function(){
        Polymer({
          is: 'x-element',
          ready:function(){
           
              this.items=[['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]];
             var self=this; 
            this.$.geochart.addEventListener('google-chart-select',function(e){this._onGoogleChartSelect(e)}.bind(self));
          
          },
          properties: {
            items: {
              type: Array,
              notify: true,
              reflectToAttribute: true
              
            },
            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.items[i][1]= ar[i][1] ? 0 : 1;
              }
           
            }
                                                     
 
     this.$.geochart._dataTable=this.$.geochart._createDataTable(this.items);
  
            this.$.geochart._chartObject.draw( this.$.geochart._dataTable, this.$.geochart.options);
          
          },
          _show: function() {
          
          },
        });
      })();
    </script>
​
  </dom-module>
​
  <x-element></x-element>
​
</body>
</html>
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers