Gallery

Gallery > Interactivity

Java Script Tool Tips

Demonstrates how to implement JavaScript tool tips with custom formatting and inline images returned from element level custom attributes replaced dynamically in a custom hotspot OnMouseOver HTML attribute.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript Element ToolTips</title>
<script runat="server">

void Page_Load(Object sender,EventArgs e)
{

Chart.Type = ChartType.Combo;
Chart.Width = 500;
Chart.Height = 250;
Chart.TempDirectory = "temp";
Chart.Debug = true;
Chart.Title = "Hover your mouse over a country's column";

//Disable the legend box, we will use the tooltips to view information typically shown there.
Chart.LegendBox.Visible = false;

//Add a shading effect to give the columns some more visual polish.
Chart.ShadingEffect = true;
Chart.ShadingEffectMode = ShadingEffectMode.Three;

//This is the bulk of the work forthis sample
Chart.DefaultElement.ToolTip = "<block fStyle='bold' hAlign='left'>%Name\n<block hAlign='left'>%YValue\n<block hAlign='left'><Chart:Image src='%Flag'/>";

// y axis label.
Chart.YAxis.Label.Text = "GDP (Millions)";
Chart.YAxis.SmartScaleBreak = true;

// Add the first element.
Chart.Series.Element.Name = "United States";
Chart.Series.Element.YValue = 5452500;
// Specify the image for the us flag as custom attribute for the element.
// This is used above in HotSpot the %flag token is replaced with this data dynamically
Chart.Series.Element.CustomAttributes["Flag"]="../../images/us.png";

//Setting a series level palette name assigns a unique color to each element in a single series.
Chart.Series.PaletteName = Palette.Two;

// Add the element
Chart.Series.Elements.Add();

// Repeat for other elements.
Chart.Series.Element.Name = "Canada";
Chart.Series.Element.YValue = 786052;
Chart.Series.Element.CustomAttributes["Flag"]="../../images/ca.png";
Chart.Series.Elements.Add();

Chart.Series.Element.Name = "United Kingdom";
Chart.Series.Element.YValue = 477338;
Chart.Series.Element.CustomAttributes["Flag"]="../../images/uk.png";
Chart.Series.Elements.Add();

Chart.Series.Element.Name = "Mexico";
Chart.Series.Element.YValue = 155313;
Chart.Series.Element.CustomAttributes["Flag"]="../../images/mx.png";
Chart.Series.Elements.Add();

// Finally we add the series.
Chart.SeriesCollection.Add();

}
</script>
</head>
<body>
<br/>
<div align="center">
<dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript Element ToolTips</title>
<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

Chart.Type = ChartType.Combo
Chart.Width = 500
Chart.Height = 250
Chart.TempDirectory = "temp"
Chart.Debug = True
Chart.Title = "Hover your mouse over a country's column"

'Disable the legend box, we will use the tooltips to view information typically shown there.
Chart.LegendBox.Visible = False

'Add a shading effect to give the columns some more visual polish.
Chart.ShadingEffect = True
Chart.ShadingEffectMode = ShadingEffectMode.Three

'This is the bulk of the work forthis sample
Chart.DefaultElement.ToolTip = "<block fStyle='bold' hAlign='left'>%Name" & Constants.vbLf & "<block hAlign='left'>%YValue" & Constants.vbLf & "<block hAlign='left'><Chart:Image src='%Flag'/>"

' y axis label.
Chart.YAxis.Label.Text = "GDP (Millions)"
Chart.YAxis.SmartScaleBreak = True

' Add the first element.
Chart.Series.Element.Name = "United States"
Chart.Series.Element.YValue = 5452500
' Specify the image for the us flag as custom attribute for the element.
' This is used above in HotSpot the %flag token is replaced with this data dynamically
Chart.Series.Element.CustomAttributes("Flag")="../../images/us.png"

'Setting a series level palette name assigns a unique color to each element in a single series.
Chart.Series.PaletteName = Palette.Two

' Add the element
Chart.Series.Elements.Add()

' Repeat for other elements.
Chart.Series.Element.Name = "Canada"
Chart.Series.Element.YValue = 786052
Chart.Series.Element.CustomAttributes("Flag")="../../images/ca.png"
Chart.Series.Elements.Add()

Chart.Series.Element.Name = "United Kingdom"
Chart.Series.Element.YValue = 477338
Chart.Series.Element.CustomAttributes("Flag")="../../images/uk.png"
Chart.Series.Elements.Add()

Chart.Series.Element.Name = "Mexico"
Chart.Series.Element.YValue = 155313
Chart.Series.Element.CustomAttributes("Flag")="../../images/mx.png"
Chart.Series.Elements.Add()

' Finally we add the series.
Chart.SeriesCollection.Add()

End Sub
</script>
</head>
<body>
<br/>
<div align="center">
<dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
</body>
</html>

Sample FilenameJavaScriptToolTips.aspx
VersionLegacy (Pre 3.0)
Uses DatabaseNo

JS Charting

Gallery

Java Script Tool Tips