View Full Version : ExtJS Charts using XML

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 ...

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'},

// 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

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
});// Panel Widget

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

<?xml version="1.0" encoding="UTF-8"?>
<Author>Sidney Sheldon</Author>
<Author>Sidney Sheldon</Author>
<Manufacturer>Warner Books</Manufacturer>
<Title>Master of the Game</Title>

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

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 !

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