Results 1 to 4 of 4

Thread: Scatter Chart problem upon adding min and max values

Threaded View

Previous Post Previous Post   Next Post Next Post
    You found a bug! We've classified it as EXTJS-5719 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member chaimon's Avatar
    Join Date
    Mar 2012
    Vote Rating

    Exclamation Scatter Chart problem upon adding min and max values

    Ext version tested:
    • Ext 4.0.7

    Browser versions tested against:
    • Chrome 17.0.963.79 m
    • FF 10.02 (firebug 1.9.1 installed)
    DOCTYPE tested against:
    • xhtml11.dtd
    • On Scatter Chart, once adding minimum and/or maximum axes values the x position of the circle always starts from minimum value and ends at the maximum value, causing the circle to appear on the wrong position, the y position is working as expected.
    Steps to reproduce the problem:
    • Just run the Scatter Chart with any data and try to change the minimum and maximum values see that the circles x position is always set to the changed values and not to the real value
    The result that was expected:
    • A gap from left and right, top and bottom
    The result that occurs instead:
    • The gap appears only at the top and bottom
    Test Case:

    // store data    
    data.push({name: "first", data1: 100, data2: 70, data3: 10, data4: "#f00"});    
    data.push({name: "second", data1: 130, data2: 150, data3: 20, data4: "#0f0"});    
    data.push({name: "third", data1: 220, data2: 220, data3: 10, data4: "#00f"});    
    data.push({name: "forth", data1: 120, data2: 150, data3: 25, data4: "#f0f"});        
    /* LEGEND: */    
    name = name (any text)    
    data1 = xpos    
    data2 = ypos    
    data3 = circle radius    
    data4 = circle color    
    Ext.require(['Ext.Window', '', 'Ext.layout.container.Fit']);    
    Ext.onReady(function () {                
          var chart = Ext.create('Ext.chart.Chart', {           
          id: 'chartCmp',            
          animate: true,            
          store: store1,
          smooth: true,            
          style: 'background:#FFF',            
          insetPadding: 10,                        
          axes: [{
                        type: 'Numeric',
                        title: 'Application Quality',
                        position: 'left',
                        fields: ['data2'],
                        grid: true,
                        minorTickSteps: 1,
                        minimum: 0,
                        maximum: 300
                     }, {
                        type: 'Numeric',
                        title: 'Rating',
                        position: 'bottom',
                        fields: ['data1'],
                        grid: true,
                        minimum: 0, 
                       maximum: 300
           series: [{
                    type: 'scatter',
                    axis: 'left',
                    xField: 'data1',
                    yField: 'data2',
                    highlight: false,
                    tips: {
                        trackMouse: true,
                        width: 60,
                        height: 28,
                        renderer: function(storeItem, item) {
                            this.setTitle(storeItem.get('data1') + "/" + storeItem.get('data2'));
                    markerConfig: {
                        type: 'circle',
                        radius: 20,//default radius
                    //renderer: calcRadius('data3')
            var win = Ext.create('Ext.Window', {
                id: 'myWin',
                width: 400,
                height: 400,
                hidden: false,
                maximizable: true,
                title: '-- Scatter Chart Renderer --',
                renderTo: Ext.getBody(),
                layout: 'fit',
                items: [chart]
    Screenshot or Video:
    Debugging already done:
    Possible fix:
    not provided
    Additional CSS used:
    only default ext-all.css
    Operating System:
    win7 64bit
    Last edited by chaimon; 27 Mar 2012 at 4:45 AM. Reason: mismatch

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts