PDA

View Full Version : GaugeChart with xmlData



Annamacharya
24 Oct 2012, 11:38 PM
I have problem with loading xml data into gauge chart, that too i want to iterate the xml values.
my code:

Ext.onReady(function () {


Ext.define('Book',{
extend: 'Ext.data.Model',
fields: ['Batterycu','Totalcu','Loadcu','Enginespeed']
});
window.store=Ext.create('Ext.data.Store',{
autoLoad: true,
model: 'Book',
autoLoad: true,
fields:['Batterycu','Totalcu','Enginespeed','Loadcu'],
proxy: {
// load using HTTP
type: 'ajax',
url: './loadxmldata.do?',
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
type: 'xml',
// records will have an "Item" tag
record: 'record'



})


}


});


var chart = Ext.create('Ext.chart.Chart', {
xtype: 'chart',
animate: {
easing: 'elasticIn',
duration: 1000
},
store: store,
insetPadding: 25,
flex: 1,
axes: [{
type: 'gauge',
position: 'gauge',
title:'Battery current',
minimum: 0,
maximum: 100,
steps: 10,
margin: 7
}],
series: [{
type: 'gauge',
field: 'Batterycu',
donut: 65,
colorSet: ['#F49D10', '#ddd'],
listeners: {
'itemmouseup': function() {


}
}
,
tips:{
trackMouse: true,
width: 90,
height: 50,
renderer: function(storeItem,item){
store.each(function(rec) {
// alert(rec.get('Batterycu'));
})
this.setTitle(store.getAt(0).data.Batterycu+' A');


}


}


},
{
type: 'gauge',
field: 'Totalcu',
donut: 65,
colorSet: ['#F49D10', '#ddd'],
listeners: {
'itemmouseup': function() {


}
}
,
tips:{
trackMouse: true,
width: 90,
height: 50,
renderer: function(storeItem,item){
store.each(function(rec) {
// alert(rec.get('Batterycu'));
})
this.setTitle(store.getAt(0).data.Totalcu+' A');


}


}


}
]
});

//binding the chart to a panel.
var panel=Ext.create('Ext.panel.Panel', {
title: 'Guage charts',
width: 1050,
height:250,
x:0,
y:0,
layout: {
type: 'hbox',
align: 'stretch'
},
html: '<I>For IME No&nbsp;</I> ',
renderTo: Ext.getBody(),
items: [Totalcu,battery,Loadcu,Enginespeed]


});

I need to display the chart for all fields each record with different panels.
my xml data looks like:
<root>
<record>
<Batterycu>27.5</Batterycu>
<Totalcu>37.2</Totalcu>
<Loadcu>68.2</Loadcu>
<Enginespeed>245</Enginespeed>
<Dcvolt>65.2</Dcvolt>
</record>


<record>
<Batterycu>77.5</Batterycu>
<Totalcu>57.2</Totalcu>
<Loadcu>98.2</Loadcu>
<Enginespeed>315</Enginespeed>
<Dcvolt>74.2</Dcvolt>
</record>

<record>
<Batterycu>87.5</Batterycu>
<Totalcu>38.2</Totalcu>
<Loadcu>65.2</Loadcu>
<Enginespeed>415</Enginespeed>
<Dcvolt>76.2</Dcvolt>
</record>



</root>




Kindly help me.... I am newbee to Extjs 4.0

mitchellsimoens
27 Oct 2012, 1:20 AM
Does your store have data in it correctly?

Annamacharya
2 Nov 2012, 1:53 AM
yes, I can see it through url and it was displayed like
<root>
-<record>
<Batterycu>27.5</Batterycu>
<Totalcu>37.2</Totalcu>
<Loadcu>68.2</Loadcu>
<Enginespeed>245</Enginespeed>
<Dcvolt>65.2</Dcvolt>
</record>
-<record>
<Batterycu>77.5</Batterycu>
<Totalcu>57.2</Totalcu>
<Loadcu>98.2</Loadcu>
<Enginespeed>315</Enginespeed>
<Dcvolt>74.2</Dcvolt>
</record>

-<record>
<Batterycu>87.5</Batterycu>
<Totalcu>38.2</Totalcu>
<Loadcu>65.2</Loadcu>
<Enginespeed>415</Enginespeed>
<Dcvolt>76.2</Dcvolt>
</record>
</root>
is there any other way to check my data whether it was correct or not.. ?

Actually my requirement is some thing like I have 5 values and I need to create 5 charts with those 5 values and then i have to display those charts in different panels..

--------------------------------------------------------------------
|-------------------------------------------------------------------|
| |
| here chart with first value. |
| |
___________________________________________

--------------------------------------------------------------------
|-------------------------------------------------------------------|
| |
| here chart with second value. |
| |
___________________________________________

...
..
.. and so on.. Kindly help me asap..