Legend title position in - highcharts

I'm using the legend title, but it's being positioned to the left and above the legend items:
While I need it to be to the right, and on the same line as, the legend items:
Legend title only accepts 2 properties - title and style,.
Using style - I couldn't find any style property to move it (tried float, textAlign).
Using text - I tried wrapping the title in HTML tag with style="transform:translate(742,18);", but that doesn't do anything to it either.
From analyzing it in Firebug, I see that the item which I can control in the style isn't the actual item that's in charge of the positioning. The item I want to control is the one highlighted in blue, but the one I'm actually controlling is its inner item:
How can I position the title?

Wouldn't be easier to control that title using $(".highcharts-legend-title text") ? Then set new transform attribute. But be careful with IE8 - it's using VML, not SVG.
Or in a Highcharts way:
var title = chart.legend.title;
title.translate(x, y); // translate legend's title
Demo: http://jsfiddle.net/rum1rcum/

Related

multiple text colors in jQuery Tooltip

I'm trying to get some words in a jQuery tooltip text, another colour. Is this possible? I would like to give the words 'CONTROL PANEL BUTTON' another colour. I already give the tooltip a custom class. Can I for instance use two classes for different parts of the tooltip text?
Here's my script:
$("#ControlBTN").tooltip({
content: "CONTROL PANEL BUTTON<br><br>Click to show or hide the Fluid Control Panel.",
tooltipClass: "ui-tooltip_trans"
})

How can I control legend items through a custom button in Highcharts?

I'm looking for a way of controlling legend items through my custom button.
The button will be placed out of the canvas area.
How can I get a list of legend items, and toggle them through checkboxes?
By doing that, I can give users more spaces to see graphs.
Thanks,
Sung Am YANG
You can look at the legend item names using
chart.series[0].name
chart.series[1].name
To toggle axes on and off, use
chart.series[0].show()
chart.series[0].hide()
e.g. http://jsfiddle.net/BasRN/ shows hiding and showing the first series with buttons, including setting the button text to the series name.

How use different font styles and icon in a Firemonkey stringgrid cell

There seems to be not much information available about this subject so hopefully someone can give some suggestions.
I would like to change color and style of different parts of text in a stringgrid cell.
Example:
20-02-2011 - Document Title
Would it also be possible to show an icon in a stringgrid cell?
It is indeed possible to show icons or bitmaps in a string grid, the Monkey Styler blog includes an example of how to customise cell display in a FMX grid.
http://monkeystyler.com/blog/entry/firemonkey-grid-basics-custom-cells-and-columns
Thinking about the other part of your question though, you will have to build a style up to display text in different fonts, as yet FMX does not have a richtext equivalent or HTML rendering components (I'm sure the latter will come, the former I am not confident on getting for a while!). You would have to have a text component in the style for each different font size/style etc, you would need to name the text elements (using binding or stylename properties) and handle the setting of the text contents using code in the ongetvalue and onsetvalue events (I guess you could also use a onapplystyle event) to display some text in bold and some not.
The event handler would then use either a binding - which is easier to set but - in my experience - buggy;
mycell.binding['boldtext']:='sometext';
Or find a style element by stylename by using findstyleresource;
tempobj:=mycell.findstyleresource('boldtext');
if tempobj is ttext then
ttext(tempobj).text='sometext';
Excuse any bad coding style there, but you get the general idea (I hope) if you set autosize to true for the ttext components in the style and align them left you get - mostly - what you are after. The only issue is that the resulting text doesn't look quite seamless because autosizing and aligning left doesn't really give you the same space between the fonts that you would get with a richtext or HTML display. You should be able to fiddle with the padding (giving it a negative number for the left padding should allow you to remove any extra space) but you have to live with that not being entirely perfect compared to proper font hinting and alignment.

TListView Item Focus Theming

When using a TListView and themes are disabled in the Application, the focused and selected item appears something like this:
Notice in both images where the triangle is. The painted box for the item does not draw where the icon appears. In a TListBox the painted item fills the whole selected item.
How might I be able to get the icon part of the selected item to fill, just as it does with the text part?
I know TListBox renders like this, but I require the use of TListView for the Data property, also the TListView handles icons better via a TImageList.
Thanks.
You'll need to use the OnCustomDraw events of TListView. Within the event handler:
Determine if the item is selected
Determine if the control is focused
Draw the appropriate selection rectangle if the item is selected (grey if the control isn't selected, blue if it is)
Draw the text
Draw the image from the imagelist using TImageList.Draw
There are methods for doing these things, such as DrawText and FillRect.
Note that you can use TListBox rather than TListView if you'd rather. You indicated you need the Data property for items in the list, I'd assume to tie them up to your actual model objects. You can do this with anything that supports TStrings (such as TListBox.Items) using TStrings.Objects.

Disable tooltip on some elements even when title is defined

Is there a way not to show a tooltip when the title of an element is defined ?
Im using huddletogether's LightBox2 which takes whatever is in the anchor's title and converts into HTML.
http://www.huddletogether.com/projects/lightbox2/#support
Can I insert links in the caption?
Im calling a javascript function in that link and that tooltip shows this when the mouse hovers the image.
Click
Other option is to change return [anchor.href, anchor.title]; to something like return [anchor.href, anchor.aTitle]; as mentioned here.

Resources