ExtJS 6.5.2 - Multi line chart not rendering correctly

Question

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?

Answer 1

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.');
                    }
                }
            }
        });
    }
});