PDA

View Full Version : [1.0.1] Ext.ux.GoogleChart



cumpa
5 May 2008, 7:37 AM
Class wrapper for Google Chart API.

Before run example control ExtJs path in html file.

Let me know what do you think.

Thank you.
Cumpa

[1.0.2] 11/04/2008
Added repaint method:
Call repaint for updating chart with updated data.

[1.0.1] 05/16/2008
Added store config for reading data:
The record must contains "id" field and "chartdata" field; see new "googlechartstore" example for more info. This exemple must run under a web server (ex: "http://localhost/googlechart/googlechartstore.html").

vizcano
8 May 2008, 3:35 AM
I've tried your example, I think that it's what i was looking for, I'll try it on my app :)

Thanks

vizcano
12 May 2008, 9:32 AM
Hi cumpa

Your extension works fine but I'd like to know if there is any way to pass data from a store, I mean, is possible to create a json and pass it as data for the charts?

Thanks a lot :)

Lobos
12 May 2008, 9:49 AM
<script type="text/javascript" src="../Ext.ux.GoogleChart.js"></script>

i changed the original to this is some servers (like mine) are case sensitive when readiung file names.

Great extension btw!

Tnx

Lobos
12 May 2008, 10:14 AM
Hi cumpa

Your extension works fine but I'd like to know if there is any way to pass data from a store, I mean, is possible to create a json and pass it as data for the charts?

Thanks a lot :)

There is also an array reader for a store as well is there not? but yes the next step will be to integrate this with a store the two really go hand in hand.


var pie = new Ext.ux.GoogleChart({
chartType:"pie3d",
dataType:"extended",
title:"Chart+Title",
labels:["Hello","World"],
store: new Ext.data.Store({
url: 'index.php?&storeID=1234',
autoLoad : true,
reader: new Ext.data.JsonReader({
root: 'data'
})
})
});

would be cool, or something like it...

cumpa
12 May 2008, 11:47 PM
At this moment there isn't "store" config but it's a good idea.
I'm a little busy and if anyone want to post the patch i can create a google project or put the patch in original source code adding the author.

Thx
Cumpa

vizcano
15 May 2008, 8:35 AM
Any ideas of how to do it? I'd like to try it with a store :)

vizcano
19 May 2008, 12:37 AM
No ideas?

cumpa
19 May 2008, 4:04 AM
Have you seen the first post?

vizcano
19 May 2008, 6:29 AM
OMG!!! I'm blind :))

Thanks a lot :)

mask_hot
27 May 2008, 4:47 AM
Hello,

Should it be possible to get Labels from the store?

Which informations else could be retrieved from the store?

Thx

cumpa
27 May 2008, 10:41 PM
In current version only data can load by store.
Maybe in the next version.

Bye

fangzhouxing
5 Jun 2008, 12:30 AM
Why my google chart does not show?



panel.test.GoogleChartPanel = Ext.extend(Ext.Panel, {
initComponent : function() {
Ext.apply(this, {
items : [{
id : this.myId("test-google-chart"),
xtype : "googlechart",
chartType : "pie3d",
dataType : "extended",
title : "Chart+Title",
labels : ["Hello", "World"],
data : [60,40]
}]
});
panel.test.GoogleChartPanel.superclass.initComponent.call(this);
}
});
Ext.reg("panel.test.GoogleChartPanel", panel.test.GoogleChartPanel);

sanjshah
5 Jun 2008, 10:13 AM
Hi,

I'm trying to a size to the chart:



var pie = new Ext.ux.GoogleChart({
chartType:"pie3d"
,dataType:"extended"
,title:"Chart+Title"
,height:300
,width:300
,labels:["Hello","World"]
});
pie.addData("data", [60,40]);
pie.render("pie");



I resized the chart for a specific size but the labels are now off the screen, how can I add these?

Thanks,

Sanj

cumpa
5 Jun 2008, 10:52 PM
I think there are proportions to be respected. If you copy the image url in your browser you'll see that the image has the same problem. So i don't think that there is a problem in extension.

Bye

cumpa
5 Jun 2008, 11:20 PM
Why my google chart does not show?

Data is an Ext.util.MixedCollection object.

Try this:


myData = new Ext.util.MixedCollection();
myData.add("data", [60, 40]);
Ext.apply(this, {
items : [{
id : this.myId("test-google-chart"),
xtype : "googlechart",
chartType : "pie3d",
dataType : "extended",
title : "Chart+Title",
labels : ["Hello", "World"],
data : myData
}]
});


Bye

sanjshah
6 Jun 2008, 8:29 AM
cumpa, your right its a proportional thingy

Regards,

Sanj

fangzhouxing
6 Jun 2008, 11:00 PM
cumpa,thank you,I will try it.

temporary
3 Nov 2008, 10:01 AM
hi cumpa, in your initial post you have written about an update to 1.0.1 but - the attached file still containts version 1.0.0

how do i update a chart? is this possible?
i'm _not_ using a store, i added data through addData().

another cool thing would be if i could provide the data at instanciation...

cumpa
4 Nov 2008, 4:26 AM
I have updated version.

Thanks for suggest.

Cumpa

temporary
4 Nov 2008, 1:33 PM
Thanks for the version bump, cumpa.

Another thing - now I need to _change_ the values. Just adding won't suffice, i guess. I could do this "by hand" in .data, but an updateData() or replaceData() (or maybe just something like clean()) would be great!

I've implemented initial values inside initComponent(), if you want I can send you a patch against 1.0.2. With this you can specify data without using addData().

cumpa
4 Nov 2008, 11:44 PM
I've implemented initial values inside initComponent(), if you want I can send you a patch against 1.0.2. With this you can specify data without using addData().

Great.
You can post the code here or send me the patch.

Thx.
Cumpa

Fallen Zen
1 Sep 2010, 8:16 AM
It would be best in the case of json data file, to define labels on y axis like this.


{
barhor: [
{id:'d1', chartdata:[401,263,256,149,147,134,97,59,56,56,47,41,39,37,34,33,30,28,25,19,14,13,13,12,11,11,10,9,9,8,7,6,6,3,3,3,2,1], datalabels: ['label1', 'label2', '', '', '', '', '', '', '', '', '', '' , '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '']}
]
}


How can I define y axis labels for a bar chart like that?
http://chart.apis.google.com/chart?chs=500x560&cht=bhs&chd=t:401,263,256,149,147,134,97,59,56,56,47,41,39,37,34,33,30,28,25,19,14,13,13,12,11,11,10,9,9,8,7,6,6,3,3,3,2,1&chds=0,500&chl=0|50|100|150|200|250|300|350|400|450|500&chco=4d89f9&chbh=10