title: How to render <google-chart> web component in Polymer
body: <p><strong>NOTE: UPDATES (including solution) to this question at the end...</strong></p>
  
  <p>I can't get a <code>&lt;google-chart&gt;</code> element to render on my page.</p>
  
  <p>I used Yeoman's Polymer generator to scaffold a Polymer project. I have added some custom elements and also imported and instantiated Iron and Paper elements from the <a href="https://elements.polymer-project.org/browse" rel="nofollow noreferrer">Polymer Catalog</a>. I am using the standard procedure to do this: </p>
  
  <ol>
  <li><code>bower install --save [[polymerElement]]</code>, then</li>
  <li><code>&lt;link rel="import" href="../bower.../[[element]].html"&gt;</code> in <code>elements.html</code>.</li>
  </ol>
  
  <p>Following the <a href="https://elements.polymer-project.org/elements/google-chart" rel="nofollow noreferrer"><code>&lt;google-chart&gt;</code> instructions</a> in the <a href="https://elements.polymer-project.org/browse?package=google-web-components" rel="nofollow noreferrer">Google Web Components catalog section</a>, I have tried to render their example pie chart on my page. Although the element isn't rendering correctly, there are no errors in the console, there is a gap in the page content for the element, and the markup all appears in my inspector, with 2 exceptions:</p>
  
  <ol>
  <li>The rendered HTML does not include a "rows" attribute, which I cannot seem to fix.</li>
  <li>The inner content of the <code>&lt;google-chart&gt;</code> component is rather sparse, with just 3 children elements:
  
  <ul>
  <li><code>&lt;iron-ajax&gt;</code></li>
  <li><code>&lt;div&gt;</code></li>
  <li><code>&lt;google-legacy-loader&gt;</code></li>
  </ul></li>
  </ol>
  
  <p>Here is the relevant code:</p>
  
  <p><strong>elements.html:</strong></p>
  
  <pre><code>&lt;!-- Iron elements --&gt;
  &lt;link rel="import" href="../bower_components/iron-component-page/iron-component-page.html"&gt;
  &lt;link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html"&gt;
  &lt;link rel="import" href="../bower_components/iron-icons/iron-icons.html"&gt;
  &lt;link rel="import" href="../bower_components/iron-icons/maps-icons.html"&gt;
  &lt;link rel="import" href="../bower_components/iron-icons/social-icons.html"&gt;
  &lt;link rel="import" href="../bower_components/iron-pages/iron-pages.html"&gt;
  &lt;link rel="import" href="../bower_components/iron-selector/iron-selector.html"&gt;
  
  &lt;!-- Paper elements --&gt;
  &lt;link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html"&gt;
  &lt;link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"&gt;
  &lt;link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"&gt;
  &lt;link rel="import" href="../bower_components/paper-item/paper-item.html"&gt;
  &lt;link rel="import" href="../bower_components/paper-material/paper-material.html"&gt;
  &lt;link rel="import" href="../bower_components/paper-menu/paper-menu.html"&gt;
  &lt;link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html"&gt;
  &lt;link rel="import" href="../bower_components/paper-styles/paper-styles-classes.html"&gt;
  &lt;link rel="import" href="../bower_components/paper-toast/paper-toast.html"&gt;
  &lt;link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html"&gt;
  
  &lt;!-- 3rd Party Components --&gt;
  &lt;link rel="import" href="../bower_components/google-apis/google-apis.html"&gt;
  &lt;link rel="import" href="../bower_components/google-apis/google-js-api.html"&gt;
  &lt;link rel="import" href="../bower_components/google-chart/google-chart.html"&gt;
  
  &lt;!-- etc... --&gt;
  </code></pre>
  
  <p><strong>index.html:</strong></p>
  
  <pre><code>&lt;section data-route="dashboard"&gt;
      &lt;h2 class="page-title"&gt;Data Dashboard&lt;/h2&gt;
      &lt;p&gt;This is the dashboard section&lt;/p&gt;
      &lt;p&gt;This is a 'google-chart' object:&lt;/p&gt;
      &lt;google-chart type='pie' options='{"title": "Distribution of days in 2001Q1"}' rows='[["Jan", 31], ["Feb", 28], ["Mar", 31]]' cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'&gt;&lt;/google-chart&gt;
  
      &lt;p&gt;You can get more info here:&lt;/p&gt;
      &lt;a href="https://elements.polymer-project.org/elements/google-chart"&gt;https://elements.polymer-project.org/elements/google-chart&lt;/a&gt;
  &lt;/section&gt;
  &lt;!-- etc... --&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>As <a href="https://stackoverflow.com/users/4600982/supersharp">Supersharp</a> stated, this <code>&lt;google-charts&gt;</code> code loads in a single page environment.</p>
  
  <p>As far as loading in the Yeoman-scaffolded Polymer environment I'm working in, after further testing it seems that the <code>&lt;google-chart&gt;</code> object <strong>will</strong> load in the main <code>app/index.html</code> file <strong>as long as</strong> it is <strong>not</strong> in the <code>&lt;template&gt;</code> tag:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=""&gt;
  
  &lt;head&gt;
      ...
      &lt;!-- build:css styles/main.css --&gt;
      &lt;link rel="stylesheet" href="styles/main.css"&gt;
      &lt;!-- endbuild--&gt;
  
      &lt;!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js --&gt;
      &lt;script src="bower_components/webcomponentsjs/webcomponents-lite.js"&gt;&lt;/script&gt;
      &lt;!-- endbuild --&gt;
  
      &lt;!-- will be replaced with elements/elements.vulcanized.html --&gt;
      &lt;link rel="import" href="elements/elements.html"&gt;
      &lt;!-- endreplace--&gt;
  
      &lt;!-- For shared styles, shared-styles.html import in elements.html --&gt;
      &lt;style is="custom-style" include="shared-styles"&gt;&lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body unresolved class="fullbleed layout vertical"&gt;
      &lt;span id="browser-sync-binding"&gt;&lt;/span&gt;
  
  NOTE: google-chart will load here...
  
      &lt;template is="dom-bind" id="app"&gt;
  
  NOTE: google-chart WON'T load here or in any of the elements below...
  
          &lt;paper-drawer-panel id="paperDrawerPanel"&gt;
              &lt;!-- Drawer Scroll Header Panel --&gt;
              &lt;paper-scroll-header-panel drawer&gt;
                  &lt;!-- Drawer Toolbar --&gt;
                  &lt;paper-toolbar id="drawerToolbar"&gt; ... &lt;/paper-toolbar&gt;
                  &lt;!-- Nav Menu Section Title --&gt;
                  &lt;paper-item class="menu-section-title"&gt; ... &lt;/paper-item&gt;
                  &lt;!-- Drawer Section Content --&gt;
                  &lt;paper-menu class="list" attr-for-selected="data-route" selected="[[route]]"&gt; ... &lt;/paper-menu&gt;
              &lt;/paper-scroll-header-panel&gt;
              &lt;!-- Main Area --&gt;
              &lt;paper-scroll-header-panel main condenses keep-condensed-header&gt;
                  &lt;!-- Main Toolbar --&gt;
                  &lt;paper-toolbar id="mainToolbar" class="tall" alt-class="medium-tall"&gt; ... &lt;/paper-toolbar&gt;
                  &lt;!-- Main Content --&gt;
                  &lt;div class="content"&gt; ... &lt;/div&gt;
              &lt;/paper-scroll-header-panel&gt;
          &lt;/paper-drawer-panel&gt;
      &lt;/template&gt;
  
  NOTE: google-chart will load here...
  
      &lt;!-- build:js scripts/app.js --&gt;
      &lt;script src="scripts/userData.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/app.js"&gt;&lt;/script&gt;
      &lt;!-- endbuild--&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>However, I need the <code>&lt;google-charts&gt;</code> component loaded in that <code>&lt;template&gt;</code> block (where all the rest of the content is).</p>
  
  <p>Can anyone explain why this won't load in the <code>&lt;template&gt;</code> block?</p>
  
  <p>Can anyone further explain how I can get this element to render wherever I want it in the app?</p>
  
  <p>Thank you all so much in advance.</p>
  
  <hr>
  
  <p><strong>SOLUTION:</strong></p>
  
  <p>Using the <a href="https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html#initialization-order" rel="nofollow noreferrer">Registration and Lifecycle Callbacks</a> I have successfully rendered this in a template with the following method:</p>
  
  <p>First, add a queryable element into the <code>&lt;template&gt;</code> element to serve as a container:</p>
  
  <pre><code>&lt;p&gt;This is a 'google-chart' object:&lt;/p&gt;
  &lt;figure id="chart-container"&gt;&lt;/figure&gt;
  </code></pre>
  
  <p>Second, inside the <code>Polymer()</code> constructor, create the <code>&lt;google-chart&gt;</code> element and attach it to the container as part of the <code>attached</code> lifecycle event:</p>
  
  <pre><code>attached: function() {
    // create an instance with createElement:
    var chartContainer = document.querySelector('figure#chart-container');
  
    var pieChartAttributes = {
      'id': 'pie-chart',
      'type': 'pie',
      'options': '{"title": "Distribution of days in 2001Q1"}',
      'rows': '[["Jan", 31], ["Feb", 28], ["Mar", 31]]',
      'cols': '[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]',
    };
  
    var pieChart = document.createElement('google-chart');
  
    for (var key in pieChartAttributes) {
      pieChart.setAttribute(key, pieChartAttributes[key]);
    }
  
    chartContainer.appendChild(pieChart);
  } // end attached()
  </code></pre>
  
  <p>While there is a slight delay in the element rendering on-screen, this is a working solution.</p>