EXTJS generation of bar chart

Question

I am working on extjs & i want to make a bar chart from xml Here is my XML

I hav made grid like this

columns: [
{text: "Department Performance", flex: 1,dataIndex: 'DepartmentPerformance', sortable: true},
{text : 'Domestic',
columns: [
{text: "YTD", width: 50, dataIndex: 'DomesticYTD', sortable: true},
{text: "MTD", width: 50, dataIndex: 'DomesticMTD', sortable: true},
{text: "Daily", width: 50, dataIndex: 'DomesticDaily', sortable: true}
]},
{text : 'Other',
columns: [
{text: "YTD", width: 50, dataIndex: 'OtherYTD', sortable: true},
{text: "MTD", width: 50, dataIndex: 'OtherMTD', sortable: true},
{text: "Daily", width: 50, dataIndex: 'OtherDaily', sortable: true},
]},
{text : 'Total',
columns: [
{text: "YTD", width: 50, dataIndex: 'TotalYTD', sortable: true},
{text: "MTD", width: 50, dataIndex: 'TotalMTD', sortable: true},
{text: "Daily", width: 50, dataIndex: 'TotalDaily', sortable: true},
]},

{text : 'OEM',
columns: [
{text: "YTD", width: 50, dataIndex: 'OEMYTD', sortable: true},
{text: "MTD", width: 50, dataIndex: 'OEMMTD', sortable: true},
]},

],

& i want to make a graph by row as click on row I dont know how to use listeners & make a column chart

like on X-axis 3 sections Domestic & Other & Total , in each section YTD,MTD,DAILY & Y -axis only values 0 to max value

I tried a lot but not able create chart by row value

Please Help................. Thanks

score 0 · Accepted Answer · answered Aug 10 '12 at 06:12

To Generate the chart on grid click event we use listener selectionchange event On selection change generate new store which is assign to bar chart

selectionchange: function (view, selections, options) {
                          //console.log(view, selections, options);
                          record = selections[0];
                          //var v = record.get('Field1');
                          //alert(''+v);
                          //alert(''+index)
                         // alert('hiiii')


                        record = selections[0];

                        myData=[['Domestic',record.get('field1'),record.get('field2'),record.get('field3')],
                                     ['Export',record.get('field4'),record.get('field5'),record.get('field6')],
                                     ['Other',record.get('field7'),record.get('field8'),record.get('field8'),
                                     ]]

                        }

Here is the example demo link.....

http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/charts/FormDashboard.html

Thanks...

EXTJS generation of bar chart

1 Answers1