PDA

View Full Version : ExtJS Charts using XML



gameboy87
1 Mar 2012, 6:23 AM
I am newbee. Please assist me in developing a Line Chart using a simple XML file. Thanks.

My code for creating a store looks like ...


Ext.define('Book',{
extend: 'Ext.data.Model',
fields: [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Bandwidth', mapping: 'ItemAttributes > Bandwidth'},
'Time'
]
});

// create the Data Store
var store = Ext.create('Ext.data.Store', {
model: 'Book',
proxy: {
// load using HTTP
type: 'ajax',
url: 'sheldon.xml',
// the return will be XML, so lets set up a reader
reader: {
type: 'xml',
// records will have an "Item" tag
record: 'Item',
//fields: ['Bandwidth','Time'],
//idProperty: 'ASIN',
//totalProperty: 'total',
totalRecords: '@total'
//root: 'Items'
}
}
});




and I am using a chart widget with



Ext.onReady(function(){
var panel = Ext.create('widget.panel',{
width: 600,
height: 250,
title: 'Sample chart for tacitine',
renderTo: Ext.getBody(),
layout: 'fit',
items: {
xtype: 'chart',
style: 'background: #fff',
animate: true,
shadow: true,
store: store,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['Bandwidth'],
title: 'Bits per second',
label: {
font: ''
},
grid: true,
minimum: 0,
maximum: 10
},{
type: 'Numeric',
position: 'bottom',
fields: ['Time'],
label: {
font: ''
},
title: 'Seconds',
minimum: 0,
maximum: 10
}],
series: [{

type: 'line',
highlight: {
size: 7,
radius: 7,
},
axis: 'left' ,
smooth: true,
fill: true,
xField: 'Time',
yField: 'Bandwidth',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}]
}//items
});// Panel Widget



May I know what is the error I got ? and the XML file is


<?xml version="1.0" encoding="UTF-8"?>
<Items>
<Request>
<IsValid>True</IsValid>
<ItemSearchRequest>
<Author>Sidney Sheldon</Author>
<SearchIndex>Books</SearchIndex>
</ItemSearchRequest>
</Request>
<TotalResults>203</TotalResults>
<TotalPages>21</TotalPages>
<Item>
<ASIN>0446355453</ASIN>
<DetailPageURL>
http://www.amazon.com/gp/redirect.html%3FASIN=0446355453%26tag=ws%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/0446355453%253FSubscriptionId=1A7XKHR5BYD0WPJVQEG2
</DetailPageURL>
<ItemAttributes>
<Author>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<ProductGroup>Book</ProductGroup>
<Title>Master of the Game</Title>
<Bandwidth>2</Bandwidth>
<Time>3</Time>
</ItemAttributes>
</Item>
</Items>



I am strucked.....the widget gets loading but not the graph. :-/ Thanks !

gameboy87
1 Mar 2012, 8:15 PM
I found the error. A senior guy helped me in resolving this. just include "autoLoad: true" while creating the data Store. It works !

sulakshana1782
9 Mar 2012, 3:59 AM
HI,
Could you please post the entire code you have used for populating store and then using it ?

Thanks
Sulakshana