Polymer Google Chart

by Online Tutorials Library July 14, 2022

Polymer Google Chart

The polymer google chart is an element which contains charts used for visualizing the data.Google chart contains various charts such as pie chart, line chart, column chart, area chart, tree map, etc.

You can define height and width as style attributes in google chart element.

There are many ways to provide data as attribute in JSON format.

Using cols and rows attribute:

  cols = ‘[{“label”:”Month”, “type”:”string”}, {“label”:”Days”, “type”:”number”}]’  rows = ‘[[“Oct”, 31],[“Nov”, 30],[“Dec”, 31]]’  

Using data attribute:

You can pass data directly

  data = ‘[[“Month”, “Days”], [“Oct”, 31], [“Nov”, 30], [“Dec”, 31]]’  

You can pass data in URL

You can pass data in a Google DataTable object

Using view attribute:

Run the following command to install google chart element in your project directory. After that you can use this element in your application:

Example:

Create an index.html file and add the following code in it to see the usage of google-chartelement in Polymer.js.

  <!DOCTYPE html>  <html>  <head>  <title>google-chart</title>  <base href=”https:://polygit.org/components/”>  <script src = “webcomponentsjs/webcomponents-lite.min.js”></script>  <link rel = “import” href=”../google-chart/google-chart.html”>  </head>    <body>  <google-chart           type = ‘pie’           options = ‘{“title”: “Pie Chart”, “vAxis”: {“minValue” : 0, “maxValue”: 8}}’                 cols = ‘[{“label”: “Country”, “type”: “string”},{“label”: “Value”, “type”: “number”}]’           rows = ‘[[“Germany”, 5.0],[“US”, 4.0],[“Africa”, 11.0],[“France”, 4.0]]’>  </google-chart>  </body>  </html>  

Next TopicClient Loader

Polymer Google Chart

Polymer Google Chart

Using cols and rows attribute:

Using data attribute:

Example:

Adjust the volume of media using JavaScript in PhoneGap

Variables in Postman

You may also like