Image in Y axis


« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Philip Wiggins on 28th August 2015
Is there a way to add an image to the y axis of a graph? Or even put a HTML element? I was hoping to do <button>Button Name</button> or something similar.
Posted by Philip Wiggins on 28th August 2015
If I could even to some text decorations in the labels on the y axis. That would help me just as much. Just being able to bold some of the text. This is a title <b> + </b> .
Posted by Richard Heyes on 28th August 2015
Hi there,

Yes you can do that. There's a HOWTO for using images as X labels here (the coords will need adjusting for the Y axis of course):

www.rgraph.net/docs/howto-images-as-labels.html

And there's an example that I've just made that's based on that but with click events added:

www.rgraph.net/fiddle/view.html/using-images-as-buttons



Alternatively you could use absolute/relative positioning and some HTML buttons like this (remember though that anything positioned like this won't show up on an image retrived of the canvas):

www.rgraph.net/fiddle/view.html/using-images-as-buttons2



Richard
Posted by Philip Wiggins on 28th August 2015
I'm trying not to overide the labels. In the image:
www.dropbox.com/s/xkmw9g4w5pto9vi/Screenshot%202015-08-28%2010.27.11.png?dl=0

I'm where I have the "+" I would like to either be able to bold that or have an image of a button to replace the "+" so its more pronounced. I'm making the bars themselves collapsable. What you see are what I'm calling parents and on click i'm redrawing and showing "Sub" projects so I don't really need the labels on the side clickable, do something more customizable with the "+" at the end of the label if its possible.
Posted by Richard Heyes on 28th August 2015
Hi there,

There's no labelsBold option currently for the HBar. So what you could do is this:

1. Use a space or other invisible character in the HBar labels.

2. Get the coordinates of the space characters once the HBar is drawn.

3. Use those coordinates in-conjunction with drawing API Text object and use that to render the text of your choice. This would give you the bold option that you require and also allow for click handlers to be added if desired. The drawing API Text object is documented here (and there's an example here of it being used to make a custom title):

www.rgraph.net/docs/drawing-api-text.html

To get the text objects that originated from that object you can do something like this:

>>>>>>>>>>>>>>>>>>>>>>>>>>>

var hbar = document.getElementById('cvs').__object__;
var texts = hbar.coordsText

for (var i=0; i<texts.length; i++) {
     if (texts[i].tag === 'labels') {
         $p(texts[i]); // Alerts the text details

         // Now use the coords to create a text object to
         // your taste.
     }
}

<<<<<<<<<<<<<<<<<<<<<<<<<<<

Does that help?

Richard
Posted by Philip Wiggins on 28th August 2015
I think so. I will try to work this out. Thanks for your help.

Add a reply

 




« Back to message list
RGraph on social media