Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.
Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
what is the best way to parse JSON (sample below) for data-series using pol
"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.
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/vaadin-charts/vaadin-bar-chart.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="my-bar-chart">
<template>
<iron-ajax auto
id="placeSearch"
url="https://ec2-52-2-229-217.compute-1.amazonaws.com:8993/solr/places/select?q=*&rows=1&wt=json&indent=true&json.facet={min:'min(YoY)',mean:'avg(YoY)',max:'max(YoY)',ptile:'percentile(YoY,1,25,50,75,99)',value : { type : range, field : YoY, start : -20, end : 20, gap : 2.5, include: all }}"
params="{{params}}"
last-response="{{splytxData}}"
debounce-duration="300">
</iron-ajax>
<vaadin-bar-chart>
<data-series name="Total population">
<data>
<template is="dom-repeat" items="{{splytxData.facets.value.buckets}}" as="serie">
<point>
<y>{{serie.count}}</y>
<name>{{serie.val}}</name>
</point>
</template>
</data>
</data-series>
</vaadin-bar-chart>
</template>
</dom-module>
<script>
Polymer({
is: 'my-bar-chart',
properties: {
splytxData: {
type: Object,
notify: true
},
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>
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?