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
    5,334
    Vote Rating
    197
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      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