Different tooltip for each series on my chart

[pwillemann]

I am using Highcharts 1.5.1 with my GWT project and I have a chart with a spline graph and a scatter graph. I want to have a different tooltip for each series, however it appears tooltips are associated with a chart and not a series. I wanted to extend ToolTipData but I did not want to deal with providing a JavaScriptObject for the super implicit constructor. Is there a workaround that will allow me to have multiple types of ToolTips? Any guidance or help is deeply appreciated.

Thanks

Phil

[Shawn Quinn]

The display options of the tooltip are shared for the whole chart, but you can use a ToolTipFormatter to change the contents of the tooltip depending on which series the user is hovered over. Example here:

http://www.moxiegroup.com/moxieapps/gwt-highcharts/showcase/#combination-dual-axes

[pwillemann]

Shawn,

Thank you for the answer, however I was not clear when I asked the original question. For the scatter graph, there is an extra piece of information I want to display in the scatter graph tooltip. This information is not in toolTipData, but is available to me when I get the "point" to plot from my data server. When I plot the point I want to add this info to the point's tooltip.

In the code portion I included, the variable is called toolTipExtraText. For the scatter graph I set this value to a name, but for the spline graph I want it to be an empty string. This does not work. I'm assuming the tooltip format is static and not dynamic.

Is there a way for me to get extra data into the tooltip for display? This would be exactly what the customer desires.

Attached code:

---

public void customizeToolTip() {

    setToolTip(new ToolTip().setCrosshairs(true).setFormatter(new ToolTipFormatter() {
        public String format(ToolTipData toolTipData) {
            return "<b>" + toolTipData.getSeriesName() + "</b><br/>"
                    + DateTimeFormat.getFormat("yyyy-MM-dd HH:mm:ss").format(new Date(toolTipData.getXAsLong())) + "<br/>"
                    + toolTipExtraText + " " + NumberFormat.getFormat("0.00").format(toolTipData.getYAsDouble());
        }
    }));
}

---

Thanks for you help.

Phil

[Shawn Quinn]

Hi Phil, yes, you should be able to add whatever data you want to the contents of the tooltip within your ToolTipFormatter. If it's data that is specific to the point the user is hovering over, you can use "toolTipData.getPoint()" to retrieve the Point instance that the user is focused on. Note that the "Point" instance allows you to store additional proprietary data on the instance with the "point.setUserData()" and "point.getUserData()" methods as well.

[pwillemann]

Thanks Shawn - that definitely leads me in the correct direction. I can see how I can set this up if I use the method addPoint for my series, by attaching the user data to each point, however I use setPoints sometimes because of the vast amount of data I have. For the setPoints method I provide a Number[][] array where I set the time and the value for each Number entry. Where would I put the extra data? There isn't an extra array position?

[Shawn Quinn]

Glad that helps! The setPoints() method also support passing an array of Point instances, so you'd want to use that overloaded version of the method. (The constructor of each Point instance in turn can take the two numbers for your time and value.)

[pwillemann]

The setUserData() method requires a JSONObject. What little I know about JSON, I thought you would be required to have a key, value pair. I can see that my extra data needs to be the value, but what should I be using for the key.

Thank you so much for helping this GWT Highcharts Newbie. I really like the software. I can really do a lot of cool stuff.

[Shawn Quinn]

You can make the keys anything you like. If you only have one extra piece of information that you want to keep with each point, then perhaps you could make the key something like "data".

Glad to hear things are going well for you with GWT Highcharts! We certainly appreciate the feedback.

[pwillemann]

I have the tooltips working, but I have another question.

As I mentioned before I have one graph that I do not want the extra string. For this graph I do this:

extraData.put("data", new JSONString(""));

I assumed this would show nothing for my tooltip, but instead it shows "". How can I get rid of the quotes?

In my other graph, the same is true when actually have a value. It shows "Phil" instead of Phil.

[Shawn Quinn]

Glad you're up and running! Can you provide a more complete/boiled down code example that demonstrates the quotation marks getting added? I don't know of anything in GWT Highcharts or Highcharts itself that would add quotation marks in the tooltips, but not sure if you're triggering some special case in the way you're configuring the chart.

[pwillemann]

Ok here goes. Here is my tooltip code:

public void customizeToolTip() {

    setToolTip(new ToolTip().setCrosshairs(true).setFormatter(new ToolTipFormatter() {
        public String format(ToolTipData toolTipData) {
            return "<b>" + toolTipData.getSeriesName() + "</b><br/>"
                    + DateTimeFormat.getFormat("yyyy-MM-dd HH:mm:ss").format(new Date(toolTipData.getXAsLong())) + "<br/>"
                    + toolTipData.getPoint().getUserData().get("data") + " "
                    + NumberFormat.getFormat("0.00").format(toolTipData.getYAsDouble());
        }
    }));
}

As you can see I have a "data" key for my JSON. Here is the code I use to build all my JSON values:

platform = new JSONString(myList.get(index).getPlatformName(); <== this returns a string
extraData.put("data", platform);
setUserData(extraData);

Let's assume I have a platform called Phil. I expect to see this on my tooltip:

Name of chart
TimeStamp
Phil 100.0

Instead I get this

Name of chart
TimeStamp
"Phil" 100.0

I'm assuming JSON uses the key "data" to fetch "Phil", but I don't understand why there are quotes around the string. Is it simply a matter of me stripping them out. I can certainly do this? Also when I put in "" to represent an empty string I did not expect to get "".

[Shawn Quinn]

Fun with GWT's JSON APIs... You'll need to cast to "JSONString" and use the "stringValue()" method to get what you're expecting. E.g.

((JSONString)(toolTipData.getPoint().getUserData().get("data"))).stringValue()

As you have it you're running the "toString()" method on the JSONString instance itself, which, by spec, includes the quotation marks so that it can be evaluated directly by the JavaScript interpreter.