Gallery

Gallery > Interactivity

JS Tooltip Micro

Demonstrates using micro chart in tooltips

Download Show C# Code Show VB Code

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

void Page_Load(Object sender, EventArgs e)
{

// Demonstrates using micro chart in tooltips.
Chart.JS.Enabled = true;

// Set the size
Chart.Width = 700;
Chart.Height = 340;
// Set the temp directory
Chart.TempDirectory = "temp";
// Debug mode. ( Will show generated errors if any )
Chart.Debug = false;

Chart.TitleBox.Label.Text = "Resort Revenue";
Chart.YAxis.Scale = Scale.Stacked;
Chart.YAxis.FormatString = "c";

Chart.DefaultElement.ToolTip = "js:'percent of %seriesName: <chart:bar values=%percentOfGroup max=100 size=40x10 color=%color> %percentOfGroup%'";

// Add the random data.
Chart.SeriesCollection.Add(getData());

}

SeriesCollection getData()
{
SeriesCollection sc = new SeriesCollection();
string[] xVals = new string[] { "Q1", "Q2", "Q3", "Q4" };
int[] yValsA = new int[] { 230, 240, 267, 238 };
int[] yValsB = new int[] { 325, 367, 382, 371 };
int[] yValsC = new int[] { 285, 292, 307, 208 };
int[] yValsD = new int[] { 185, 192, 198, 278 };

Series breakfast = new Series();

breakfast.Name = "breakfast";
for (int i = 0; i < 4; i++)
{
Element e = new Element();
e.Name = xVals[i];
e.YValue = yValsA[i];
breakfast.Elements.Add(e);
}
sc.Add(breakfast);

Series casino = new Series("casino");

for (int i = 0; i < 4; i++)
{
Element e = new Element();
e.Name = xVals[i];
e.YValue = yValsB[i];
casino.Elements.Add(e);
}
sc.Add(casino);

Series spa = new Series("spa");

for (int i = 0; i < 4; i++)
{
Element e = new Element();
e.Name = xVals[i];
e.YValue = yValsC[i];
spa.Elements.Add(e);
}
sc.Add(spa);

Series service = new Series("service");

for (int i = 0; i < 4; i++)
{
Element e = new Element();
e.Name = xVals[i];
e.YValue = yValsD[i];
service.Elements.Add(e);
}
sc.Add(service);

return sc;
}

</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

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

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

' Demonstrates using micro chart in tooltips.
Chart.JS.Enabled = True

' Set the size
Chart.Width = 700
Chart.Height = 340
' Set the temp directory
Chart.TempDirectory = "temp"
' Debug mode. ( Will show generated errors if any )
Chart.Debug = False

Chart.TitleBox.Label.Text = "Resort Revenue"
Chart.YAxis.Scale = Scale.Stacked
Chart.YAxis.FormatString = "c"

Chart.DefaultElement.ToolTip = "js:'percent of %seriesName: <chart:bar values=%percentOfGroup max=100 size=40x10 color=%color> %percentOfGroup%'"

' Add the random data.
Chart.SeriesCollection.Add(getData())

End Sub

Function getData() As SeriesCollection
Dim sc As SeriesCollection = New SeriesCollection()
Dim xVals As String() = New String() { "Q1", "Q2", "Q3", "Q4" }
Dim yValsA As Integer() = New Integer() { 230, 240, 267, 238 }
Dim yValsB As Integer() = New Integer() { 325, 367, 382, 371 }
Dim yValsC As Integer() = New Integer() { 285, 292, 307, 208 }
Dim yValsD As Integer() = New Integer() { 185, 192, 198, 278 }

Dim breakfast As Series = New Series()

breakfast.Name = "breakfast"
For i As Integer = 0 To 3
Dim e As Element = New Element()
e.Name = xVals(i)
e.YValue = yValsA(i)
breakfast.Elements.Add(e)
Next i
sc.Add(breakfast)

Dim casino As Series = New Series("casino")

For i As Integer = 0 To 3
Dim e As Element = New Element()
e.Name = xVals(i)
e.YValue = yValsB(i)
casino.Elements.Add(e)
Next i
sc.Add(casino)

Dim spa As Series = New Series("spa")

For i As Integer = 0 To 3
Dim e As Element = New Element()
e.Name = xVals(i)
e.YValue = yValsC(i)
spa.Elements.Add(e)
Next i
sc.Add(spa)

Dim service As Series = New Series("service")

For i As Integer = 0 To 3
Dim e As Element = New Element()
e.Name = xVals(i)
e.YValue = yValsD(i)
service.Elements.Add(e)
Next i
sc.Add(service)

Return sc
End Function

</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

Sample FilenameJsTooltipMicro.aspx
Version9.2
Uses DatabaseNo

JS Charting

Gallery

JS Tooltip Micro