Search code examples
javascriptextjsextjs7

ext 7 chart proxy data format


I try to load json data with direct proxy on a cartesian chart in ext 7 like this: https://fiddle.sencha.com/#view/editor&fiddle/3bae

In this example I load data from ajax but the return data is the same. (its actually copy pasted from my direct api). I have the same result on my testsystem: I can load hardcoded data but not from proxy.

How do I have to format the data so it populates my chart?


Solution

    1. the root property of your JSON must be 'result.data'
    2. the data are object, NOT an Array

    For yor custom JSON you can write reader transformer, something like this:

        ...
        ...
        proxy: {
            type: 'ajax',
            url: 'test.json',
            reader: {
                type: 'json',
                rootProperty: 'data',
                fields: ['month', 'value'], // What is it? 
                transform: {
                    fn: function (data) {
                        return Object.values(data.result.data);
                    },
                    scope: this
                }
            }
        },
        autoLoad: true
    });
    

    Or you can change the backend to generate standard extjs json, sample:

    {
        "users": [
           {
               "id": 1,
               "name": "Ed Spencer",
               "email": "ed@sencha.com"
           },
           {
               "id": 2,
               "name": "Abe Elias",
               "email": "abe@sencha.com"
           }
        ]
    }