You found a bug! We've classified it as EXTJS-5588 . 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
    Join Date
    Nov 2010
    Posts
    68
    Vote Rating
    2
    watermark is on a distinguished road

      0  

    Default Ext.chart.axis.Time auto min/max issue

    Ext.chart.axis.Time auto min/max issue


    Ext version tested:
    • Ext 4.0.7
    Browser versions tested against:
    • Chrome 17
    • Firefox 10
    DOCTYPE tested against:
    • XHTML 1.0 Transitional
    Description:
    • Data points will not match up with x-axis labels
    Steps to reproduce the problem:
    • Render the below chart
    The result that was expected:
    • The store values to be somewhat close to the x-axis labels
    The result that occurs instead:
    • The x-axis labels are often nowhere close to the actual store values
    Test Case:

    Code:
    Ext.define('App.store.Vital', {
        extend: 'Ext.data.ArrayStore',
        
        data: [[1,'2012-03-12 15:20:00','2012-03-12','15:20:00',60,60,60,60],[2,'2012-03-12 15:25:00','2012-03-12','15:20:00',60,60,60,60],[3,'2012-03-12 15:30:00','2012-03-12','15:20:00',60,60,60,60]],
        
        fields: [{
                name: 'Vital-id',
                type:'int'
            },{
                name: 'Vital-datetime',
                type: 'date',
                dateFormat: 'c'
            },{
                name: 'Vital-date',
                type: 'date',
                dateFormat: 'c'
            },{
                name: 'Vital-time',
                type: 'date',
                dateFormat: 'H:i:s'
            },{
                name: 'Vital-systolic',
                type:'int'
            },{
                name: 'Vital-diastolic',
                type:'int'
            },{
                name: 'Vital-hr',
                type:'int'
            },{
                name: 'Vital-spo2',
                type:'int'
            }
        ],
        
        sorters: [{
                property: 'Vital-datetime',
                direction: 'ASC'
            }
        ]
        
    });
    
    Ext.create('Ext.chart.Chart', {
                title: 'Chart',
                store: Ext.create('App.store.Vital'),
                theme: 'Category1',
                height: 400,
                width: 650,
                animate: false,
                legend: {
                    position: 'right',
                    padding: 10
                },
                axes: [{
                        type: 'Numeric',
                        position: 'left',
                        title: 'Value',
                        grid: true,
                        fields: ['Vital-systolic', 'Vital-diastolic', 'Vital-hr', 'Vital-spo2'],
                        minorTickSteps: 1,
                        minimum: 0,
                        maximum: 200
                    },{
                        type: 'Time',
                        position: 'bottom',
                        fields: 'Vital-datetime',
                        title: 'Time',
                        dateFormat: 'm/d H:i'
                    }
                ],
                series: [{
                        type: 'scatter',
                        axis: 'left',
                        xField: 'Vital-datetime',
                        yField: 'Vital-systolic',
                        title: 'Systolic',
                        markerConfig: {
                            type: 'triangle',
                            fill: 'orange'
                        }
                    },{
                        type: 'scatter',
                        axis: 'left',
                        xField: 'Vital-datetime',
                        yField: 'Vital-diastolic',
                        title: 'Diastolic',
                        markerConfig: {
                            type: 'triangle',
                            fill: 'green'
                        }
                    },{
                        type: 'scatter',
                        axis: 'left',
                        xField: 'Vital-datetime',
                        yField: 'Vital-hr',
                        title: 'HR',
                        markerConfig: {
                            type: 'circle',
                            fill: 'red'
                        }
                    },{
                        type: 'scatter',
                        axis: 'left',
                        xField: 'Vital-datetime',
                        yField: 'Vital-spo2',
                        title: 'Sp02',
                        markerConfig: {
                            type: 'circle',
                            fill: 'blue'
                        }
                    }
                ]
            });

    Screenshot or Video:
    • attached
    Possible fix:
    • not provided
    Additional CSS used:
    • default ext-all-grey.css
    • some custom CSS that shouldn't affect Ext
    Operating System:
    • Windows 7 Pro
    • Ubuntu 11.04
    Attached Images

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the report.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1