Positioning graph on a page

26 views
Skip to first unread message

Leonid Bogdanov

unread,
Dec 2, 2009, 6:44:17 AM12/2/09
to JavaScript Information Visualization Toolkit
Hello!

First of all, I'd like to thank the author for his great work!
Currently I try to adapt the JIT to display an org-chart of my
company.
Regarding this I have the following question:

How can I make the <div> which holds SpaceTree fill all available
space on a page?
Page has a header, a footer and a content. So I want JIT Canvas to
take 100% width of the page
and all available height of the page. What values do I need to set in
Canvas width and height properties?
Also I have a problem with SpaceTree in Mozilla Firefox (v3.5) -
rendered graph displays outside intended <div>,
at the end of the page.

Thank you in advance!

Nico Garcia Belmonte

unread,
Dec 2, 2009, 7:23:03 AM12/2/09
to javascript-information...@googlegroups.com
Hi,

width and height canvas configuration properties take fixed values in pixels, so you won't be able to set them as percentage. However you can calculate the with and height of your window (using some DOM manipulation framework like jquery or mootools) and set those values for the canvas widget.

If you'd like to know more about the canvas class/widget please take a look at this section of the documentation:




Also I have a problem with SpaceTree in Mozilla Firefox (v3.5) -
rendered graph displays outside intended <div>,
at the end of the page.

Did you change some CSS property somewhere? Could you attach a screenshot related to this problem?


 

Thank you in advance!

--

You received this message because you are subscribed to the Google Groups "JavaScript Information Visualization Toolkit" group.
To post to this group, send email to javascript-information...@googlegroups.com.
To unsubscribe from this group, send email to javascript-information-visua...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/javascript-information-visualization-toolkit?hl=en.





--
I would never die for my beliefs because I might be wrong.

Bertrand Russell

Leonid Bogdanov

unread,
Dec 2, 2009, 9:44:33 AM12/2/09
to JavaScript Information Visualization Toolkit
O, great! I'll use DOM manipulation to assign Canvas width & height
properties.

I don't manually change any css properties, but, of course, they are
assigned by Atlassian Confluence, where org-chart is placed.
Here is the screenshot of my page
http://javascript-information-visualization-toolkit.googlegroups.com/web/OrgChart.png?gda=paJY5z4AAAB92gsfbvcIHYLX5fs1Y5VwMZ4A4RRhQr7FqJTjRV9DgeSfOYp6l8Pz15ebJ7ffY_LjsKXVs-X7bdXZc5buSfmx&gsc=yuV_hQsAAAD8aQyRYu2EIFqDO_gpXyMy

On 2 дек, 15:23, Nico Garcia Belmonte <phil...@gmail.com> wrote:
> Hi,
>
> width and height canvas configuration properties take fixed values in
> pixels, so you won't be able to set them as percentage. However you can
> calculate the with and height of your window (using some DOM manipulation
> framework like jquery or mootools) and set those values for the canvas
> widget.
>
> If you'd like to know more about the canvas class/widget please take a look
> at this section of the documentation:
>
> http://thejit.org/docs/files/Canvas-js.html
>
> <http://thejit.org/docs/files/Canvas-js.html>
>
> Also I have a problem with SpaceTree in Mozilla Firefox (v3.5) -
>
> > rendered graph displays outside intended <div>,
> > at the end of the page.
>
> Did you change some CSS property somewhere? Could you attach a screenshot
> related to this problem?
>
>
>
>
>
>
>
> > Thank you in advance!
>
> > --
>
> > You received this message because you are subscribed to the Google Groups
> > "JavaScript Information Visualization Toolkit" group.
> > To post to this group, send email to
> > javascript-information...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > javascript-information-visua...@googlegroups.com<j­avascript-information-visualization-toolkit%2Bunsu...@googlegroups.com>
> > .
> > For more options, visit this group at
> >http://groups.google.com/group/javascript-information-visualization-t...
> > .

Leonid Bogdanov

unread,
Dec 2, 2009, 9:52:13 AM12/2/09
to JavaScript Information Visualization Toolkit
<div>, where I want SpaceTree to be is highlighted by Firebug (blue
rectangle)

On 2 дек, 17:44, Leonid Bogdanov <givenby...@gmail.com> wrote:
> O, great! I'll use DOM manipulation to assign Canvas width & height
> properties.
>
> I don't manually change any css properties, but, of course, they are
> assigned by Atlassian Confluence, where org-chart is placed.
> Here is the screenshot of my pagehttp://javascript-information-visualization-toolkit.googlegroups.com/...
Reply all
Reply to author
Forward
0 new messages