- Range
- Logarithmic base
- Logarithmic interval
Contact Support
Logarithmic axis in EJ2 JavaScript 3D Chart control
10 Jan 202416 minutes to read
Logarithmic axis uses logarithmic scale and it is very useful in visualizing data, when it has numerical values in both lower order of magnitude (eg: 10-6) and higher order of magnitude (eg: 106).
var chartData = [
{ x: new Date(1995, 0, 1), y: 80 }, { x: new Date(1996, 0, 1), y: 200 },
{ x: new Date(1997, 0, 1), y: 400 }, { x: new Date(1998, 0, 1), y: 600 },
{ x: new Date(1999, 0, 1), y: 700 }, { x: new Date(2000, 0, 1), y: 1400 },
{ x: new Date(2001, 0, 1), y: 2000 }, { x: new Date(2002, 0, 1), y: 4000 },
{ x: new Date(2003, 0, 1), y: 6000 }, { x: new Date(2004, 0, 1), y: 8000 },
{ x: new Date(2005, 0, 1), y: 11000 }
];
var chart3D = new ej.charts.Chart3D({
primaryXAxis: {
valueType: 'DateTime'
},
primaryYAxis:
{
valueType: 'Logarithmic'
},
series: [
{
type: 'Column', xName: 'x', yName: 'y',
dataSource: chartData
}
],
wallColor: 'transparent',
enableRotation: true,
rotation: 7,
tilt: 10,
depth: 100
}, '#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Note: To use logarithmic axis, we need to inject
Logarithmic3D
module using theChart3D.Inject(Logarithmic3D)
method and set thevalueType
of the axis to Logarithmic.
Range
The range of an axis will be calculated automatically based on the provided data and it can also be customized by using the minimum
, maximum
and interval
properties of the axis.
var chartData = [
{ x: new Date(1995, 0, 1), y: 80 }, { x: new Date(1996, 0, 1), y: 200 },
{ x: new Date(1997, 0, 1), y: 400 }, { x: new Date(1998, 0, 1), y: 600 },
{ x: new Date(1999, 0, 1), y: 700 }, { x: new Date(2000, 0, 1), y: 1400 },
{ x: new Date(2001, 0, 1), y: 2000 }, { x: new Date(2002, 0, 1), y: 4000 },
{ x: new Date(2003, 0, 1), y: 6000 }, { x: new Date(2004, 0, 1), y: 8000 },
{ x: new Date(2005, 0, 1), y: 11000 }
];
var chart3D = new ej.charts.Chart3D({
primaryXAxis: {
valueType: 'DateTime'
},
primaryYAxis:
{
valueType: 'Logarithmic',
minimum: 100,
maximum: 10000,
interval: 1000
},
series: [
{
type: 'Column', xName: 'x', yName: 'y',
dataSource: chartData
}
],
wallColor: 'transparent',
enableRotation: true,
rotation: 7,
tilt: 10,
depth: 100
}, '#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Logarithmic base
Logarithmic base can be customized by using the logBase
property of the axis. For example when the logBase
is 5, the axis values follows 5-2, 5-1, 50, 51, 52 etc.
var chartData = [
{ x: new Date(1995, 0, 1), y: 80 }, { x: new Date(1996, 0, 1), y: 200 },
{ x: new Date(1997, 0, 1), y: 400 }, { x: new Date(1998, 0, 1), y: 600 },
{ x: new Date(1999, 0, 1), y: 700 }, { x: new Date(2000, 0, 1), y: 1400 },
{ x: new Date(2001, 0, 1), y: 2000 }, { x: new Date(2002, 0, 1), y: 4000 },
{ x: new Date(2003, 0, 1), y: 6000 }, { x: new Date(2004, 0, 1), y: 8000 },
{ x: new Date(2005, 0, 1), y: 11000 }
];
var chart3D = new ej.charts.Chart3D({
primaryXAxis: {
valueType: 'DateTime'
},
primaryYAxis:
{
valueType: 'Logarithmic',
logBase: 2
},
//Initializing Chart Series
series: [
{
type: 'Column', xName: 'x', yName: 'y', columnSpacing: 0.1,
dataSource: chartData
}
],
wallColor: 'transparent',
enableRotation: true,
rotation: 7,
tilt: 10,
depth: 100
}, '#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Logarithmic interval
The interval of the logarithmic axis can be customized by using the interval
property in the axis. When the logarithmic base is 10 and logarithmic interval is 2, then the axis labels are placed at an interval of 102. The default value of the interval
is 1.
var chartData = [
{ x: new Date(1995, 0, 1), y: 80 }, { x: new Date(1996, 0, 1), y: 200 },
{ x: new Date(1997, 0, 1), y: 400 }, { x: new Date(1998, 0, 1), y: 600 },
{ x: new Date(1999, 0, 1), y: 700 }, { x: new Date(2000, 0, 1), y: 1400 },
{ x: new Date(2001, 0, 1), y: 2000 }, { x: new Date(2002, 0, 1), y: 4000 },
{ x: new Date(2003, 0, 1), y: 6000 }, { x: new Date(2004, 0, 1), y: 8000 },
{ x: new Date(2005, 0, 1), y: 11000 }
];
var chart3D = new ej.charts.Chart3D({
primaryXAxis: {
valueType: 'DateTime'
},
primaryYAxis:
{
valueType: 'Logarithmic',
interval: 2
},
series: [
{
type: 'Column', xName: 'x', yName: 'y',
dataSource: chartData
}
],
wallColor: 'transparent',
enableRotation: true,
rotation: 7,
tilt: 10,
depth: 100
}, '#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>