1. #1
    Sencha User
    Join Date
    Feb 2011
    Location
    United States
    Posts
    17
    Vote Rating
    0
    sluboch is on a distinguished road

      0  

    Default Problem with Line Chart Example for v4.0

    Problem with Line Chart Example for v4.0


    I have been trying to display the line chart example in a tabpanel. It does not seem to work in v 4.0 can someone tell me what I am doing wrong? I don't get any error messages in FireBug.

    <html>
    <head>
    <title>Tabs and Charts</title>
    <link rel="stylesheet" type="text/css" href="lib/ext-4.0.1/resources/css/ext-all.css" />
    <script src="lib/ext-4.0.1/adapter/ext/ext-base.js"></script>
    <script src="lib/ext-4.0.1/ext-all-debug.js"></script>
    <script>
    Ext.require('Ext.chart.*');
    Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);

    Ext.onReady(function(){
    //Ext.QuickTips.init();
    var store = new Ext.data.JsonStore({
    fields:['month','sales', 'rev'],
    data: [
    {month: 'Jan', sales: 2000, rev: 1200},
    {month: 'Feb', sales: 1800, rev: 1300},
    {month: 'Mar', sales: 1500, rev: 1100},
    {month: 'Apr', sales: 2150, rev: 1150},
    {month: 'May', sales: 2210, rev: 1200},
    {month: 'Jun', sales: 2250, rev: 1250},
    {month: 'Jul', sales: 2370, rev: 2200},
    {month: 'Aug', sales: 2500, rev: 2300},
    {month: 'Sep', sales: 3000, rev: 2500},
    {month: 'Oct', sales: 2580, rev: 1300},
    {month: 'Nov', sales: 2100, rev: 1350},
    {month: 'Dec', sales: 2650, rev: 2300}
    ]
    });
    /*var piestore = new Ext.data.JsonStore({
    fields: ['product','sales'],
    data: [
    {product: 'CS-100', sales: 2000},
    {product: 'CS-150', sales: 1500},
    {product: 'XV-55', sales: 500},
    {product: 'XV-56', sales: 200},
    {product: 'OL-120', sales: 50}
    ]
    });*/

    var viewport = new Ext.Viewport({
    layout: 'border',
    renderTo: Ext.getBody(),
    items: [{
    region: 'center',
    xtype: 'tabpanel',
    activeTab: 0,
    items: [{
    //Ext.create('Ext.chart.Chart', {
    xType: 'chart',
    title: 'Yearly Sales',
    store: store,
    //animate: true,
    shadow: true,
    //legend: true,
    theme: 'Category1',
    legend: {
    position: 'right'
    },
    axes: [{
    type: 'Numeric',
    minimum: 0,
    position: 'left',
    fields: ['sales','rev'],
    title: 'US Dollars',
    minorTickSteps: 0,
    //grid: true,
    grid: {
    odd: {
    opacity: 1,
    fill: '#ddd',
    stroke: '#bbb',
    'stroke-width': 0.5
    }
    }
    },{
    type: 'Cateogry',
    position: 'bottom',
    fields: ['month'],
    title: 'Months of the Year'
    }],
    series: [{
    type: 'line',
    highlight: {
    size: 7,
    radius: 7
    },
    axis: 'left',
    xField: 'month',
    yField: 'sales',
    markerConfig: {
    type: 'cross',
    size: 4,
    radius: 4,
    'stroke-width': 0
    }
    },{
    type: 'line',
    highlight: {
    size: 7,
    radius: 7
    },
    axis: 'left',
    xField: 'month',
    yField: 'rev',
    markerConfig: {
    type: 'circle',
    size: 4,
    radiums: 4,
    'stroke-width': 0
    }
    }]
    //})
    },{
    title: 'Line Chart',
    html: 'Tab 2'
    //layout: 'border',
    //border: false,
    /*items: [{
    xtype: 'linechart',
    region: 'center',
    split: true,
    id: 'myChart',
    store: store,
    xField: 'month',
    xAxis: new Ext.chart.CategoryAxis({
    title: 'Month'
    }),
    yAxis: new Ext.chart.NumericAxis({
    title: 'USD',
    majorUnit: 500
    }),
    series: [{
    yField: 'sales',
    displayName: 'Sales',
    },{
    yField: 'rev',
    displayName: 'Revenue'
    }],
    extraStyle: {
    legend: { display: 'bottom'}
    },
    listeners: {
    itemmouseover: function(o) {
    var myGrid = Ext.getCmp('myGrid');
    myGrid.selModel.selectRow(o.index);
    }
    }
    },{
    xtype: 'grid',
    region: 'south',
    //title: 'The Sales Grid',
    id: 'myGrid',
    store: store,
    height: 350,
    stripeRows: true,
    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
    columns: [
    {header: 'Month', dataIndex: 'month'},
    {header: 'Sales', dataIndex: 'sales'},
    {header: 'Revenue', dataIndex: 'rev'}
    ]
    }]*/
    },{
    title: 'Bar Chart',
    html: 'Tab 3'
    //layout: 'border',
    //border: false,
    /*items: [{
    xtype: 'stackedcolumnchart',
    region: 'center',
    split: true,
    id: 'myChart2',
    store: store,
    xField: 'month',
    xAxis: new Ext.chart.CategoryAxis({
    title: 'Month'
    }),
    //yAxis: new Ext.chart.NumericAxis({
    // title: 'USD',
    // maximum: 4000,
    // minimum: 0,
    // majorUnit: 500,
    // minorUnit: 0,
    // stackingEnabled: true
    //}),
    series: [{
    yField: 'rev',
    displayName: 'Revenue',
    style: { color: '#900000', size: 25}
    },{
    yField: 'sales',
    displayName: 'Sales',
    style: { color: '#80C080', size: 25}
    }],
    listeners: {
    itemmouseover: function(o) {
    var myGrid2 = Ext.getCmp('myGrid2');
    myGrid2.selModel.selectRow(o.index);
    }
    }
    },{
    xtype: 'grid',
    region: 'south',
    //title: 'The Sales Grid',
    id: 'myGrid2',
    store: store,
    height: 350,
    stripeRows: true,
    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
    columns: [
    {header: 'Month', dataIndex: 'month'},
    {header: 'Sales', dataIndex: 'sales'},
    {header: 'Revenue', dataIndex: 'rev'}
    ]
    }]*/
    },{
    title: 'Pie Chart',
    html: 'Tab 4'
    /*store: piestore,
    width: 400,
    height: 300,
    items: [{
    xtype: 'piechart',
    store: piestore,
    dataField: 'sales',
    categoryField: 'product',
    seriesStyles: {
    colors: [ '#F8869D','#25CDF2','#FFAA3C','#DEFE39','#AB63F6'] //eSprit 80s
    },
    extraStyle: {
    legend: {
    display: 'bottom',
    padding: 10,
    border: {
    color: '#CBCBCB',
    size: 1
    }
    }
    }
    }]*/
    }]
    }]
    })
    });
    </script>
    </head>
    <body>
    <div id='my_id' style=''></div>
    </body>
    </html>

  2. #2
    Sencha User
    Join Date
    Feb 2011
    Location
    United States
    Posts
    17
    Vote Rating
    0
    sluboch is on a distinguished road

      0  

    Default


    I am only trying to get it to work in the first tab. I have commented out the other tabs which have v3.1.1 code in them.

    I don't know how to put the code example in a scrolling box. Sorry about that.

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