Polymer Template Repeat Over Multiple Charts

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 nice data via 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 an array of chart data to produce multiple charts. I've tried very hard to figure out how template repeat works, but I'm new to both Polymer and javascript, and haven't been able to crack it.

Let's 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 do I iterate over that to produce multiple charts using template repeat?

Answer 1

I know it's an old question but here's the updated Polymeric 1.0/2.0 way of doing it, 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're looking for more examples you can check out http://avdaredevil.github.io/highcharts-chart/.

Answer 2

I don't have a solution for Highcharts, but the Polymeric way to do this is to think declaratively. You don't need $.getJSON. You need an element like <google-chart>, that declaratively renders a chart from data and <core-ajax> for fetching the json data.

The whole element definition 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 wicked is that!? No code :)

The hardest part would be to get the data in the format google-chart expects. See <google-chart> element for examples.

Answer 3

I don't know much about Polymer, but from the docs it looks like changing <template> to <template repeat="{{ yourarray }}"> might be the critical step in making this happen.