I am not able to make Google Pie chart to work inside Polymer 1.0 custom element

[Subrata Sarkar]

Hi,

I am trying to implement a Google Pie Chart object in my Polymer 1.0 application. This is how my custom element looks:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<dom-module id="points-from-customer">

  <template>

    <style>

        :host

        {

            display: block;

        }

    </style>

    <div id="piechart" style="width: 200px; height: 200px;"></div>

  </template>

  <script>

      (function () {

          'use strict';

          Polymer({

              is: 'points-from-customer',

              properties: {

                  foo: {

                      type: String,

                      value: 'points-from-customer',

                      notify: true

                  }

              },

              ready: function () {

                  //Reference URL: https://developers.google.com/chart/interactive/docs/gallery/piechart

                  google.load("visualization", "1", { packages: ["corechart"] });

                  google.setOnLoadCallback(drawChart);

                  function drawChart() {

                      var data = google.visualization.arrayToDataTable([

                                      ['Task', 'Hours per Day'],

                                      ['Work', 11],

                                      ['Eat', 2],

                                      ['Commute', 2],

                                      ['Watch TV', 2],

                                      ['Sleep', 7]

                                ]);

                      var options = {

                          title: 'My Daily Activities'

                      };

                      var chart = new google.visualization.PieChart(document.getElementById('piechart'));

                      chart.draw(data, options);

                  }

              }

          });

      })();

  </script>

</dom-module>

When I am consuming the element in my custom element the application browser status bar saying "Read google.com..." and nothing happens.

As an alternative I removed the reference

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

from my custom element and put it to index.html. But I still see the same.

My questions are:

1. What wrong I am doing and where?

2. Is this at all compatible with Polymer framework? Can this be used as a web-component. If yes, please let me know the installation method/syntax using bower.

3. The data passed into drawChart function does not look like a real JSON object / string. Can I pass a proper JSON format here. If not, can I just generate the string the way it shows and pass it directly to arrayToDatatable method using a variable?

I believe this could be rendered in Polymer custom element but just not working for me.

Please help.

NB: I am new to Polymer and Google chart

Thanks in advance

[Sergey Grabkovsky]

Hi Subrata,

My guess is that the callback is not getting fired. I've seen this issue before with calling google.load after the page is loaded. It should work if you use the callback parameter instead of google.setOnLoadCallback, like so:

google.load("visualization", "1", { packages: ["corechart"], callback: drawChart });

Alternatively, if you use the gstatic loader, this issue is fixed there; plus you'll get a newer version of charts.

Post back if this didn't address your issue.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/18df0c92-15e2-46e8-ac00-28988752d305%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

• • • •

Sergey Grabkovsky Software Engineer Google, Inc gra...@google.com

[Sergey Grabkovsky]

Sorry, missed your other questions. Here are answers:

2. Everything should be compatible in theory. There's no reason why it wouldn't be, but anything is possible. We haven't made any chart web-components yet, but it's possible that there's a third party library that did.

3. I'm not sure what you're talking about here. Nothing is passed to the drawChart function. Unless you're talking about the google.visualization.drawChart function, which indeed does take a JSON object.

If you were instead referring to the value stored in your 'data' variable, which is passed to chart.draw, you are correct that it's not a simple JSON object, but you can pass a JSON object to the DataTable constructor, or a JSON array to google.visualization.arrayToDataTable (instead of an array literal as you're currently doing). You can look at this page for all the different ways you can create a DataTable.

[Subrata Sarkar]

Hi Sergey,

Thank you for your quick reply. Yes, meantime I switched to gstaic.loader and it does render the chart for me.

However, I am finding it difficult to pass the array object from outside. It must be a Polymer issue but not sure what!

I am preparing a static Datatable the way it accepts from my application's index page under window.addEbventListner('webcomponentsready') method though a custom property chartData: {type: Array, value: []} declared in my custom element, but it is always showing 'undefined' when the element loads.

But when I declare a variable under ready() function inside my custom element and create the same javascript literal it is recognized and chart gets renders fine. This probably would serve my purpose, but curious why the value I am setting outside is not being recognized.

I know this question is not relevant to my original question, but I am seeking for some help.

Another thing, I can customize slice backgrounds with different colors, but could not find anything which will allow me to use text colors. Please can you provide me a link where I can see all the properties which I can set under "options"?

Thanks again for your detailed reply.

Subrata Sarkar

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/4NY6-HRVKC8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAEwwup6HSWr6Qi5A2XiTXSJgiG_V8khtV%3DVL4ODMuHHOZaTSHw%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--

Thanks and Regards,

Subrata Sarkar
Skype: NiladriSirkar72
US: +1 (202) 556-3514 , +1 (202) 506-9125
India (Fixed) : +91 33 2663 6462 | India (Mobile) : +91 94327 50266, +91 98319 33166

[Sergey Grabkovsky]

Sadly, I am not familiar enough with Polymer to be able to help you in any great detail. You might have better luck on the Polymer Google Group.

You can find a full listing of supported PieChart options here. I believe the options you're looking for are slice[index].color and pieSliceTextStyle.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAKKTZanfnBchNRTMwK9X-GaBSW-VQvnMRZ6yRqx%3DJMX4FFFGNQ%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

[Subrata Sarkar]

Hi Sergey,

Sorry for delay in replying. https://developers.google.com/chart/interactive/docs/gallery/piechart?hl=en#configuration-options is exactly what I was looking for!

As you suggested I posted my question in Polymer Google Group and waiting for a response from there.

Thanks so much for taking time and helping me.

Subrata

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAEwwup7CwEd5Gk22bNHy2_v491PZYe3%3Dz6xBJg7eh%2B0nQNc6zQ%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.