JS Tooltip Crosshair Columns
Demonstrates Column series type with x axis crosshair using column width grid line.
<%@ 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>.netCHARTING Sample</title>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates Column series type with x axis crosshair using column width grid line. 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.YAxis.FormatString = "c";
Chart.TitleBox.Label.Text = "Resort Revenue";
Chart.JS.Settings.Add("defaultTooltip.label.text","js:'<span style=\"width:50px\">Revenues</span><hr>%points'");
Chart.JS.Settings.Add("xAxis.crosshair.enabled", "true");
Chart.JS.Settings.Add("xAxis.crosshair.gridLine.width", "column");
Chart.JS.Settings.Add("xAxis.crosshair.gridLine.opacity:", "true");
Annotation an = new Annotation("Hover or tap the chart area for crosshair and combined tooltip");
an.Position = new Point(110, 30);
Chart.Annotations.Add(an);
// 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" %>
<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 Column series type with x axis crosshair using column width grid line. 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.YAxis.FormatString = "c"
Chart.TitleBox.Label.Text = "Resort Revenue"
Chart.JS.Settings.Add("defaultTooltip.label.text","js:'<span style=""width:50px"">Revenues</span><hr>%points'")
Chart.JS.Settings.Add("xAxis.crosshair.enabled", "true")
Chart.JS.Settings.Add("xAxis.crosshair.gridLine.width", "column")
Chart.JS.Settings.Add("xAxis.crosshair.gridLine.opacity:", "true")
Dim an As Annotation = New Annotation("Hover or tap the chart area for crosshair and combined tooltip")
an.Position = New Point(110, 30)
Chart.Annotations.Add(an)
' 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>
Previous