4.2 Line Chart bug

[rtweed]

There seems to be a bug in the newly-released 4.2 version, relating to Charts. What I'm doing worked fine in 4.1.1a but is now broken.

I have a Chart with Numeric line series and an attached JSON Store. The chart will plot initially just fine from the data in the store. However if I add data to the store using the store's add() method, the chart does not update automatically. Indeed it won't even render the new points that are added to the store if I force a redraw() of the chart, which seems pretty strange. The store is being updated OK - manual inspection shows that this is happening properly.

Like I say, this all worked just fine in 4.1.1a, but it's just stopped in 4.2.

By the way, 4.2 seems to have been suddenly pushed out as live on the Sencha site without any real warning, but the API documentation is still for 4.1 and there are no links to download 4.1.1a if you want to avoid these newly-introduced 'features' that break your previously working applications. Also, are there release notes for 4.2?

[mitchellsimoens]

Can I get a test case I can run locally to reproduce any bugs/regressions?

[rtweed]

This is a weird one - it all works OK in a simple example - I can add() records to the JSON store and the chart updates OK as I'd expect.

The scenario where it's not working is more complex - it's in a tab panel, and the chart is itself inside another panel that was added to the tabpanel following an Ajax fetch.

The chart renders just fine and there are no JS errors. As I've reported, the add() method doesn't cause the chart to update. However, the strange thing is that if I use the loadData() method and push in a set of new records - bingo the chart renders the new data automatically.

I can now probably engineer a workaround to maintain my own data array of objects and use loadData() to push this data in each time I want to update the chart. But can anyone think of a reason why, in this complex layout, the add() method would stop working in 4.2 and yet the loadData() works OK?

[rtweed]

Mitchell

Thanks for the reply and I understand that a standalone testcase will be helpful. As you'll see in my follow-up, this looks like a more complex interaction. I'll see if I can set something up for you, but perhaps my observation that loadData() works but add() doesn't provides a clue you can work on in the meantime?

Rob

[rtweed]

Sorry for the delay getting a test case for this bug - work got in the way! I was hoping it would have been fixed in 4.2.1 but it still seems to be there.

Try the following standalone example. It has a line chart inside a tabpanel in the center panel of a viewport layout.

If you run it using 4.1.x, in (for example) Chrome Developer Tools console you can execute:

addPoint(1, 2, 3, 4)

and a point is added and appears automatically in the chart. Add other values as you wish.


Now try running it in 4.2.x - no error occurs when you use the addPoint() function, but no points appear in the chart.

I *think* it's some combination of the chart being in a tabpanel and/or a viewport's panel. In a simple panel, the addPoint() function will work fine in 4.2.x.

Example code:

Ext.application({
 name:'EWD Monitor',
 launch: function() {
     EWD.ext4.content()
 }
});

EWD = {};

var addPoint = function(timeSlotNo, rss, heapTotal, heapUsed) {
     EWD.memoryHistory.add({
	    rss: rss, 
		heapTotal: heapTotal, 
		heapUsed: heapUsed, 
		timeslot: timeSlotNo
      });
};

EWD.ext4 = {
  content: function () {
       
    Ext.define('memoryHistoryModel', {
      extend: 'Ext.data.Model',
      fields: [
        {name: 'heapTotal'}, 
        {name: 'heapUsed'}, 
        {name: 'rss'}, 
        {name: 'timeslot'}
      ]
    });
       
    EWD.memoryHistory = Ext.create('Ext.data.Store', {
      model: 'memoryHistoryModel',
      id: 'memoryHistoryStore'
    });
		
	Ext.create("Ext.container.Viewport", {
      layout: "border",
      renderTo: Ext.getBody(),
      items: [
        {  autoHeight: true,
           border: false,
           height: 250,
           id: "northPanel",
           margins: "0 0 5 0",
           overflowY: "auto",
           region: "north",
           resizable: true,
           title: "Chart problem demo",
           xtype: "panel",
        }, 
        {  autoHeight: true,
           border: false,
           collapsible: true,
           id: "westPanel",
           region: "west",
           resizable: true,
           width: 250,
           xtype: "panel",
        }, 
        {  id: "centerPanel",
           region: "center",
           resizable: true,
           xtype: "tabpanel",
           items: [
             {  id: "mainPanel",
                layout: "fit",
                title: "Live Node.js Console",
                xtype: "panel",
             }, 
             {  id: "memoryChartPanel",
                layout: "fit",
                title: "Memory Use",
                xtype: "panel",
                items: [
                  {  xtype: 'panel',
                     align: "stretch",
                     layout: "vbox",
                     items: [
                       {  animate: true,
                          flex: 1,
                          id: "memoryChart",
                          store: EWD.memoryHistory,
                          width: "100%",
                          xtype: "chart",
                          axes: [
                            {  fields: ['rss', 'heapTotal', 'heapUsed'],
                               grid: true,
                               minimum: 0,
                               position: "left",
                               title: "Memory (Mb)",
                               type: "Numeric"
                            }, 
                            {  fields: ['timeslot'],
                               grid: true,
                               id: "timeSlotAxis",
                               maximum: 60,
                               minimum: 1,
                               position: "bottom",
                               title: "Time Interval",
                               type: "Numeric"
                            }
                          ],
                          series: [
                            {  axis: "left",
                               highlight: true,
                               type: "line",
                               xField: "timeslot",
                               yField: "rss"
                            }, 
                            {  axis: "left",
                               type: "line",
                               xField: "timeslot",
                               yField: "heapTotal"
                            }, 
                            {  axis: "left",
                               type: "line",
                               xField: "timeslot",
                               yField: "heapUsed"
                            }
                          ],
                          legend: {
                            position: "right"
                          }
                       }, 
                       {  border: false,
                          height: 70,
                          layout: "hbox",
                          width: "100%",
                          xtype: "form",
                          items: [
                            {  fieldLabel: "Monitor Interval (sec)",
                               id: "interval",
                               increment: 5,
                               labelWidth: 150,
                               maxValue: 1100,
                               minValue: 5,
                               value: 0,
                               width: 600,
                               xtype: "slider",
                            }, 
                            {  id: "intervalDisplay",
                               inputwidth: 30,
                               margin: "0 0 0 10",
                               name: "intervalDisplay",
                               readOnly: true,
                               value: 0,
                               xtype: "textfield"
                            }
                          ]
                       }
                     ]
                  }
                ]
             }, 
             {  id: "sessionTabPanel",
                layout: "fit",
                title: "EWD Sessions",
                xtype: "panel",
             } 
           ]
        }
      ]
    });
  
  }  
};