Gallery
JS Custom Attributes
<%@ Page Language="C#" Trace="false" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates using custom data attributes in JS chart tooltips.
Chart.Title = " Employees' Report";
Chart.Size = "600x350";
Chart.ChartArea.Label.Text = "Hover columns to see a tooltip with additional data.";
Chart.XAxis.Label.Text = "Employee's Name";
Chart.YAxis.Label.Text = "Annual Salary";
Chart.YAxis.FormatString = "currency";
Chart.TempDirectory = "temp";
Chart.TitleBox.Position = TitleBoxPosition.FullWithLegend;
Chart.Debug = false;
Chart.JS.Enabled = true;
Chart.XAxis.TickLabelAngle = 90;
Chart.DefaultElement.ToolTip = "<b>Employee No:</b> %EmployeeID\n<b>Department:</b> %Department\n<b>Email:</b> %email\n<b>Phone:</b> %PhoneNumber";
//Create a series
DataEngine de = new DataEngine();
de.ConnectionString = ConfigurationManager.AppSettings["DNCConnectionString"];
de.SqlStatement = @"SELECT * FROM Employees";
//Set predefined data fields and some custom fields as attributes for x-Axis. (Employee's name)
de.DataFields = "Name=name,yAxis=Salary,id=EmployeeID,department=Department,email,phone=PhoneNumber";
SeriesCollection sc = de.GetSeries();
Chart.SeriesCollection.Add(sc);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Custom Attributes</title>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
<%@ Page Language="vb" Trace="false" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates using custom data attributes in JS chart tooltips.
Chart.Title = " Employees' Report"
Chart.Size = "600x350"
Chart.ChartArea.Label.Text = "Hover columns to see a tooltip with additional data."
Chart.XAxis.Label.Text = "Employee's Name"
Chart.YAxis.Label.Text = "Annual Salary"
Chart.YAxis.FormatString = "currency"
Chart.TempDirectory = "temp"
Chart.TitleBox.Position = TitleBoxPosition.FullWithLegend
Chart.Debug = False
Chart.JS.Enabled = True
Chart.XAxis.TickLabelAngle = 90
Chart.DefaultElement.ToolTip = "<b>Employee No:</b> %EmployeeID" & Constants.vbLf & "<b>Department:</b> %Department" & Constants.vbLf & "<b>Email:</b> %email" & Constants.vbLf & "<b>Phone:</b> %PhoneNumber"
'Create a series
Dim de As DataEngine = New DataEngine()
de.ConnectionString = ConfigurationManager.AppSettings("DNCConnectionString")
de.SqlStatement = "SELECT * FROM Employees"
'Set predefined data fields and some custom fields as attributes for x-Axis. (Employee's name)
de.DataFields = "Name=name,yAxis=Salary,id=EmployeeID,department=Department,email,phone=PhoneNumber"
Dim sc As SeriesCollection = de.GetSeries()
Chart.SeriesCollection.Add(sc)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Custom Attributes</title>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
- Sample FilenameJsCustomAttributes.aspx
- Version8.0
- Uses DatabaseNo