JS Tooltip Icons
Demonstrates using icons in tooltips and legend entry icons.
<%@ 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 icons in tooltips and legend entry icons.
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.DefaultElement.ToolTip = "js:'<icon name=%icon size=16 verticalAlign=center> in %name: %yValue <br/>%percentOfSeries% of %seriesName<br/>%percentOfGroup% of %name'";
// Add the random data.
Chart.SeriesCollection.Add(getData());
//Custom icons in legend.
Chart.JS.Settings.Add("series.0.legendEntry.icon", "material/places/service");
Chart.JS.Settings.Add("series.1.legendEntry.icon", "material/places/spa");
Chart.JS.Settings.Add("series.2.legendEntry.icon", "material/places/casino");
Chart.JS.Settings.Add("series.3.legendEntry.icon", "material/places/breakfast");
}
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.DefaultElement.CustomAttributes.Add("icon", "material/places/breakfast");
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");
casino.DefaultElement.CustomAttributes.Add("icon", "material/places/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");
spa.DefaultElement.CustomAttributes.Add("icon", "material/places/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");
service.DefaultElement.CustomAttributes.Add("icon", "material/places/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 icons in tooltips and legend entry icons.
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.DefaultElement.ToolTip = "js:'<icon name=%icon size=16 verticalAlign=center> in %name: %yValue <br/>%percentOfSeries% of %seriesName<br/>%percentOfGroup% of %name'"
' Add the random data.
Chart.SeriesCollection.Add(getData())
'Custom icons in legend.
Chart.JS.Settings.Add("series.0.legendEntry.icon", "material/places/service")
Chart.JS.Settings.Add("series.1.legendEntry.icon", "material/places/spa")
Chart.JS.Settings.Add("series.2.legendEntry.icon", "material/places/casino")
Chart.JS.Settings.Add("series.3.legendEntry.icon", "material/places/breakfast")
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.DefaultElement.CustomAttributes.Add("icon", "material/places/breakfast")
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")
casino.DefaultElement.CustomAttributes.Add("icon", "material/places/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")
spa.DefaultElement.CustomAttributes.Add("icon", "material/places/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")
service.DefaultElement.CustomAttributes.Add("icon", "material/places/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>
Previous