Stacked Bar Plot

9 views
Skip to first unread message

Oldtimer

unread,
Mar 15, 2011, 3:36:51 PM3/15/11
to Choosel
Lars:

I am trying to generate a stacked bar plot similar to this.

http://vis.stanford.edu/protovis/ex/crimea-stacked-bar.html

I am starting from your StackedChart example. Since they are not
same, I have to change it while learning your api. I will appreciate
if you can help out.

I was able to modified the protovis example to generate the plot in
straight js. The data is

var causes = ["spent", "budget", "overrun", "overtime"];

var crimea = [
{ date: "10/1854", spent: 905, budget: 210, overrun: 100, overtime:
150 }
];

With Protovis-GWT, I followed your approach in the example by defining
a data class

public static class StackBarData {

public String name;
public double budget;
public double spent;
public double overrun;
public double overtime;

private StackBarData(String name, double b, double spent, double or,
double ot) {
this.name = name;
this.budget = b;
this.spent = spent;
overrun = or;
overtime = ot;
}

}

I can find most of the your java equivalents of the js. But I really
have trouble with the definition of the StackLayout. Here is the js
version

var bar = vis.add(pv.Layout.Stack)
.layers(causes)
.values(crimea)
.x(function(d) x(d.date))
.y(function(d, t) y(d[t]))
.layer.add(pv.Bar)
.antialias(false)
.width(x.range().band)
.fillStyle(fill.by(pv.parent))
.strokeStyle(function() this.fillStyle().darker())
.lineWidth(1);

My issues are

1. The PVStackLayout doesn't have values(*). How do you pass data to
it?
2. You used layers to pass data in your StackChartExample. In my
cases, I have two data arrays and need to use layers and values
function as in the js code.
3. x.rangeBand() = x.range().band (js version)?
4. What is the java version of fill.by()?
5. What is the equivalent of .strokeStyle(function()
this.fillStyle().darker())?

Regards.

Oldtimer

Lars Grammel

unread,
Mar 16, 2011, 1:16:09 AM3/16/11
to cho...@googlegroups.com, Oldtimer
Hi Oldtimer,

here is a quick answer for the easy things. I'll look into the open
issues tomorrow.

> 3.  x.rangeBand() = x.range().band (js version)?

Yes.

> 5.  What is the equivalent of .strokeStyle(function()
> this.fillStyle().darker())?

.strokeStyle(new JsFunction<PVColor>() {
public PVColor f(JsArgs args) {
PVDot _this = args.getThis();
return _this.fillStyle().darker();
}
})

Cheers,

Lars


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

Oldtimer

unread,
Mar 16, 2011, 7:26:50 AM3/16/11
to Choosel
Thanks, Lars.

In the meantime, I am trying to see if I can use just layers with
values to create the plot.

Lars Grammel

unread,
Mar 16, 2011, 3:39:54 PM3/16/11
to cho...@googlegroups.com, Oldtimer
Hi Oldtimer,

I recreated the Crimean War Stacked bar chart example in protovis-gwt:

http://code.google.com/p/choosel/source/browse/trunk/org.thechiselgroup.choosel.protovis/examples/org/thechiselgroup/choosel/protovis/client/CrimeaStackedBarChartExample.java

http://web.uvic.ca/~lgrammel/blog/protovis-gwt/index.html

It required some changes to the protovis-gwt code. I have not made a
new release available yet, so you would need to check out the
protovis-gwt code from source:

http://code.google.com/p/choosel/source/checkout

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

Oldtimer

unread,
Mar 24, 2011, 8:24:36 AM3/24/11
to Choosel
Great. I will take a look of the new code. I assume it is with the
0.4 release.

On Mar 16, 3:39 pm, Lars Grammel <lars.gram...@googlemail.com> wrote:
> Hi Oldtimer,
>
> I recreated the Crimean War Stacked bar chart example in protovis-gwt:
>
> http://code.google.com/p/choosel/source/browse/trunk/org.thechiselgro...
> >> PhD Candidate, University of Victoriahttp://larsgrammel.dehttp://lgrammel.blogspot.com/http://twitter.com/...
>
> > --
> > 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 athttp://groups.google.com/group/choosel?hl=en.

Lars Grammel

unread,
Mar 24, 2011, 1:17:31 PM3/24/11
to cho...@googlegroups.com, Oldtimer
It is. Let me know how if it works out.

> For more options, visit this group at http://groups.google.com/group/choosel?hl=en.
>
>

--
Lars Grammel

Reply all
Reply to author
Forward
0 new messages