Extjs 6.5.2 - multi line chart not rendering correctly

0
Asked by : melany wijngaard 2020-11-11 19:08

I'm trying to create a multi line chart. Adding one single series works well. However, I am trying to have multiple series and the problem start here. The lines all have the same color and I believe that this is because of how data is structured.

From all examples I found the data for all series is contained in each record. But my data it is different because the yField is the same for each series. The data is structured like:

 2022-01-01, 'Emilia-Romagna', 1522.23

2022-01-01, 'Lombardia', 1299.34

2022-01-02, 'Emilia-Romagna', 1533.45

2022-01-02, 'Lombardia', 1544.21

A full fiddle is here: https://fiddle.sencha.com/#view/editor&fiddle/3i9n

Does anyone know if this is at all possible? Or do I have to change my data and have the yField separate for each series?

1 Answers

0 votes
0
alexis faure
Answer by : alexis faure

enter image description here

You need to split your data, something like this:

 Ext.application({
    name: 'Fiddle',

    launch: function () {
        var series = [];

        function JSONtoDate(v, j) {
            if (v) {
                var ret = new Date(v);
                return ret;
            } else {
                return v;
            }
        }
        var coronaItaliaCaseStore = Ext.create('Ext.data.Store', {
            storeId: 'coronaItaliaCaseStore',
            fields: [{
                name: 'data',
                type: 'date',
                convert: JSONtoDate
            }, {
                name: 'denominazione_regione',
                type: 'string'
            }, {
                name: 'Incidence7Days',
                type: 'float'
            }],
            sorters: [{
                property: 'data',
                direction: 'ASC'
            }, {
                property: 'denominazione_regione',
                direction: 'ASC'
            }],
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: 'data1.json',

                reader: {
                    type: 'json'
                }
            },
            listeners: {

                load: function (store, records, successful, operation, eOpts) {

                    if (successful) {
                        var data = {},
                            regions = new Set();
                        Ext.each(records, function (record, idx) {
                            if (!data[record.get('data')]) {
                                data[record.get('data')] = {
                                    timeStamp: record.get('data')
                                }
                            }
                            data[record.get('data')][record.get('denominazione_regione')] = record.get('Incidence7Days')
                            regions.add(record.get('denominazione_regione'))
                        });

                        for (var region of regions) {
                            series.push({
                                type: 'line',
                                title: region,
                                xField: 'timeStamp',
                                yField: region,
                                marker: {
                                    type: 'square',
                                    animation: {
                                        duration: 200,
                                        easing: 'backOut'
                                    }
                                },
                                tooltip: {
                                    trackMouse: true,
                                    renderer: function (tip, item) {
                                        tip.update(this._yField + ': ' + item.get(this._yField));
                                    }
                                }
                            });
                        }
                        data = Ext.Object.getValues(data);
                        console.log(data);
                        // Now can create the chart
                        var coronaItaliaCasesChart = Ext.create('Ext.chart.Chart', {
                            renderTo: 'demoChart',
                            width: '100%',
                            height: 600,
                            legend: {
                                type: 'sprite',
                                docked: 'right'
                            },
                            store: data,
                            captions: {
                                title: 'Incidence last 7 days per 100.000 inhabitants'
                            },
                            axes: [{
                                type: 'numeric',
                                position: 'left',
                                grid: true,
                                minimum: 0
                                    //renderer: 'onAxisLabelRender'
                            }, {
                                type: 'time',
                                fields: ['data'],
                                fromDate: new Date('Nov 1 2021'),
                                toDate: new Date('Jan 28 2022'),
                                position: 'bottom',
                                grid: true,
                                label: {
                                    rotate: {
                                        degrees: -45
                                    }
                                }
                            }],
                            series: series

                        }); // end of chart
                        // replace initial chart

                    } else {
                        Ext.Msg.alert('Error', 'Error loading Corona Italia Store.');
                    }
                }
            }
        });
    }
});


Related Posts
Related Posts
1
Put labels in Coolprop Chart...
alani gonçalves alani gonçalves
2020-03-31  4:28pm 2020-03-31 4:28pm
2
D3 Dynamic Bar Chart Issue...
alyssa andre alyssa andre
2021-06-29  6:56am 2021-06-29 6:56am
3
Is it possible to always set 0 in the ce...
mia sanchez mia sanchez
2020-06-11  6:01am 2020-06-11 6:01am
4
Adding multiple charts in email body usi...
noah bonnet noah bonnet
2020-09-03  7:39am 2020-09-03 7:39am
5
Show non-uniformly time-spaced samples f...
giselle monteiro giselle monteiro
2020-05-30  9:18am 2020-05-30 9:18am