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>
    <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='{{}}'>

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.


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.


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>
  <iron-ajax auto url="{{source}}" last-response="{{dynamicChartData}}" handle-as="json"></iron-ajax>
  var app = document.querySelector("#app")
  app.source = "Your URL-------------------" = function(a,b) {
      return (_, i) {return [a[i], b[i]]})

And if you're looking for more examples you can check out

Related Query

More Query from same tag