Gallery

Gallery > Micro Charts

JS Bar Options

Demonstrates several features of the Bar microChart.

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 several features of the Bar microChart.
Chart.JS.Enabled = true;
Chart.Size = "450x500";
Chart.TempDirectory = "temp";
Chart.Background.Color = Color.FromArgb(249,249,255);
Chart.ChartArea.ClearColors();
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
Chart.Margin = "10";

string s = "Bar Type Options<hr><ul style='list-style-type:none !important;'>";

s += "<li>Plain Bar<Chart:Bar margin='3' values='10' ></li>";

// Specifying a scale maximum/minimum and negative values
s += "<li>Bar with scale max set<Chart:Bar margin='3' values='10' max='20'></li>";
s += "<li>Bar with scale max & min<Chart:Bar margin='3' values='10' max='20' min='-20'></li>";
s += "<li>Bar with negative values<Chart:Bar margin='3' values='-10' max='0'><hr></li>";

// Specifying a color and background color
s += "<li>Bar Fully Colored<Chart:Bar margin='3' values='10' colors='LightSteelBlue,Silver' ></li>";

// Using a transparent background color
s += "<li>Transparent Background<Chart:Bar margin='3' values='10' colors='LightSteelBlue,Transparent' ><hr></li>";

// Shading effect modes.
s += "<li>Bar Shading 1<Chart:Bar margin='3' values='10' shading='1' color='LightSteelBlue'></li>";
s += "<li>Bar Shading 2<Chart:Bar margin='3' values='10' shading='2' color='PeachPuff'></li>";
s += "<li>Bar Shading 3<Chart:Bar margin='3' values='10' shading='3' color='Lavender'></li>";
s += "<li>Bar Shading 4<Chart:Bar margin='3' values='10' shading='4' color='LightSteelBlue'></li>";
s += "<li>Bar Shading 5<Chart:Bar margin='3' values='10' shading='5' color='Aquamarine'></li>";
s += "<li>Bar Shading 6<Chart:Bar margin='3' values='10' shading='6' color='LightSteelBlue'></li>";
s += "<li>Bar Shading 7<Chart:Bar margin='3' values='10' shading='7' color='LightSteelBlue'><hr></li>";

// Specifying a new size
s += "<li>Bar with specified size<Chart:Bar margin='3' values='10' max='20' width='150' height='15' color='Bisque'>";

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 several features of the Bar microChart.
Chart.JS.Enabled = True
Chart.Size = "450x500"
Chart.TempDirectory = "temp"
Chart.Background.Color = Color.FromArgb(249,249,255)
Chart.ChartArea.ClearColors()
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
Chart.Margin = "10"

Dim s As String = "Bar Type Options<hr><ul style='list-style-type:none !important;'>"

s &= "<li>Plain Bar<Chart:Bar margin='3' values='10' ></li>"

' Specifying a scale maximum/minimum and negative values
s &= "<li>Bar with scale max set<Chart:Bar margin='3' values='10' max='20'></li>"
s &= "<li>Bar with scale max & min<Chart:Bar margin='3' values='10' max='20' min='-20'></li>"
s &= "<li>Bar with negative values<Chart:Bar margin='3' values='-10' max='0'><hr></li>"

' Specifying a color and background color
s &= "<li>Bar Fully Colored<Chart:Bar margin='3' values='10' colors='LightSteelBlue,Silver' ></li>"

' Using a transparent background color
s &= "<li>Transparent Background<Chart:Bar margin='3' values='10' colors='LightSteelBlue,Transparent' ><hr></li>"

' Shading effect modes.
s &= "<li>Bar Shading 1<Chart:Bar margin='3' values='10' shading='1' color='LightSteelBlue'></li>"
s &= "<li>Bar Shading 2<Chart:Bar margin='3' values='10' shading='2' color='PeachPuff'></li>"
s &= "<li>Bar Shading 3<Chart:Bar margin='3' values='10' shading='3' color='Lavender'></li>"
s &= "<li>Bar Shading 4<Chart:Bar margin='3' values='10' shading='4' color='LightSteelBlue'></li>"
s &= "<li>Bar Shading 5<Chart:Bar margin='3' values='10' shading='5' color='Aquamarine'></li>"
s &= "<li>Bar Shading 6<Chart:Bar margin='3' values='10' shading='6' color='LightSteelBlue'></li>"
s &= "<li>Bar Shading 7<Chart:Bar margin='3' values='10' shading='7' color='LightSteelBlue'><hr></li>"

' Specifying a new size
s &= "<li>Bar with specified size<Chart:Bar margin='3' values='10' max='20' width='150' height='15' color='Bisque'>"

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 FilenameJsMicroBarOptions.aspx
Version9.2
Uses DatabaseNo

JS Charting

Gallery

JS Bar Options