score:7

Accepted answer

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.

score:1

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.

score:4

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/.


Related Query

More Query from same tag