How to display labels w/multiple lines of text and embedded hyperlink

[DF]

Nicolas,

With regards to your SpaceTree “On Demand Nodes” demo, I have three
questions…

I wanted to modify the demo so it displayed (3) text fields rather
than just a single node number.

So I modified the SpaceTree.js file like so:

//init data
var json = {
id: "node01",
text1: "Text 1",
text2: " Text 2",
text3: " Text 3",
data: {},
children: [{
id: "node01_1",
text1: "Text 1",
text2: " Text 2",
text3: " Text 3",
data: {},
children: []
}, {
Etc…


And also…

//This method is called on DOM label creation.
//Use this method to add event handlers and styles to
//your node.
onCreateLabel: function(label, node){
label.id = node.id;
label.innerHTML = node.text1 + node.text2+ node.text3;
label.onclick = function(){
st.onClick(node.id);
};


However when I run the modified code, the resulting labels read
“undefined”.


1) Please tell me, how can I modify the code so my labels correctly
display (3) lines of text rather than just “undefined”?

2) Also, I’d like to place these (3) lines of text on 3 separate
lines (not all run together as I’m sure my code modifications would
create :) How can I force my text to appear on separate lines within
the same label?

3) And finally, I wanted the option of embedding a hyperlink inside
some of my labels… Is there a way to add a hyperlinks to the text
that appears inside the label?

Thanks

[Nico Garcia Belmonte]

Hi,

About 1):

Custom information should be added in the data object property:

 //init data
   var json = {
       id: "node01",

       data: {

         text1: "Text 1",
         text2: " Text 2",
         text3: " Text 3",

        },

       children: [{ ...

and can later be retrieved as node.data.text1;

About 2) and 3)... well, you're just writing html in your html label, so <a href="">some text</a> and <br /> should do the trick...

--

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=.

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

Bertrand Russell

[Nico Garcia Belmonte]

For more information about the JSON data please read this section of the doc:

http://thejit.org/docs/files/Loader-js.html#Loader

[DF]

On Nov 24, 9:51 am, Nico Garcia Belmonte <phil...@gmail.com> wrote:
> Hi,
>
> About 1):
>
> Custom information should be added in the data object property:
>
>  //init data
>    var json = {
>        id: "node01",
>        data: {
>          text1: "Text 1",
>          text2: " Text 2",
>          text3: " Text 3",
>         },
>        children: [{ ...
>
> and can later be retrieved as node.data.text1;
>
> About 2) and 3)... well, you're just writing html in your html label, so <a
> href="">some text</a> and <br /> should do the trick...

Nico,

Thank you for your assistance.

I have another question, I'm familiar with HTML so the web links
are no problem, but where do I place them? Do they get included in
with the "Data {xxx}" or are they added somewhere else?

Your reply will probably indicate where to place my <br>? I assume
it'll go in the same area as my hyperlinks :)

Thanks Again,
Dale

[Nico Garcia Belmonte]

Every custom data can go in the data object, so you can store a string with that for example

data: {

  "somehyperlink": "<a href=\"http://etc\">myhyperlink</a>",

etc.

}

--

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.

[DF]

Nico,

Thanks.

Two questions with regards to printing the label contents.

1) Not every label will have contents for text1, text2 and
text3.

In many cases some of the labels will have no value for one or
more of the text fields...

How can I print the labels so that they are only as tall as
they need to be?

For example, if all 3 text fields contain a value, the height
of that particular label would be 3 rows tall, but for those labels
inwhich only 1 text field has a non-null value, how can I make that
label just 1 row tall?

It might look better if all of the labels were the same
height, but I wanted to test it both ways, then decide :)



2) What is the proper syntax for printing the labels?

For example, if:

//init data
var json = {
id: "node01",
data: {

text1: "<a href=\"http://www.text1.com\">Text 1</
a><br />",
text2: "<a href=\"http://www.text2.com\">Text 2</
a><br />",
text3: "<a href=\"http://www.text3.com\">Text 3</
a>"
},
children: [{ ...


Then in this case, how do I define label.innerHTML?

Neither of the methods below are even close to working.
Both produce labels with the text "Object Object" on them...

label.innerHTML =
node.data.text1+node.data.text2+node.data.text3;

label.innerHTML = node.data


I checked http://thejit.org/docs/files/Spacetree-js.html,
but didn't see any examples showing how to properly format the label
output. Can you recommend another resource?


Thanks,
Dale

> > 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...
> > .

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

> Bertrand Russell- Hide quoted text -
>
> - Show quoted text -

[Dmitry Shamov]

        onCreateLabel: function(label, node){
            label.id = node.id;           

            var l = "C="+node.data.cource+"<br>";
                l+="P="+node.data.portfolio;
                if (node.data.gamma)
                    l+="<br>&gamma;="+node.data.gamma;
                if (node.data.beta)
                    l+="<br>&beta;="+node.data.beta;
            label.innerHTML = l;
            label.onclick = function(){
                st.onClick(node.id);
            };
in
    var st = new ST(canvas, {
from demo3

2009/11/30 DF <Dale.F...@us.tel.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.

--
С уважением, Дмитрий

[DF]

Dmitry,

Thanks, using your example, I constructed the code below:

var l="";
if (node.data.text1)
l=node.data.text1+"<br>";
if (node.data.text2)
l+=node.data.text2+"<br>";
if (node.data.text3)
l+=node.data.text3;

label.innerHTML = l;

Now, my nodes display 1, 2 or 3 rows of text in a single label :)

However, now I have a different issue. The rectangle that makes
up my label is the same size as before...

If my label contains just 1 row of text, the rectangle is the
correct size, however if two or more ows of text are added, the
rectangle is no longer large enough.

How can I modify the code so that each labels style automagically
adjust to the correct size?


Thanks Again,
Dale

On Nov 30, 1:54 pm, Dmitry Shamov <demm...@gmail.com> wrote:
> onCreateLabel: function(label, node){
> label.id = node.id;
> var l = "C="+node.data.cource+"<br>";
> l+="P="+node.data.portfolio;
> if (node.data.gamma)
> l+="<br>&gamma;="+node.data.gamma;
> if (node.data.beta)
> l+="<br>&beta;="+node.data.beta;
> label.innerHTML = l;
> label.onclick = function(){
> st.onClick(node.id);
> };
> in
> var st = new ST(canvas, {
> from demo3
>

> 2009/11/30 DF <Dale.Fram...@us.tel.com>

> > I checkedhttp://thejit.org/docs/files/Spacetree-js.html,

> > javascript-information-visua...@googlegroups.com<j-avascript-information-visualization-toolkit%2Bunsu...@googlegroups.com>
> > <j-
> > avascript-information-visualization-toolkit%2Bunsu...@googlegroups.com<-avascript-information-visualization-toolkit%252Buns...@googlegroups.co-m>

>
> > > > .
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/javascript-information-visualization-t.
> > ..
> > > > .
>
> > > --
> > > I would never die for my beliefs because I might be wrong.
>
> > > Bertrand Russell- Hide quoted text -
>
> > > - Show quoted text -
>
> > --
>
> > 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...
> > .
>
> --

> С уважением, Дмитрий- Hide quoted text -