[openspending-dev] Toggle between multiple years?

Tryggvi Björgvinsson tryggvi.bjorgvinsson at okfn.org
Thu May 2 22:53:58 UTC 2013


Hi Adam,

On fim 2.maí 2013 21:35, Adam Stiles wrote:
> Hello,
>
> I am trying to add links to toggle between different years similar to what
> is here: http://bund.offenerhaushalt.de/
>
> Can someone outline the code and files that need to be changed?
> https://github.com/adstiles/openbudgetoakland/

This should be relatively easy to add. You need some minor changes to
javascripts/main.js

In that file you're making the cut to find the years in this variable:

    var cuts = {"time.year": "2011|time.year:2012"};

The pipe between them chooses both years (it means 'or').
http://bund.offenerhaushalt.de uses a url parameter (the thing after the
question mark in the url) called "reference_year" to find the relevant
year. You could do that easily since that's already being done to work
with the drilldown - the stuff using purl fetches the url parameters in
this line:

    var parameters = $.url().param();

After this line you can get a known parameter, let's say
'reference_year' with something like:

    parameters['reference_year']

The cuts variable could then be defined after getting the parameters
with something like:

    var cuts = {"time.year": parameters['reference_year']};

Note that this assumes reference_year will always be present (which is
not always the case. For those cases I usually use something called
'ternary operator'.

Ternary operator works by checking for something and then returning
something based on the outcome (woah, that's not a good explanation).
It's structured with a question mark and a colon:

<the check> ? <if check return this> : <if not check return this>

So, you can use it to check if parameters has reference_year and putting
that into a variable called year. If parameters doesn't have it the
ternary operator should return a default variable, there are some good
ways to do that but here's how you would do it by hard coding it to '2012':

var year = parameters['reference_year'] ? parameters[reference_year] :
'2012';

Then you can use this 'year' variable instead of
parameters['reference_year'] when you define the cuts.

So if you put this all together you'll have what you're looking for :-)

I hope it helps. Don't be afraid to ask for help. You can also ask
around on IRC. I try to follow what's happening on #openspending on
freenode but I might not see it immediately -- sometimes I'm working
instead of hanging out on IRC ;-)

> BTW, image attached of a treemap in action ...

This is awesome! Thanks! I'm really proud of you guys/girls and I'm
saving this image for later :-) Would you be willing to allow me to use
it under a Creative Commons license (e.g. cc-by or cc-by-sa) and if so
who should I attribute it to?

/Tryggvi





More information about the openspending-dev mailing list