“facets”:{
“count”:6205,
“categories”:{
“buckets”:[{
“val”:“Eastover, Charlotte, NC”,
“count”:686,
“x”:1099729.137026239},
{
“val”:“Foxcroft, Charlotte, NC”,
“count”:54,
“x”:1020990.1851851852},
{
“val”:“Myers Park, Charlotte, NC”,
“count”:3448,
“x”:850657.2882830626},
{
“val”:“Wendover-Sedgewood, Charlotte, NC”,
“count”:532,
“x”:754350.0939849624},
{
“val”:“Dilworth, Charlotte, NC”,
“count”:2,
“x”:668370.5},
{
“val”:“Cotswold, Charlotte, NC”,
“count”:442,
“x”:620509.2511312218},
{
“val”:“Freedom Park, Charlotte, NC”,
“count”:142,
“x”:585164.1056338028},
{
“val”:“Barclay Downs, Charlotte, NC”,
“count”:874,
“x”:470035.9176201373},
{
“val”:“Madison Park, Charlotte, NC”,
“count”:1,
“x”:443229.0},
{
“val”:“Providence Park, Charlotte, NC”,
“count”:24,
“x”:142333.16666666666}]}}}
Hi Joe,
I’m assuming that with “pol” you are meaning “Polymer”. And your goal is to show the JSON data inside a vaadin-chart data-series. I’ve created an example of one way how you can bind the JSON data in to a vaadin-chart. Please be more specific in your future questions 
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/vaadin-charts/vaadin-line-chart.html">
<dom-module id="my-app">
<template>
<vaadin-line-chart>
<data-series name="Total population">
<data>
<template is="dom-repeat" items="{{series}}" as="serie">
<point>
<y>{{serie.count}}</y>
<name>{{serie.val}}</name>
</point>
</template>
</data>
</data-series>
</vaadin-line-chart>
</template>
</dom-module>
<script>
Polymer({
is: 'my-app',
properties: {
series: {
type: Object,
value: function() {
return [{
"val": "Eastover, Charlotte, NC",
"count": 686,
"x": 1099729.137026239
}, {
"val": "Foxcroft, Charlotte, NC",
"count": 54,
"x": 1020990.1851851852
}, {
"val": "Myers Park, Charlotte, NC",
"count": 3448,
"x": 850657.2882830626
}, {
"val": "Wendover-Sedgewood, Charlotte, NC",
"count": 532,
"x": 754350.0939849624
}, {
"val": "Dilworth, Charlotte, NC",
"count": 2,
"x": 668370.5
}, {
"val": "Cotswold, Charlotte, NC",
"count": 442,
"x": 620509.2511312218
}, {
"val": "Freedom Park, Charlotte, NC",
"count": 142,
"x": 585164.1056338028
}, {
"val": "Barclay Downs, Charlotte, NC",
"count": 874,
"x": 470035.9176201373
}, {
"val": "Madison Park, Charlotte, NC",
"count": 1,
"x": 443229.0
}, {
"val": "Providence Park, Charlotte, NC",
"count": 24,
"x": 142333.16666666666
}];
}
}
}
});
</script>Thanks. That is exactly the functionality I am looking for. What I did not include in the initial post is that the data source is a rest API call that updates fequently. I can get it to work with a data bind for the data-series html tag but only for a single array repsonse. What you have set up in this reply is perfect for multiple array responses (the norm) and is how we populate Polymer iron-lists, etc.
I updated your configuration with an ajax call set up in the same manner that works for the iron-list, but am not getting the data into the chart (see below). I would appreciate any feedback…and am hopeful we can use the dom-repeat from your last reply. Thanks.
Hi again. I forgot to mention that usind dom-repeat is not supported in vaadin-charts 3.0. This is supported in our newest releases (
https://github.com/vaadin/vaadin-charts/releases/tag/3.1.0-rc1
this is most recent). You can install it using bower install vaadin-charts#3.1.0-rc1 --save.
I updated my example to dynamically update the chart with setInterval. Works with 3.1.0-rc1.
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/vaadin-charts/vaadin-line-chart.html">
<dom-module id="my-app">
<template>
<vaadin-line-chart>
<data-series name="Total population">
<data>
<template is="dom-repeat" items="{{series}}" as="serie">
<point>
<y>{{serie.count}}</y>
<name>{{serie.val}}</name>
</point>
</template>
</data>
</data-series>
</vaadin-line-chart>
<template is="dom-repeat" items="{{series}}" as="serie">
<div>
<p>{{serie.count}}</p>
<p>{{serie.val}}</p>
</div>
</template>
</template>
</dom-module>
<script>
Polymer({
is: 'my-app',
properties: {
series: {
type: Object,
value: function() {
return [{
"val": "Eastover, Charlotte, NC",
"count": 686,
"x": 1099729.137026239
}, {
"val": "Foxcroft, Charlotte, NC",
"count": 54,
"x": 1020990.1851851852
}, {
"val": "Myers Park, Charlotte, NC",
"count": 3448,
"x": 850657.2882830626
}, {
"val": "Wendover-Sedgewood, Charlotte, NC",
"count": 532,
"x": 754350.0939849624
}, {
"val": "Dilworth, Charlotte, NC",
"count": 2,
"x": 668370.5
}, {
"val": "Cotswold, Charlotte, NC",
"count": 442,
"x": 620509.2511312218
}, {
"val": "Freedom Park, Charlotte, NC",
"count": 142,
"x": 585164.1056338028
}, {
"val": "Barclay Downs, Charlotte, NC",
"count": 874,
"x": 470035.9176201373
}, {
"val": "Madison Park, Charlotte, NC",
"count": 1,
"x": 443229.0
}, {
"val": "Providence Park, Charlotte, NC",
"count": 24,
"x": 142333.16666666666
}];
}
}
},
attached: function() {
setInterval(function(){
var serie = {};
serie.val = 'asd, Charlotte, NC'
serie.count = Math.floor(Math.random() * 1000) + 1 //Random number between 1 and 1000
serie.x = 3;
this.push('series', serie);
}.bind(this), 2000);
}
});
</script>Thanks. That is an important new feature for our use cases. Does the dom-reapeat work for paired data series [x,y]
and/or vaadin grid applications? Is there a place to view documentation on new release features?