Gallery

Gallery > Axis And Scales

JS Axis Log Scale

Demonstrates using logarithmic scale with JSCharting.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">

void Page_Load(Object sender, EventArgs e)
{

// Demonstrates using Logarithmic axis scale with options..

// Set the chart type
Chart.Type = ChartType.Combo;
Chart.JS.Enabled = true;
Chart.JS.RenderCallback = "callbackFunc";
// Set the size
Chart.Width = 740;
Chart.Height = 400;
// Set the temp directory
Chart.TempDirectory = "temp";
// Debug mode. ( Will show generated errors if any )
Chart.Debug = false;

// Axis Labels
Chart.XAxis.Label.Text = "Linear";
Chart.YAxis.Label.Text = "Logarithmic";
Chart.YAxis.Scale = Scale.Logarithmic;
Chart.TitleBox.Visible = false;
Chart.LegendBox.Visible = false;
Chart.DefaultSeries.Type = SeriesType.Line;

// *DYNAMIC DATA NOTE*
// This sample uses random data to populate the chart. To populate
// a chart with database data see the following resources:
// - Classic samples folder
// - Help File > Data Tutorials
// - Sample: features/DataEngine.aspx
SeriesCollection mySC = getRandomData();

// Add the random data.
Chart.SeriesCollection.Add(mySC);

}

SeriesCollection getRandomData()
{
Random myR = new Random(1);
SeriesCollection SC = new SeriesCollection();
for (int a = 1; a < 2; a++)
{
Series s = new Series();
s.Name = "Series " + a;
for (int b = 2; b < 6; b++)
{
Element e = new Element();

e.XValue = b;
if (b == 2)
e.YValue = 6;
else if (b == 5)
e.YValue = 8500;
else
e.YValue = myR.Next(50,7000);
s.Elements.Add(e);
}
SC.Add(s);
}
return SC;
}
</script>
<style>
input[type=checkbox] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
</style>
</head>
<body>
<div style="font-family:Tahoma;font-size: 12px;max-width: 600px;height: 25px;margin: 0px auto; padding-left:90px;">
Log Base:
<select id="logbase" style="width:90px;" onchange="logBase(value)">
<option value="2">2</option>
<option value="5">5</option>
<option value="10" selected="selected">10</option>
</select>
<label style=" font-family:Arial; font-size:small; margin-right:20px;"><input type="checkbox" name="checkbox" onchange="invert(this)" onclick="invert(this)" value="value">Invert</label>
<label style=" font-family:Arial; font-size:small; margin-right:20px;"><input type="checkbox" name="checkbox" onchange="minorTicks(this)" onclick="minorTicks(this)" value="value">SmartMinorTicks</label>
<label style=" font-family:Arial; font-size:small; margin-right:20px;"><input type="checkbox" name="checkbox" onchange="staticInterval(this)" onclick="staticInterval(this)" value="value">StaticInterval</label>
</div>
<div style="max-width: 700px;margin: 0px auto;">
<dotnet:Chart ID="Chart" runat="server" />
</div>
<script type="text/javascript">
var logBase, invert, minorTicks, staticInterval;
function callbackFunc(chart) {
yAxisOption = function(config) { chart.axes('y').options(config); }
logBase = function(v) { yAxisOption({ scale_logBase: parseInt(v) }); }
minorTicks = function(v) { yAxisOption({ scale_minorInterval: v.checked ? 'auto' : 'none' }); }
staticInterval = function(v) { yAxisOption({ scale_interval: v.checked ? 2000 : 'auto' }); }
invert = function (v) { yAxisOption({ scale_invert: v.checked }); }
}
</script>
</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

' Demonstrates using Logarithmic axis scale with options..

' Set the chart type
Chart.Type = ChartType.Combo
Chart.JS.Enabled = True
Chart.JS.RenderCallback = "callbackFunc"
' Set the size
Chart.Width = 740
Chart.Height = 400
' Set the temp directory
Chart.TempDirectory = "temp"
' Debug mode. ( Will show generated errors if any )
Chart.Debug = False

' Axis Labels
Chart.XAxis.Label.Text = "Linear"
Chart.YAxis.Label.Text = "Logarithmic"
Chart.YAxis.Scale = Scale.Logarithmic
Chart.TitleBox.Visible = False
Chart.LegendBox.Visible = False
Chart.DefaultSeries.Type = SeriesType.Line

' *DYNAMIC DATA NOTE*
' This sample uses random data to populate the chart. To populate
' a chart with database data see the following resources:
' - Classic samples folder
' - Help File > Data Tutorials
' - Sample: features/DataEngine.aspx
Dim mySC As SeriesCollection = getRandomData()

' Add the random data.
Chart.SeriesCollection.Add(mySC)

End Sub

Function getRandomData() As SeriesCollection
Dim myR As Random = New Random(1)
Dim SC As SeriesCollection = New SeriesCollection()
For a As Integer = 1 To 1
Dim s As Series = New Series()
s.Name = "Series " & a
For b As Integer = 2 To 5
Dim e As Element = New Element()

e.XValue = b
If b = 2 Then
e.YValue = 6
ElseIf b = 5 Then
e.YValue = 8500
Else
e.YValue = myR.Next(50,7000)
End If
s.Elements.Add(e)
Next b
SC.Add(s)
Next a
Return SC
End Function
</script>
<style>
input[type=checkbox] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
</style>
</head>
<body>
<div style="font-family:Tahoma;font-size: 12px;max-width: 600px;height: 25px;margin: 0px auto; padding-left:90px;">
Log Base:
<select id="logbase" style="width:90px;" onchange="logBase(value)">
<option value="2">2</option>
<option value="5">5</option>
<option value="10" selected="selected">10</option>
</select>
<label style=" font-family:Arial; font-size:small; margin-right:20px;"><input type="checkbox" name="checkbox" onchange="invert(this)" onclick="invert(this)" value="value">Invert</label>
<label style=" font-family:Arial; font-size:small; margin-right:20px;"><input type="checkbox" name="checkbox" onchange="minorTicks(this)" onclick="minorTicks(this)" value="value">SmartMinorTicks</label>
<label style=" font-family:Arial; font-size:small; margin-right:20px;"><input type="checkbox" name="checkbox" onchange="staticInterval(this)" onclick="staticInterval(this)" value="value">StaticInterval</label>
</div>
<div style="max-width: 700px;margin: 0px auto;">
<dotnet:Chart ID="Chart" runat="server" />
</div>
<script type="text/javascript">
var logBase, invert, minorTicks, staticInterval;
function callbackFunc(chart) {
yAxisOption = function(config) { chart.axes('y').options(config); }
logBase = function(v) { yAxisOption({ scale_logBase: parseInt(v) }); }
minorTicks = function(v) { yAxisOption({ scale_minorInterval: v.checked ? 'auto' : 'none' }); }
staticInterval = function(v) { yAxisOption({ scale_interval: v.checked ? 2000 : 'auto' }); }
invert = function (v) { yAxisOption({ scale_invert: v.checked }); }
}
</script>
</body>
</html>

Sample FilenameJsAxisLogScale.aspx
Version8.4
Uses DatabaseNo

JS Charting

Gallery

JS Axis Log Scale