google-chart not displaying

Question

I am trying to use the polymer component but it is not displaying. The element is there. I can see it in the inspector but it just does not display. There are also no error messages which does not help. I have tried to recreate the demo.html in the polymer docs and again nothing showing. Are there issues with the goole-chart element?

<dom-module id="stats-page">

    <style>
    code {
      color: #007000;
    }
    google-chart {
      height: 300px;
      width: 400px;
    }
    #selection-demo {
      position: relative;
      height: 300px;
    }
    #selection-chart {
      float: left;
    }
    #selection-display {
      display: inline-block;
      position: relative;
      top: 50%;
    }
  </style>

    <template>
        <!-- local DOM for your element -->
        <section>
            <h1>Stastistics Page</h1>

              <p>Here's a bar chart:</p>

              <google-chart
                type='bar'
                options='{"title": "Days in a month"}'
                cols='[{"label": "Month", "type": "string"},{"label": "Days", "type": "number"}]'
                rows='[["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'>
              </google-chart>


            <!-- Pie Chart of Clicks per Category Selection  -->
            <h3>Clicks Per Category</h3>

            <div id="category-piechart">
                <google-chart   type="pie" 
                                id="selection-chart" 
                                options='{"title": "Clicks per Category"}' 
                                cols='[{"label": "Category", "type": "string"},{"label": "Clicks", "type": "number"}]' 
                                rows='[["Health", 31],["Jobs", 28],["Services", 31],["Shopping", 30],["Finance", 31],["Social Media", 30]]'>
                </google-chart>

            </div>
            <!-- End of Pie Chart of Clicks per Category Selection  -->

            <!-- Cicks and Logins over Time  -->
            <h3>Logins</h3>

            <div id="clicksovertime-line">
                <google-chart   type='line' 
                                options='{"title": "When do Users Login"}' 
                                cols='[{"label": "Hour", "type": "string"},{"label": "Logins", "type": "number"}]' 
                                rows='[["00", 1],["01", 0],["02", 00],["03", 02],["04", 04],["05", 06]]'>
                </google-chart>
            </div>
            <!-- End of Cicks and Logins over Time   -->

        </section>

    </template>

</dom-module>
<script>
    // element registration
    Polymer({
        is: 'stats-page',
    });

Answer 1

This one caught me too a while ago.

Try adding a space in between the first two [[.

rows='[ ["Jan", 31],["Feb", 28],["Mar", 31],["Apr", 30],["May", 31],["Jun", 30]]'

Guess Polymer must think it's for binding. :)