You found a bug! We've classified it as EXTJS-3987 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member Juanito's Avatar
    Join Date
    Apr 2007
    Location
    San Diego->Boston->Brazil
    Posts
    160
    Vote Rating
    4
    Juanito is on a distinguished road

      0  

    Cool Line series shrinks data messing up the data I passed in.

    Line series shrinks data messing up the data I passed in.


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.0.5

    Browser versions tested against:
    • FF6.0.1 (firebug 1.8.2 installed)
    • Chrome 13.0.782.220 m

    DOCTYPE tested against:
    • no doc type, strict

    Description:
    I am currently working on using Ext charts for a wave monitor and I've run across three different but related problems. A wave graph has lots of points by its nature. When Ext.chart.series.Line notices that there are more points than there are pixels, it chooses to shrink the data (Ext.chart.series.Line.shrink), that is, it takes averages of some points to shrink the data. This is causing problems with my chart because it does have more points than there are pixels, depending on your screen size. This averaging out of values often causes my wave form to be distorted, and the tooltips for each point is not even close to the real value.

    This is a link to a screen capture of the problem. https://docs.google.com/leaf?id=0B5M...AxM2E2ZTZmZjk0 You have to download it and open it in a browser to see it. Be sure to turn on your speakers to hear me describing the issue. This is the code that I'm running but I've created a simpler reduction that can easily be run.

    As I see it there are 3 problems:
    1. Shrinking my data should be optional, modifying my data points is not acceptable in my case. I've worked around this issue by doing
      PHP Code:
      Ext.chart.series.Line.override({
                
      // Please don't shrink my data, you screw it up by doing so.
              
      shrink: function(xy) {
                  return {
      xx,yy};
              }
          }); 
      An important thing to note is that I (probably, depends on screen size) would not have more points than pixels if the series accounted for the fact that only the points between minimum and maximum are displayed.
    2. If you do shrink data, the tooltips display the averaged out points, and sometimes display nothing, not sure what the solution for that is.
    3. Yet another problem caused by the series' lack of taking minimum/maximum into account is that data that is less than my minimum on my x axis is still displayed on the chart. I've worked around that by removing data points that are less than the current minimum. However, the Line series should not attempt to draw points outside of the minimum and maximum

    Steps to reproduce the problem:
    1. Load the code under 'Test Case' on a page that references ext-all.js and ext-all.css
    2. Notice that as more data points are added to the store, the wave gets less and less tall, even though the data cycles always going up to 1 and down to -1
    3. Notice that data before the minimum is still being rendered and makes it look really bad

    The result that was expected:
    • My data should remain as it was. Even if there are more points than pixels, SVG handles that well . This causes important data to be lost on my wave.
    • The data that is outside minimum/maximum should not be rendered on the screen. Looks really ugly, I can workaround it, but what good is the minimum if not enforced fully?

    The result that occurs instead:
    • Data gets 'shrunk', important values are averaged out and mess up my wave.
    • Data that is outside the min/max gets displayed over the axis grid
    • Line series also do not take axis's minimum and maximum when determining whether there are more points than there are pixels

    Test Case:

    PHP Code:
    /**
     * The overall approach is to load data into the store at intervals, and update the minimum maximum
     * at an even faster interval so the graph looks like it's moving 
     */
    Ext.onReady(function() {
        
    // Create fake wave data
        
    var fakeValues = [1.8.7.5.3.20, -.3, -.5, -.8, -1, -.8, -.3, -.20.1.4.6.8.9];   
        var 
    data = [];
        for (var 
    01000i++) {
            
    // 'i' is the fake timestamp
            
    data.push([ifakeValues[fakeValues.length]]);
        }
        
        
    // Number if milliseconds to show at a time 
        
    var windowSize 100;
        
    // Frequency to update the window minimum and maximum 
        
    var updateChartWindowInterval 1000;
        
    // Frequency to fetch new data from our fakeValues
        
    var dataRetrievalInterval 10000;
        
    // The initial data contains 2 times the window size to avoid gaps while waiting for new data
        
    var initialData data.slice(0windowSize 2);
        
        var 
    store = new Ext.data.ArrayStore({
            
    fields: ['tstamp''data'],
            
    datainitialData
        
    });

        
    // the index into 'data' that we should pull in next time we update the store
        
    var dataIndex initialData.length;

        var 
    chart Ext.create('Ext.chart.Chart', {
            
    renderToExt.getBody(),
            
    width200,
            
    height200,
            
    storestore,
            
    axes: [{
                
    title'Wave value',
                
    type'Numeric',
                
    position'left',
                
    fields: ['data'],
                
    minimum: -1,
                
    maximum1
            
    },{
                
    title'Time',
                
    // Time axis is buggy, wants to group everything, treat timestamp as numbers
                
    type'Numeric',
                
    fields: ['tstamp'],
                
    position'bottom',
                
    // Window of data being displayed, start by displaying half the initial data,
                // then move the window to the right at intervals
                
    minimum:  - (windowSize 2) ,
                
    maximum:  (windowSize 2)
            }],
            
    series: [{
                
    type'line',
                
    axis'left',
                
    xField'tstamp',
                
    yField'data',
                
    showMarkersfalse,
                
    tips: {
                    
    trackMousetrue,
                    
    width140,
                    
    height28,
                    
    renderer: function(storeItemitem) {
                        
    this.setTitle(storeItem.get('data'));
                    }
                }
            }]
        });
        
        
        function 
    updateWindow() {
            var 
    axis chart.axes.get('bottom');
            
    axis.minimum += 10;
            
    axis.maximum += 10;
            
    chart.redraw();
        }
        
        function 
    loadMoreData() {       
            
    // Reset to the beginning of data after we run out of values
            
    if (dataIndex >= data.length) {
                return ;
            }

            
    // We don't want the chart to update when we load new data
            // updateWindow tells the chart to refresh
            
    store.suspendEvents();
            
    store.loadData(data.slice(dataIndexdataIndex windowSize), true);
            
    store.resumeEvents();
            
    dataIndex += windowSize;
        }
        
        
    setInterval(updateWindowupdateChartWindowInterval);
        
    setInterval(loadMoreDatadataRetrievalInterval);
    }); 


    HELPFUL INFORMATION

    Screenshot or Video:
    https://docs.google.com/leaf?id=0B5M...AxM2E2ZTZmZjk0


    Debugging already done:
    • Ext.chart.series.Line.override does not take axis minimum and maximum in Ext.chart.series.Line.drawSeries

    Possible fix:
    • When updating a series minimum, maximum, be sure to remove any values outside of that range from the store.
    • Ext.chart.series.Line.shrink can be overridden to not shrink data:
      PHP Code:
          Ext.chart.series.Line.override({
              
      // Please don't shrink my data, you screw it up by doing so.
              
      shrink: function(xy) {
                  return {
      xx,yy};
              }
          }); 

    Additional CSS used:
    • only default ext-all.css

    Operating System:
    • Win 7

  2. #2
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    62
    Vote Rating
    0
    divya.booravalli is on a distinguished road

      0  

    Default


    Has this been resolved?

    Thanks.