1. #1
    Sencha User
    Join Date
    Aug 2013
    Posts
    10
    Vote Rating
    0
    simon.law is on a distinguished road

      0  

    Default Column Chart (Numeric Bottom Axis): column are evenly drawn, not match xField values

    Column Chart (Numeric Bottom Axis): column are evenly drawn, not match xField values


    here is a sample: http://jsfiddle.net/JPEEv/154/

    my expectation is to see the columns are drawn in the location where matches both values of xField and yField. however, this column chart seems be drawn evenly based on total_width divided by number of columns.

    does this make sense in this way?

    any ideas to implement one I expected using Sencha Chart?
    thanks for any inputs!

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,913
    Vote Rating
    179
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    You'll have to inject dummy data with a zero y value to get the affect you're after. You'll also need to set the majorTickSteps to the count of records in the chart's store.

    Example:
    Code:
    var store = Ext.create('Ext.data.JsonStore', {
        fields: [{name:'base',type:'integer'}, {name:'data', type: 'integer'}],
        data: [
            { 'base': 0,   'data':0 },
            { 'base': 1,   'data':0 },
            { 'base': 2,   'data':10 },
            { 'base': 3,   'data': 7 },
            { 'base': 4,   'data':0 },
            { 'base': 5,   'data':0 },
            { 'base': 6,   'data':0 },
            { 'base': 7,   'data':0 },
            { 'base': 8,   'data':0 },
            { 'base': 9,   'data':0 },
            { 'base': 10, 'data': 5 },
            { 'base': 11,  'data': 2 },
            { 'base': 12,  'data':27 }
        ]
    });
    
    
    Ext.create('Ext.chart.Chart', {
        renderTo: 'demoChart',
        width: 500,
        height: 300,
        animate: true,
        store: store,
        axes: [
            {
                type: 'Numeric',
                position: 'left',
                fields: ['data'],
                label: {
                    renderer: Ext.util.Format.numberRenderer('0,0')
                },
                title: 'Sample Values',
                grid: true,
                minimum: 0
            },
            {
                type: 'Numeric',
                position: 'bottom',
                fields: ['base'],
                title: 'Base',
                majorTickSteps: 13
            }
        ],
        series: [
            {
                type: 'column',
                axis: 'left',
                highlight: true,
                tips: {
                  trackMouse: true,
                  width: 140,
                  height: 28,
                  renderer: function(storeItem, item) {
                    this.setTitle(storeItem.get('base') + ': ' + storeItem.get('data'));
                  }
                },
                xField: 'base',
                yField: 'data'
            }
        ]
    });

  3. #3
    Sencha User
    Join Date
    Aug 2013
    Posts
    10
    Vote Rating
    0
    simon.law is on a distinguished road

      0  

    Default


    thanks!
    will try to customize Sencha Chart work for my case.

  4. #4
    Sencha User
    Join Date
    Aug 2013
    Posts
    10
    Vote Rating
    0
    simon.law is on a distinguished road

      0  

    Default


    actually, using axis config of the series can bind values;

    such as axis: ['left', 'bottom'], this will bind two axes.

    however, the bar width isn't nicely calculated. In my case, I need to override getBarGirth() in Ext.chart.series.Bar file to put some customization code.

    also, there's a private boundColumn property for bar/column series. This value should be configured as true in chart/series init in order to bind.

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi