[openspending-dev] Launching OS for Oakland, Calif.

Thu Mar 28 13:11:29 UTC 2013

Hi Adam,

you need to set the height of your widget to an absolute amount > 0 (100% doesn't work, try 400px).

If you need further guidance, consider hiring one of the OpenSpending devs to help in building the Oakland site.

Cheers
Stefan

On 28.03.2013, at 02:37 , Adam Stiles <adam.d.stiles at gmail.com> wrote:

> Hello -- I've followed Stefan's instructions below but treemap still not displaying on this page -- and no errors are detected. Any suggestions greatly appreciated: http://openbudgetoakland.org/draft/oak11-13adopted.html
> 
> THANKS.
> 
> On Mon, Mar 25, 2013 at 12:51 PM, Stefan Wehrmeyer <stefan.wehrmeyer at okfn.org> wrote:
> Hi Adam,
> 
> you already created a Treemap visualisation here:
> 
> http://openspending.org/oakland_adopted_budget_fy2011-12/views/test-treemap
> 
> Have a look at the source code for the embed site:
> 
> http://openspending.org/oakland_adopted_budget_fy2011-12/embed?widget=treemap&state=%7B%22drilldowns%22%3A%5B%22Department%22%2C%22Program%22%5D%2C%22year%22%3A2011%2C%22cuts%22%3A%7B%7D%7D&width=700&height=400
> 
> So on the JavaScript part there is:
>  - jQuery
>  - openspendingjs/prod/boot.js
>  - some configuration to OpenSpending (scriptRoot, separators)
>  - openspendingjs/lib/widgets.js
>  - openspendingjs/app/bob/bob.js
>  - openspendingjs/widgets/treemap/main.js
>  - some simple configuration objects (state, context)
>  - and then just: new OpenSpending.Treemap($('#widget'), context, state);
> 
> Hope this helps.
> 
> Cheers
> Stefan
> 
> On 24.03.2013, at 20:28 , Adam Stiles <adam.d.stiles at gmail.com> wrote:
> 
> > Stefan (or anyone who can help),
> >
> > As a test, I'm trying to make this data set appear in a custom site:
> > http://openspending.org/oakland_adopted_budget_fy2011-12
> >
> > My assumption was that I needed the OS JS file:
> > https://github.com/openspending/openspendingjs
> >
> > Can someone tell me:
> >
> > - What other files are needed in my directory
> >
> > - What code (html, JS, CSS) is required on the page itself to load a
> > treemap of that dataset (or point me to a simple example)
> >
> > At some point, it would be really useful to people creating custom
> > sites to have one "template" for adding treemap, bubbletree, etc.
> > There are many more complicated examples, but unless I'm missing it,
> > there doesn't seem to be a documentation or example for this basic
> > application.
> >
> > This post came very close, but not quite enough info for the someone
> > with only basic JS skills:
> > http://openspending.org/blog/2013/03/20/How-to-Embed-Open-Spending-Databases-to-Your-Own-Website.html
> >
> > Thanks!
> >
> > Adam
> >
> >
> >
> >>
> >> Then it's just a matter of glueing the widgets and custom maps together.
> >> Unfortunately, currently the widgets are only documented through example use, not through tutorials
> >>
> >> Here's another example of using the treemap and datatable I recently built for Berlin:
> >> https://github.com/okfde/haushaltberlin/
> >> http://okfde.github.com/haushaltberlin/
> >>
> >> To make a custom site using the OpenSpending API and widgets, you need to have a certain proficiency in JavaScript and be ready to read some code.
> >>
> >>> - How do I make each level (click) on the visual generate a unique URL (or whatever is required to have comments specific to each level of the visual)?
> >>
> >> You can use #! URLs according to the Disqus Docs:
> >> http://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites
> >>
> >> Cheers
> >> Stefan
> >
> >
> >
> > --
> > Adam Stiles
> > 510.280.4862
> >
> > _______________________________________________
> > openspending-dev mailing list
> > openspending-dev at lists.okfn.org
> > http://lists.okfn.org/mailman/listinfo/openspending-dev
> > Unsubscribe: http://lists.okfn.org/mailman/options/openspending-dev
> 
> 
> 
> 
> -- 
> Adam Stiles
> 510.280.4862 _______________________________________________
> openspending-dev mailing list
> openspending-dev at lists.okfn.org
> http://lists.okfn.org/mailman/listinfo/openspending-dev
> Unsubscribe: http://lists.okfn.org/mailman/options/openspending-dev