Gallery

Gallery > Micro Charts

JS Column Options

Demonstrates column type microchart options.

Download Show C# Code Show VB Code

<%@ 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 column type microchart options.

Chart.JS.Enabled = true;
Chart.Size = "450x600";
Chart.TempDirectory = "temp";
Chart.Background.Color = Color.FromArgb(249,249,255);
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;

string s = "Column Type Options<hr><ul>";

s += "<li>Plain Column Chart<chart:Column margin='3' values='5,8,10,7,3,2,7,4,5,6,3,2'></li>";

// Zero values are always shown so they can be used as placeholders.
s += "<li>With 0 values<chart:Column margin='3' values='0,0,0,10,7,3,2,7,4,5,0,0,0'></li>";

// Negative values are colored in red by default.
s += "<li>With (-) & (+) values<chart:Column margin='3' values='10,7,3,2,7,4,-5,-6,-3,-2'></li>";
s += "<li>With (-) & (+) & 0 values<chart:Column margin='3' values='10,7,3,2,7,4,0,0,0,-5,-6,-3,-2'></li>";

// When a column microChart width is not specified it is determined automatically.
s += "</ul> Sizing<hr><ul>";
s += "<li>Height specified<chart:Column margin='3' values='5,8,10,7,3' height='25'></li>";

// When only the height is specified, the column widths are based on the height and chart width is determined by the column width and number of elements shown.
s += "<li>Height specified<chart:Column margin='3' values='5,8,10,7,3' height='30'></li>";
s += "<li>Height specified-width is dynamic<chart:Column margin='3' values='5,8,10,7,3,3,5' height='30'></li>";
s += "<li>Height & Width specified<chart:Column margin='3' values='5,8,10,7,3' height='30' width='30'></li>";
s += "<li>Height & Width specified<chart:Column margin='3' values='5,8,10,7,3' height='30' width='70'></li>";

s += "</ul> AxisMarker<hr><ul>";

// A reference line can be used by specifying a value in the AxisMarker parameter.
s += "<li>Column with a AxisMarker line<chart:Column margin='3' values='5,8,10,7,3,2,7,4,5,6,3,2' AxisMarker='5'></li>";

// A portion of the y axis can be marked by using two values in the AxisMarker parameter.
s += "<li>Column with a range AxisMarker<chart:Column margin='3' values='5,8,10,7,3,2,7,4,5,6,3,2' AxisMarker='3,7'></li>";

// Specifying colors.
s += "</ul> Coloring<hr><ul>";
s += "<li>Specifying colors<chart:Column margin='3' values='5,8,10,7,3,2,7,4,-5,-6,-3,-2' AxisMarker='5,8' colors='DarkCyan,DeepPink,Yellow'></li>";
s += "</ul>";
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 column type microchart options.

Chart.JS.Enabled = True
Chart.Size = "450x600"
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 = "Column Type Options<hr><ul>"

s &= "<li>Plain Column Chart<chart:Column margin='3' values='5,8,10,7,3,2,7,4,5,6,3,2'></li>"

' Zero values are always shown so they can be used as placeholders.
s &= "<li>With 0 values<chart:Column margin='3' values='0,0,0,10,7,3,2,7,4,5,0,0,0'></li>"

' Negative values are colored in red by default.
s &= "<li>With (-) & (+) values<chart:Column margin='3' values='10,7,3,2,7,4,-5,-6,-3,-2'></li>"
s &= "<li>With (-) & (+) & 0 values<chart:Column margin='3' values='10,7,3,2,7,4,0,0,0,-5,-6,-3,-2'></li>"

' When a column microChart width is not specified it is determined automatically.
s &= "</ul> Sizing<hr><ul>"
s &= "<li>Height specified<chart:Column margin='3' values='5,8,10,7,3' height='25'></li>"

' When only the height is specified, the column widths are based on the height and chart width is determined by the column width and number of elements shown.
s &= "<li>Height specified<chart:Column margin='3' values='5,8,10,7,3' height='30'></li>"
s &= "<li>Height specified-width is dynamic<chart:Column margin='3' values='5,8,10,7,3,3,5' height='30'></li>"
s &= "<li>Height & Width specified<chart:Column margin='3' values='5,8,10,7,3' height='30' width='30'></li>"
s &= "<li>Height & Width specified<chart:Column margin='3' values='5,8,10,7,3' height='30' width='70'></li>"

s &= "</ul> AxisMarker<hr><ul>"

' A reference line can be used by specifying a value in the AxisMarker parameter.
s &= "<li>Column with a AxisMarker line<chart:Column margin='3' values='5,8,10,7,3,2,7,4,5,6,3,2' AxisMarker='5'></li>"

' A portion of the y axis can be marked by using two values in the AxisMarker parameter.
s &= "<li>Column with a range AxisMarker<chart:Column margin='3' values='5,8,10,7,3,2,7,4,5,6,3,2' AxisMarker='3,7'></li>"

' Specifying colors.
s &= "</ul> Coloring<hr><ul>"
s &= "<li>Specifying colors<chart:Column margin='3' values='5,8,10,7,3,2,7,4,-5,-6,-3,-2' AxisMarker='5,8' colors='DarkCyan,DeepPink,Yellow'></li>"
s &= "</ul>"
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>

Sample FilenameJsMicroColumnOptions.aspx
Version9.2
Uses DatabaseNo

JS Charting

Gallery

JS Column Options