Templates y Temas para ExtJS y Sencha Touch Bleext!
Bleextop! un desktop OpenSource para Ext4 y CodeIgniter http://bit.ly/pUwLJO
Scroll en gráfica de series
  • Vote Up0Vote Down cyborgmnkcyborgmnk October 2011
    Posts: 23
    Hola a todos
    Tengo una gráfica con series que visualiza bien las series y la información como es, el problema es que cuando los datos del eje x son muchos, nada mas me muestra hasta donde llega el tamaño de la ventana y gráfica. Mi pregunta es como es posible habilitar un scroll o como puedo configurar para mostrar toda la información del eje x.

    Aquí pongo el código de la gráfica:

    this.record = new Ext.data.Record.create([
    {
    name: 'metros',
    mapping: 'metros',
    type: 'float'
    },
    {
    name: 'metros1',
    mapping: 'metros1',
    type: 'float'
    },
    {
    name: 'metros2',
    mapping: 'metros2',
    type: 'float'
    },
    {
    name: 'metros3',
    mapping: 'metros3',
    type: 'float'
    },
    {
    name: 'material_descripcion',
    mapping: 'material_descripcion',
    type: 'string'
    }
    ]);

    this.reader = new Ext.data.JsonReader({
    idProperty: 'material_descripcion',
    root: 'items',
    successProperty: 'success',
    totalProperty: 'total'
    }, this.record);

    this.store = new Ext.data.Store({
    reader: this.reader,
    proxy: new Ext.data.HttpProxy({
    method: 'POST',
    prettyUrls: false,
    url: 'impresion/graficarImpresionesRangoFechaMateriales',
    timeout: 120000
    })
    });

    //this.columnChart
    this.columnChart = new Ext.chart.ColumnChart({
    anchor: '100%',
    store: this.store,
    xField: 'material_descripcion',
    extraStyle:{
    legend:{
    display: 'bottom'
    }
    },

    series:[
    {
    yField: 'metros',
    displayName: 'Bobina 127'
    },

    {
    yField: 'metros1',
    displayName: 'Bobina 100'
    },

    {
    yField: 'metros2',
    displayName: 'Bobina 76'
    },

    {
    yField: 'metros3',
    displayName: 'Bobina Plotter'
    }
    ],

    yAxis: new Ext.chart.NumericAxis({
    displayName: 'Metros',
    labelRenderer : Ext.util.Format.numberRenderer('0,0')
    }),
    chartStyle: {
    padding: 10,
    animationEnabled: true,
    font: {
    name: 'Tahoma',
    color: 0x444444,
    size: 11
    },
    dataTip: {
    padding: 5,
    border: {
    color: 0x99bbe8,
    size:1
    },
    background: {
    color: 0xDAE7F6,
    alpha: .9
    },
    font: {
    name: 'Tahoma',
    color: 0x15428B,
    size: 10,
    bold: true
    }
    },
    xAxis: {
    color: 0x69aBc8,
    majorTicks: {
    color: 0x69aBc8,
    length: 4
    },
    minorTicks: {
    color: 0x69aBc8,
    length: 2
    },
    majorGridLines: {
    size: 1,
    color: 0xeeeeee
    }
    },
    yAxis: {
    color: 0x69aBc8,
    majorTicks: {
    color: 0x69aBc8,
    length: 4
    },
    minorTicks: {
    color: 0x69aBc8,
    length: 2
    },
    majorGridLines: {
    size: 1,
    color: 0xdfe8f6
    }
    }
    }
    });


    this.panel = new Ext.Panel({
    layout:'anchor',
    //width: 400,
    //height: 300,
    anchor: '100%, 100%',
    items: [
    this.columnChart
    ]
    });

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with Twitter

Sign In Apply for Membership

Poll

No poll attached to this discussion.

Tagged