diff -r 322d0feea350 -r 89ef5ed3c48b src/cm/media/js/lib/yui/yui_3.10.3/docs/charts/charts-customizedtooltip.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/charts/charts-customizedtooltip.html Tue Jul 16 14:29:46 2013 +0200 @@ -0,0 +1,382 @@ + + + + + Example: Customize a Chart's Tooltip + + + + + + + + + + +
+
+

+
+ + +

Example: Customize a Chart's Tooltip

+
+
+
+
+
+

This example shows how to customize the default tooltip of a Chart.

+
+
+
+ + +
+ +

This example shows how to customize the tooltip for a Chart.

+ +

A Chart instance comes with a simple default tooltip. This tooltip is represented by the tooltip attribute. Through the tooltip attribute you can do the following: +

    +
  • Style the tooltip background, border and text.
    • +
  • Customize and format the tooltip message.
    • +
  • Change the show and hide events.
    • +
  • Disable the tooltip.
    • +
+

+

The tooltip attribute contains the following properties: + +

+
node
Reference to the actual dom node
+
showEvent
Event that should trigger the tooltip
+
hideEvent
Event that should trigger the removal of a tooltip (can be an event or an array of events)
+
styles
A hash of style properties that will be applied to the tooltip node
+
show
Indicates whether or not to show the tooltip
+
markerEventHandler
Displays and hides tooltip based on marker events
+
planarEventHandler
Displays and hides tooltip based on planar events
+
markerLabelFunction
Reference to the function used to format a marker event triggered tooltip's text. The method contains + the following arguments: +
+
categoryItem
An object containing the following: +
+
axis
The axis to which the category is bound.
+
displayName
The display name set to the category (defaults to key if not provided).
+
key
The key of the category.
+
value
The value of the category.
+
+
+
valueItem
An object containing the following: +
+
axis
The axis to which the item's series is bound.
+
displayName
The display name of the series. (defaults to key if not provided)
+
key
The key for the series.
+
value
The value for the series item.
+
+
+
itemIndex
The index of the item within the series.
+
series
The CartesianSeries instance of the item.
+
seriesIndex
The index of the series in the seriesCollection.
+
+ The method returns an HTMLElement which is written into the DOM using appendChild. If you override this method and choose to return an html string, you + will also need to override the tooltip's setTextFunction method to accept an html string. +
+
planarLabelFunction
Reference to the function used to format a planar event triggered tooltip's text +
+
categoryAxis
CategoryAxis Reference to the categoryAxis of the chart. +
valueItems
Array of objects for each series that has a data point in the coordinate plane of the event. Each object contains the following data: +
+
axis
The value axis of the series.
+
key
The key for the series.
+
value
The value for the series item.
+
displayName
The display name of the series. (defaults to key if not provided)
+
+
+
index
The index of the item within its series.
+
seriesArray
Array of series instances for each value item.
+
seriesIndex
The index of the series in the seriesCollection.
+
+ The method returns an HTMLElement which is written into the DOM using appendChild. If you override this method and choose to return an html string, you + will also need to override the tooltip's setTextFunction method to accept an html string. +
+
setTextFunction
Method that writes content returned from planarLabelFunction or markerLabelFunction into the the tooltip node. + has the following signature: +
+
label
The HTMLElement that the content is to be added.
+
val
The content to be rendered into tooltip. This can be a String or HTMLElement. If an HTML string is used, it will be rendered as a + string.
+
+
+
+ +

In this example, we have changed the styles and set a custom markerLabelFunction to format the text.

+ +

CSS

+
#mychart {
+    margin:10px 10px 10px 10px;
+    width:90%;
+    max-width: 800px;
+    height:400px;
+}
+ + +

HTML

+
<div id="mychart"></div>
+ + +

JavaScript

+
var myDataValues = [ 
+    {category:"5/1/2010", Miscellaneous:2000, Expenses:3700, Revenue:2200}, 
+    {category:"5/2/2010", Miscellaneous:50, Expenses:9100, Revenue:100}, 
+    {category:"5/3/2010", Miscellaneous:400, Expenses:1100, Revenue:1500}, 
+    {category:"5/4/2010", Miscellaneous:200, Expenses:1900, Revenue:2800}, 
+    {category:"5/5/2010", Miscellaneous:5000, Expenses:5000, Revenue:2650}
+];
+
+var myTooltip = {
+    styles: { 
+        backgroundColor: "#333",
+        color: "#eee",
+        borderColor: "#fff",
+        textAlign: "center"
+    },
+    markerLabelFunction: function(categoryItem, valueItem, itemIndex, series, seriesIndex)
+    {
+        var msg = document.createElement("div"),
+            underlinedTextBlock = document.createElement("span"),
+            boldTextBlock = document.createElement("div");
+        underlinedTextBlock.style.textDecoration = "underline";
+        boldTextBlock.style.marginTop = "5px";
+        boldTextBlock.style.fontWeight = "bold";
+        underlinedTextBlock.appendChild(document.createTextNode(valueItem.displayName + " for " + 
+                                        categoryItem.axis.get("labelFunction").apply(this, [categoryItem.value, categoryItem.axis.get("labelFormat")])));
+        boldTextBlock.appendChild(document.createTextNode(valueItem.axis.get("labelFunction").apply(this, [valueItem.value, {prefix:"$", decimalPlaces:2}])));   
+        msg.appendChild(underlinedTextBlock);
+        msg.appendChild(document.createElement("br"));
+        msg.appendChild(boldTextBlock); 
+        return msg; 
+    }
+};
+
+var mychart = new Y.Chart({
+                    dataProvider:myDataValues, 
+                    type:"bar",
+                    render:"#mychart", 
+                    tooltip: myTooltip
+                });
+ + +
+
+
+ +
+
+ + + +
+
+

Examples

+
+ +
+ +
+
+ + + +
+
+
+
+ + + + + + + + + + +