google-chart not displaying

woisme

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',
    });

Justin XL

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. :)

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Google Chart is not displaying

From Dev

Google Charts - Table Chart Not Displaying Data

From Dev

Why isn't my Google Chart displaying?

From Dev

Generating JSON stream in PHP and displaying it as Google Chart

From Dev

Chart Is not displaying Created Using HighCahrts and Google Analytics

From Dev

Generating JSON stream in PHP and displaying it as Google Chart

From Dev

Google Charts: Chart within tooltip not displaying

From Dev

Chart not displaying

From Dev

Chart not displaying

From Dev

Preparing dynamic data for displaying via Google Chart API

From Dev

x-axis value not displaying in google line chart

From Dev

Highcharts JSON, chart not displaying

From Dev

MPAndroidChart: Chart Not Displaying

From Dev

Dynamic High Chart no Displaying

From Dev

MPAndroidChart: Chart Not Displaying

From Dev

JQPlot chart not displaying

From Dev

canvasjs not displaying bars in chart

From Dev

My Google Pie Chart is displaying no data even though query works . ASP.NET MVC

From Dev

Chart.js line chart is not displaying

From Dev

'Chart.js' time chart not displaying properly

From Dev

tick labels in flot chart not displaying

From Dev

Chart in winform displaying wrong Point

From Dev

Highcharts chart categories not displaying correctly

From Dev

Displaying a matplotlib bar chart in Tkinter

From Dev

Need Help in displaying Line Chart

From Dev

tick labels in flot chart not displaying

From Dev

Color of bar chart not displaying in JBChartView

From Dev

Highcharts chart categories not displaying correctly

From Dev

displaying radar chart in Shiny R