extjsextjs4extjs6.5

graph not rendering data points in extJS 6.5.2


In a line chart the data points surrounded by null points are not rendered. For ex:

store: {
            fields: ['billperiod', 'charges', 'adjustments', 'receipts'],
            data: [{
                billperiod: 'January 2016',
                charges: 234243.33,
                adjustments: 3423434.12,
                receipts: 2342.22
            }, {
                billperiod: 'February 2016',
                charges: 234243.33,
                adjustments: 3423434.12,
                receipts: 2342.22
            }, {
                billperiod: 'March 2016',
                charges: 234243.33,
                receipts: 2342.22
            }, {
                billperiod: 'April 2016',
                charges: 234243.33,
                adjustments: 3423434.12,
                receipts: 2342.22
            }, {
                billperiod: 'May 2016',
                charges: 234243.33,
                receipts: 2342.22
            }]
        }

In above store the adjustments series misses a data point at billperiod: 'April 2016'. Anyway I can add a point there, I want the line to be discontinuous but a single data point added at that point. I have added a fiddler relating to the same. https://fiddle.sencha.com/#fiddle/35ml&view/editor

Also I have attached the screenshots for expected and currently rendered graph from our production environment.

Expected graph

Current rendered graph


Solution

  • In your fiddle you use a line series to visualize the adjustments field. Because there are no values for 'March 2016' and 'May 2016' the graph can not draw a line ('April 2016' is only a single data point).

    You could use the scatter series to add dots for every single data point. Either replacing the line series or just a new series with the same configuration:

    type: 'scatter',
    title: 'Adjustments',
    xField: 'billperiod',
    yField: ['adjustments']