JS Spark Line Options
Demonstrates sparkline type microchart options.
<%@ Page Language="C#" 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 sparkline type microchart options.
Chart.JS.Enabled = true;
Chart.Size = "400x400";
Chart.TempDirectory = "temp";
Chart.Background.Color = Color.FromArgb(249,249,255);
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
string s = "<span style='font-size:14px; font-weight: bold;'>Sparkline Types and Options</span><hr><ul>";
// A plain SparkLine.
s += "<li><span style='width:200px'>Plain sparkline</span><chart:Sparkline margin='8' values='5,6,8,23,2,15'></li>";
// Providing two colors specifies the color of the line and end point colors.
s += "<li><span style='width:200px'>Sparkline with ends</span><chart:Sparkline margin='8' values='5,6,8,23,2,15' colors='Gray,Red'></li>";
// Providing three colors specifies the color of the line, end points, and high/low value colors.
s += "<li><span style='width:200px'>Sparkline with ends and min/max</span><chart:Sparkline margin='8' values='5,6,8,23,2,15' colors='Gray,Red,Blue'></li>";
// By specifying a transparent color for end points they can be omitted.
s += "<li><span style='width:200px'>Sparkline with min/max</span><chart:Sparkline margin='8' values='5,6,8,23,2,15' colors='Gray,Transparent,Blue'></li>";
// Specifying only the area line color.
s += "<li><span style='width:200px'>Colored sparkline</span><chart:Sparkline margin='8' values='5,6,8,23,2,15' color='Blue'></li>";
// A reference line can be used by specifying a value in the AxisMarker parameter.
s += "<li><span style='width:200px'>Sparkline with AxisMarker line</span><chart:Sparkline margin='8' values='5,6,8,23,2,15' axisMarker='10'></li>";
// A portion of the y axis can be marked by using two values in the AxisMarker parameter and it uses the fourth color in the Colors parameter.
s += "<li><span style='width:200px'>Sparkline with colored range AxisMarker</span><chart:Sparkline margin='8' values='5,6,8,23,2,15' axisMarker='10,20' colors='Gray,Transparent,Transparent,Blue'></li>";
s += "</ul></span>";
Chart.ObjectChart = new dotnetCHARTING.Label(s);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</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" %>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates sparkline type microchart options.
Chart.JS.Enabled = True
Chart.Size = "400x400"
Chart.TempDirectory = "temp"
Chart.Background.Color = Color.FromArgb(249,249,255)
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
Dim s As String = "<span style='font-size:14px; font-weight: bold;'>Sparkline Types and Options</span><hr><ul>"
' A plain SparkLine.
s &= "<li><span style='width:200px'>Plain sparkline</span><chart:Sparkline margin='8' values='5,6,8,23,2,15'></li>"
' Providing two colors specifies the color of the line and end point colors.
s &= "<li><span style='width:200px'>Sparkline with ends</span><chart:Sparkline margin='8' values='5,6,8,23,2,15' colors='Gray,Red'></li>"
' Providing three colors specifies the color of the line, end points, and high/low value colors.
s &= "<li><span style='width:200px'>Sparkline with ends and min/max</span><chart:Sparkline margin='8' values='5,6,8,23,2,15' colors='Gray,Red,Blue'></li>"
' By specifying a transparent color for end points they can be omitted.
s &= "<li><span style='width:200px'>Sparkline with min/max</span><chart:Sparkline margin='8' values='5,6,8,23,2,15' colors='Gray,Transparent,Blue'></li>"
' Specifying only the area line color.
s &= "<li><span style='width:200px'>Colored sparkline</span><chart:Sparkline margin='8' values='5,6,8,23,2,15' color='Blue'></li>"
' A reference line can be used by specifying a value in the AxisMarker parameter.
s &= "<li><span style='width:200px'>Sparkline with AxisMarker line</span><chart:Sparkline margin='8' values='5,6,8,23,2,15' axisMarker='10'></li>"
' A portion of the y axis can be marked by using two values in the AxisMarker parameter and it uses the fourth color in the Colors parameter.
s &= "<li><span style='width:200px'>Sparkline with colored range AxisMarker</span><chart:Sparkline margin='8' values='5,6,8,23,2,15' axisMarker='10,20' colors='Gray,Transparent,Transparent,Blue'></li>"
s &= "</ul></span>"
Chart.ObjectChart = New dotnetCHARTING.Label(s)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
Previous