Stacked Column Chart

30 views
Skip to first unread message

membrain

unread,
Feb 28, 2012, 7:57:09 AM2/28/12
to Choosel
Hi,

I am trying to implement something similar to the Protovis example
here:

http://protovis-js.googlecode.com/svn/trunk/examples/column-stacked.html

In the javascript example, the bar stacks are created this way:

var bar = vis.add(pv.Panel)
.data(data)
.add(pv.Bar)
.data(function(a) a)
.left(function() x(this.index))
.width(x.range().band)
.bottom(pv.Layout.stack())
.height(y);

With many of the examples I've looked at, it's clear how to go from
the javascript to the java using Protovis-GWT, but I'm having trouble
recreating this particular one with the Protovis-GWT API.
Specifically, I don't know where to put the PV.Layout.Stack() (I can't
call it with the "bottom" function like the javascript example does -
it wouldn't compile). Does the layers function need to be called
somewhere also? I looked at the Stacked Area Chart example, but that
didn't help me because there the PV.Layout.Stack is added to the panel
directly in both the javascript and the java code. Trying to do
something similar with my code didn't work.

If this example or a similar one is implemented using ProtovisGWT
please let me know.

thanks!

membrain

Lars Grammel

unread,
Feb 28, 2012, 6:41:40 PM2/28/12
to cho...@googlegroups.com
You are right, adding pv.Layout.stack() as bottom is not supported.

I looked into this a bit and found that you might be able to achieve
the same result with something similar to this:

vis.add(PV.Layout.Stack()).layers(data).x(new JsDoubleFunction() {
public double f(JsArgs args) {
return x.fd(args.<PVBar> getThis().index());
}
}).y(new JsDoubleFunction() {
public double f(JsArgs args) {
double d = args.getDouble();
return y.fd(d);
}
}).layer().add(PV.Bar).data(new JsFunction<JsArrayNumber>() {
public JsArrayNumber f(JsArgs args) {
return args.getObject();
}
}).width(new JsDoubleFunction() {
public double f(JsArgs args) {
return x.rangeBand();
}
}).height(new JsDoubleFunction() {
public double f(JsArgs args) {
return y.fd(args.getDouble());
}
});

Hope that helps,

Lars

> --
> You received this message because you are subscribed to the Google Groups "Choosel" group.
> To post to this group, send email to cho...@googlegroups.com.
> To unsubscribe from this group, send email to choosel+u...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/choosel?hl=en.
>

--
Lars Grammel
PhD Candidate, The CHISEL Group, University of Victoria
http://larsgrammel.de
http://twitter.com/lgrammel

Reply all
Reply to author
Forward
0 new messages