View Full Version : Chart series from dynamic nested JSON

18 Jun 2013, 9:03 AM
Hello everybody,

I was given a task to implement a chart which gets JSON data from a servlet and JSON looks like this:


So I implemented a store with some columns defined, a proxy and a reader. I proceded exactly the same way when I got plain data to depict on a chart. After writing some code I realized that the store I created just couldn't work. It looked like this:

var store1 = Ext.create('Ext.data.Store',{
fields: [ {
name: 'dt', type: 'timestamp',
convert: function(value, record) {
var d = new Date();
//some parsing here
return d;
proxy: {
type: 'ajax',
url: './datasourcehere',
reader: {
root: 'data',
type: 'json'
listeners: {
loadexception: 'ErrorResponse'
listeners: {
load: {
fn: function() {
//alert('wow data loaded');
scope: this
autoLoad: false

I tried to change root value to 'data[0].value, but never worked.

The chart should have <totalcount> number of series. Each serie should be identified by its <id>. Values should be taken from <value> fields. X axis is defined by <dt>.

The main problem is that I don't know how many series would be sent.

I know that I can analyze the data in the 'load' event, then try to create another store and use it as a source for my chart. Probably the chart should be rendered each time the data comes. So I'm wondering if there is any more elegant way.


20 Jun 2013, 10:37 AM
If you need some logic to do some creative parsing of the fetched data you can either extend the JSON reader to your liking or you could even just Ajax.request() the data down, parse it out as needed, and feed the results to your store with loadData().

The series config will need to be defined up front per chart. So, if you have a dynamic number of series per dataset you may need to rebuild the chart with each new dataset (assuming the series count / structure changed between datasets).