1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    24
    Vote Rating
    0
    999Dom999 is on a distinguished road

      0  

    Default Chart: Stacked Column + Line, Numeric Maximum autocalculating

    Chart: Stacked Column + Line, Numeric Maximum autocalculating


    I have a chart that mixes a stacked column and line chart. As the column is set to stacked it takes all the fields set in Numeric and adds them up to get the maximum value. This causes me to have a very high maximum and the chart only displays half the available height.

    For instance:

    Stacked fields values:
    thisyear : 20,000
    orders : 1,000

    Line values
    lastyear : 250,000
    budget : 300,000

    Maximum gets calculated at 571,000 although the highest point on the chart is only 300,000.

    What I would like it to do is add up only the fields in the stacked column, then also take into account the other 2 line chart fields as separate values and find the highest. Is there anyway to do this. My only other option is to create my own separate fields server side that hold my min and max then put them in the numeric field but would rather avoid doing so.


    Code:
    axes: [{
       type: 'Numeric',
       position: 'left',
       fields: ['thisyear','prevyear1','orders','budget'],
       title: '£\'s Value + Orders',
       grid: true,
       label: {
        renderer: Ext.util.Format.numberRenderer('0,0'),
        font: '10px Arial'
       }
      }, {
       type: 'Category',
       position: 'bottom',
       fields: ['month'],
       title: 'BUDGET TRACKER',
       //grid: true,
       label: {
        font: '11px Arial'
       // renderer: function(month) {
       //  return month.substr(0, 3);
        //}
       }
      }],
      series: [{
       type: 'column',
       axis: 'left',
       xField: 'month',
       yField: ['thisyear', 'orders'],
       title: ['Sales This Year', 'Outstanding Orders'],   
       stacked: true,
       markerConfig: {
        type: 'circle',
        size: 4,
        radius: 4,
        'stroke-width': 0,
        fill: '#38B8BF',
        stroke: '#38B8BF'
       }
      }, {
       type: 'line',
       axis: 'left',
       smooth: true,
       xField: 'month',
       yField: ['prevyear1'],
       title: ['Sales Prev Year']
       style: {
        fill: '#B22222',
        stroke: '#B22222',
        'stroke-width': 3
       },
       markerConfig: {
        type: 'circle',
        size: 4,
        radius: 4,
        'stroke-width': 0,
        fill: '#B22222',
        stroke: '#B22222'
       }
      }, {
       type: 'line',
       highlight: {
        size: 7,
        radius: 7
       },   
       axis: 'left',
       smooth: true,
       xField: 'month',
       yField: ['budget'],
       title: ['Budget'],
       style: {
        fill: '#FF7722',
        stroke: '#FF7722',
        'stroke-width': 3
       },
       markerConfig: {
        type: 'circle',
        size: 4,
        radius: 4,
        'stroke-width': 0,
        fill: '#FF7722',
        stroke: '#FF7722'
       }
      }]
    The chart below maximum is set to 432642, you can see how it only uses half the chart height:
    budget.jpg

  2. #2
    Sencha User
    Join Date
    Mar 2011
    Posts
    24
    Vote Rating
    0
    999Dom999 is on a distinguished road

      0  

    Default Fixed

    Fixed


    Ahh just tried 4.1 on my app and this now works as I intended without having to change anything

Tags for this Thread