1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    1
    Vote Rating
    0
    IonutFrunza is on a distinguished road

      0  

    Default Ext Js 4 Line Chart issue - hovering area of the points is too large

    Ext Js 4 Line Chart issue - hovering area of the points is too large


    hey everyone, I just started to learn about Sencha Ext JS 4 especially the Charting classes and recently I've come to a big issue:

    I've generated a line chart and tried to apply tool tips on every point of the chart. The problem is that the hovering area of each point is way too large and when I try to hover a point which is very close to another point, the chart selects both of them. I'd like to somehow reduce this hovering area if possible, and I tried to look for a property in the Sencha Ext JS 4 documentation but I didn't find anything useful.

    Code:
                        
    var seriesArray = new Array();
     for (i = 0; i < dataArray.length; i++) {
    
     seriesArray.push({
            type: 'line',
             highlight: {
             size: 7,
             radius: 7
                 },
                         axis: 'left',
                         xField: 'name',
                         yField: dataArray[i],
                         markerConfig: {
                         type: 'circle',
                         size: 4,
                         radius: 3,
                         'stroke-width': 0
                      },
                   tips: {
                    trackMouse: true,
                    width: 140,
                    height: 28,
                   renderer: function (storeItem, item) {
    
    
                  this.setTitle(storeItem.get('name') + ': ' + storeItem.get(item.series.yField) + ' views');
    
                       }
                  }
           });
     }
    
            Ext.create('Ext.chart.Chart', {
             renderTo: document.getElementById("div0"),
              width: 500,
              height: 300,
              animate: true,
              store: store3,
              axes: [
            {
                type: 'Numeric',
                position: 'left',
                //maximum: 50,
                fields: dataArray,
                label: {
                    renderer: Ext.util.Format.numberRenderer('0,0')
                },
                title: 'Sample Values',
                grid: true,
                minimum: 0
            },
            {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: 'Sample Metrics'
            }
        ],
            series: seriesArray
     });
    
    
                    }
                });
    The code above is for defining an array of series for the chart and then generating the chart itself. Maybe I need to add a new property to the line chart or to each series I'm adding..

    Please help me someone,, Thank you very much !!!!

  2. #2
    Sencha Premium Member
    Join Date
    Sep 2011
    Posts
    3
    Vote Rating
    0
    wdunn is on a distinguished road

      0  

    Default


    I have a very similar problem.

    I figure its a config setting but have not found an answer yet.

    Did you find anything?

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    4
    Vote Rating
    0
    AmandaH is on a distinguished road

      0  

    Default


    Add the line:
    selectionTolerance:
    Within the 'series' section.

    Example:
    series: [{
    type: 'line',
    axis: 'left',
    xField: 'period',
    yField: 'CPI',
    selectionTolerance:8,
    smooth: true,

    etc...

    The larger the number, the greater the area when you hover your mouse over it, the smaller the number, the smaller the tolerance.

Thread Participants: 2

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar