Polymer pattern repeated in several diagrams.

Question

I have a polymer highcharts element that works:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="bower_components/platform/platform.js"></script> <link rel="import" href="bower_components/polymer/polymer.html"> <polymer-element name="bar-chart" attributes="source"> <template> <div id="container" style="max-width: 600px; height: 360px;"></div> </template> <script> Polymer("bar-chart", { ready: function() { var options = { chart: {type: 'bar', renderTo: this.$.container}, title: {text: ''}, subtitle: {text: ''}, xAxis: {categories: []}, yAxis: {title: {text: ''}}, plotOptions: {bar: {dataLabels: {enabled: true}}}, legend: {enabled: false}, credits: {enabled: false}, series: [{}] }; $.getJSON(this.source).done(function(chartjson) { options.xAxis.categories = chartjson.categories; options.series[0].data = chartjson.series; options.title.text = chartjson.title; options.subtitle.text = chartjson.subtitle; options.yAxis.title.text = chartjson.yAxistitle; var chart = new Highcharts.Chart(options); }); } }); </script> </polymer-element> <bar-chart source="json/grass-roots/2014 Mayor.json"></bar-chart> 

I pass it some good data through the 2014 Mayor.json file:

 { "categories": ["Muriel E Bowser", "Tommy Wells", "Jack Evans", "Vincent C Gray", "David Catania", "Andy Shallal", "Reta Jo Lewis", "Carol Schwartz", "Vincent Orange", "Christian Carter", "Nestor DJonkam", "Bruce Majors", "Michael L Green"], "series": [2505, 1654, 1332, 956, 699, 399, 183, 81, 72, 3, 3, 2, 1], "title": "Mayor (2014)", "subtitle": "Grassroots Contributors", "yAxistitle": "Number of DC Residents Contributing to Candidate" } 

And I get a chart.

But what I really want to do is iterate over the array of chart data to create multiple charts. I tried very hard to understand how the template works, but I am new to both Polymer and javascript, and could not crack it.

Say my data file "arrayofdata.json" has the following in it:

 [ { "categories": ["Phil Mendelson", "Kris Hammond", "John C Cheeks"], "series": [172, 44, 4], "title": "Council Chairman (2014)", "subtitle": "Grassroots Contributors", "yAxistitle": "Number of DC Residents Contributing to Candidate" }, { "categories": ["Muriel E Bowser", "Tommy Wells", "Jack Evans", "Vincent C Gray", "David Catania", "Andy Shallal", "Reta Jo Lewis", "Carol Schwartz", "Vincent Orange", "Christian Carter", "Nestor DJonkam", "Bruce Majors", "Michael L Green"], "series": [2505, 1654, 1332, 956, 699, 399, 183, 81, 72, 3, 3, 2, 1], "title": "Mayor (2014)", "subtitle": "Grassroots Contributors", "yAxistitle": "Number of DC Residents Contributing to Candidate" } ] 

How can I repeat this to create multiple diagrams using repeat template?

Answer 1

I do not have a solution for Highcharts, but the Polymer way to do this is to declare. You do not need $.getJSON . You need an element of type <google-chart> that declaratively displays a chart from the data and <core-ajax> to retrieve json data.

The definition of the whole element becomes something like:

 <polymer-element name="bar-charts" attributes="source" noscript> <template> <core-ajax auto url="{{source}} response="{{items}}" handleAs="json"></core-ajax> <template repeat="{{item in items}}"> <google-chart type='pie' height='300px' width='400px' options='{{item.options}}' cols='{{item.cols}}' rows='{{item.rows}}' data='{{item.data}}'> </google-chart> </template> </template> </polymer-element> 

How evil is that !? No code :)

The hardest part is getting the data in the format expected in a graphical chart. See the <google-chart> element for an example.

Answer 2

I know this is an old question, but here is the updated Polymeric 1.0 / 2.0 method using Highcharts-Chart :

 <link rel="import" href="bower_components/highcharts-chart/highcharts-chart.html"> <template is="dom-bind" id="app"> <template is="dom-repeat" items="{{dynamicChartData}}" as="e"> <highcharts-chart index$="[[index]]" type="pie" data="[[zip(e.categories,e.series)]]" title="[[e.title]]" subtitle="[[e.subtitle]]" y-label="[[e.yAxistitle]]"></highcharts-chart> </template> <iron-ajax auto url="{{source}}" last-response="{{dynamicChartData}}" handle-as="json"></iron-ajax> </template> <script> var app = document.querySelector("#app") app.source = "Your URL-------------------" app.zip = function(a,b) { return a.map(function (_, i) {return [a[i], b[i]]}) } </script> 

And if you are looking for more examples, you can check out http://avdaredevil.imtqy.com/highcharts-chart/ .

Answer 3

I don’t know much about Polymer, but from docs it seems that changing <template> to <template repeat="{{ yourarray }}"> could be a critical step in this.