Gallery

Gallery > Micro Charts

JS Scale Options

Demonstrates scale type microchart options.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>

<script runat="server">

void Page_Load(Object sender, EventArgs e)
{
// Demonstrates scale type microchart options.
Chart.JS.Enabled = true;
Chart.Size = "450x500";
Chart.TempDirectory = "temp";
Chart.Background.Color = Color.FromArgb(249,249,255);

Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;

Chart.ObjectChart = new dotnetCHARTING.Label(getStr());

}

string getStr()
{
string s = "Scale Type Options<hr><ul>";
// A maximum value must be set to get a basic micro scale.
s += "<li>Plain scale<chart:scale margin=10 max='100'></li>";

// positive and negative values can be used with micro scale ranges.
s += "<li>scale with min/max<chart:scale margin=10 min='-45' max='45'></li>";

// scales can be colored using a single color or two colors to shade the axis and labels individually.
s += "<li>colored scale<chart:scale margin=10 max='80' color='blue'></li>";
s += "<li>multi color scale<chart:scale margin=10 max='75' colors='blue,red'></li>";

// the value parameter can be used with tokens similar to using chart.xaxis.defaulttick.label.text enabling many possibilities.
s += "<li>scale with value template<chart:scale margin='10' max='100' value='$%value'></li>";

// by specifying an array of labels in the values parameter they are placed on the scale equidistant from each other.
s += "<li>scale with named intervals<chart:scale margin=10 values='bad,ok,good'></li>";

// inserting comma delimiters into the values parameter allows control over named label positions.
s += "<li>specifically positioned labels <chart:scale margin=10 values=',,a,,b,,c,'></li>";

s += "<li>Bottom Scale<Chart:Scale margin=10 width=100 orientation=bottom max='100'></li>";

s += "<li>Interval property<Chart:Scale margin=10 width=100 orientation=bottom max=4 interval=2></li>";

s += "<li>Overlap handling<chart:scale width=100 margin=10 values='Chris,Kay,David'></li>";
s += "</ul>";
return s;
}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>

<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates scale type microchart options.
Chart.JS.Enabled = True
Chart.Size = "450x500"
Chart.TempDirectory = "temp"
Chart.Background.Color = Color.FromArgb(249,249,255)

Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False

Chart.ObjectChart = New dotnetCHARTING.Label(getStr())

End Sub

Function getStr() As String
Dim s As String = "Scale Type Options<hr><ul>"
' A maximum value must be set to get a basic micro scale.
s &= "<li>Plain scale<chart:scale margin=10 max='100'></li>"

' positive and negative values can be used with micro scale ranges.
s &= "<li>scale with min/max<chart:scale margin=10 min='-45' max='45'></li>"

' scales can be colored using a single color or two colors to shade the axis and labels individually.
s &= "<li>colored scale<chart:scale margin=10 max='80' color='blue'></li>"
s &= "<li>multi color scale<chart:scale margin=10 max='75' colors='blue,red'></li>"

' the value parameter can be used with tokens similar to using chart.xaxis.defaulttick.label.text enabling many possibilities.
s &= "<li>scale with value template<chart:scale margin='10' max='100' value='$%value'></li>"

' by specifying an array of labels in the values parameter they are placed on the scale equidistant from each other.
s &= "<li>scale with named intervals<chart:scale margin=10 values='bad,ok,good'></li>"

' inserting comma delimiters into the values parameter allows control over named label positions.
s &= "<li>specifically positioned labels <chart:scale margin=10 values=',,a,,b,,c,'></li>"

s &= "<li>Bottom Scale<Chart:Scale margin=10 width=100 orientation=bottom max='100'></li>"

s &= "<li>Interval property<Chart:Scale margin=10 width=100 orientation=bottom max=4 interval=2></li>"

s &= "<li>Overlap handling<chart:scale width=100 margin=10 values='Chris,Kay,David'></li>"
s &= "</ul>"
Return s
End Function

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

Sample FilenameJsMicroScaleOptions.aspx
Version9.2
Uses DatabaseNo

JS Charting

Gallery

JS Scale Options