Gallery

Gallery > Micro Charts

JS Scale Chart Combos

Demonstrates several ways MicroChart scales can be used with other micro charts.

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 ways MicroChart scales can be used with other micro charts.
Chart.JS.Enabled = true;
Chart.Size = "500x580";
Chart.TempDirectory = "temp";
Chart.Background.Color = Color.FromArgb(249,249,255);

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

string s = "<row>Scale & Chart Combos<hr>";

// A scale/Bar micro chart combo will require that the scale and bar maximum values are set equally.
s += "<row>Plain Bar & Scale<Chart:Scale max='20'>";
s += "<row> <Chart:Bar values='10' max='20' shading='1'><hr>";

// Similar situation where the scale labels show a $ char before the value.
s += "<row>Currency\\<Chart:Scale max='20' value='$%value'>";
s += "<row> <Chart:Bar values='10' max='20' shading='7'><hr>";

// Using a scale to indicate a time span represented by a sparkline.
s += "<row>Sparkline Range<Chart:Scale values='Jan,Feb' >";
s += "<row> <Chart:SparkLine values='10,8,7,8,9,9,8,7,6,5,5,6,5,4,3,4,12,5,5,6,8,9,9' colors='Gray,Red'><hr>";

// A progress bar and scale showing percent complete.
s += "<row>Progress\\<Chart:Scale max='100' value='%value%' >";
s += "<row> <Chart:Progress values='60' max='100'><hr>";

// This case is similar to the sparkline time range but a bar is used to indicate a range. The range shown is created by manipulating the bar scale min/max values.
s += "<row>Time Range <Chart:Scale values='2008,2010' >";
s += "<row> <Chart:Bar values='60' min='-50' max='100' shading='7'><hr>";

// A scale with labels placed at specific positions to mark specific positions.
s += "<row>Arbitrary Labels <Chart:Scale values=',,A,,B,,C,' >";
s += "<row> <Chart:Bullet values='15,10,4,8' min='0' max='20'><hr>";

s += "<row>24 Hour status <Chart:Scale values='Mon,Tue' width='130' >";
s += "<row> <Chart:heatmap cellSize=12x15 cells=10x1 verticalAlign=middle data='-4,-3,-2,-1,0,2,3,5,6,7,8' colors=blue,white,orange>";

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

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<style type="text/css">
ul {
list-style-type: none;
}
</style>
</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 ways MicroChart scales can be used with other micro charts.
Chart.JS.Enabled = True
Chart.Size = "500x580"
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 = "<row>Scale & Chart Combos<hr>"

' A scale/Bar micro chart combo will require that the scale and bar maximum values are set equally.
s &= "<row>Plain Bar & Scale<Chart:Scale max='20'>"
s &= "<row> <Chart:Bar values='10' max='20' shading='1'><hr>"

' Similar situation where the scale labels show a $ char before the value.
s &= "<row>Currency\<Chart:Scale max='20' value='$%value'>"
s &= "<row> <Chart:Bar values='10' max='20' shading='7'><hr>"

' Using a scale to indicate a time span represented by a sparkline.
s &= "<row>Sparkline Range<Chart:Scale values='Jan,Feb' >"
s &= "<row> <Chart:SparkLine values='10,8,7,8,9,9,8,7,6,5,5,6,5,4,3,4,12,5,5,6,8,9,9' colors='Gray,Red'><hr>"

' A progress bar and scale showing percent complete.
s &= "<row>Progress\<Chart:Scale max='100' value='%value%' >"
s &= "<row> <Chart:Progress values='60' max='100'><hr>"

' This case is similar to the sparkline time range but a bar is used to indicate a range. The range shown is created by manipulating the bar scale min/max values.
s &= "<row>Time Range <Chart:Scale values='2008,2010' >"
s &= "<row> <Chart:Bar values='60' min='-50' max='100' shading='7'><hr>"

' A scale with labels placed at specific positions to mark specific positions.
s &= "<row>Arbitrary Labels <Chart:Scale values=',,A,,B,,C,' >"
s &= "<row> <Chart:Bullet values='15,10,4,8' min='0' max='20'><hr>"

s &= "<row>24 Hour status <Chart:Scale values='Mon,Tue' width='130' >"
s &= "<row> <Chart:heatmap cellSize=12x15 cells=10x1 verticalAlign=middle data='-4,-3,-2,-1,0,2,3,5,6,7,8' colors=blue,white,orange>"

Chart.ObjectChart = New dotnetCHARTING.Label(s)

End Sub

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<style type="text/css">
ul {
list-style-type: none;
}
</style>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

Sample FilenameJsMicroScaleChartCombos.aspx
Version9.2
Uses DatabaseNo

JS Charting

Gallery

JS Scale Chart Combos