There are four types of axis: primary category axis, primary value axis, secondary category axis, and secondary value axis.
You can get or set the style, line style, tick position, tick label’s position, format, crosses, orientation,title, and gridline for these four axis using the following code.
You can get or set the gridline’s color, width and visibility.
Logarithmic Axes: SpreadJS supports logarithmic scales for the value axis.
Axis Label Position: SpreadJS supports set label position for axis as below enum type GC.Spread.Sheets.Charts.TickLabelPosition.
high
low
nextToAxis
none
Axis Orientation: SpreadJS supports setting the orientation of an axis
Display Unit: The Display Unit property allows you to display units like Million/Trillions as the value axis display instead of the actual large numbers. This feature is useful to conserve space and makes it easier to read.
Date axis: SpreadJS supports using a date axis with the below properties. You can adjust the date unit and date unit scale.
baseUnit
majorUnit
majorUnitScale
minorUnit
minorUnitScale
Crosses: SpreadJS supports set axis crosses as number type or below axis crosses enum type GC.Spread.Sheets.Charts.AxisCrossPoint.
automatic
maximum
minimum
var spread;
window.onload = function () {
spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
sheet.setValue(0, 1, "Apple");
sheet.setValue(0, 2, "Banana");
sheet.setValue(0, 3, "Pear");
sheet.setValue(1, 0, "People1");
sheet.setValue(2, 0, "People2");
sheet.setValue(3, 0, "People3");
for (var r = 1; r <= 3; r++) {
for (var c = 1; c <= 3; c++) {
sheet.setValue(r, c, parseInt(Math.random() * 100));
}
}
var dataArray = [
["Month", 'Fund Income', 'Stock Income', 'Bank Interest Income'],
[1, 100, 2, 9],
[2, -96, 15, 2],
[3, 53, 88, 8],
[4, -15, 150, 1],
[5, 77, -52, 3],
[6, 20, 66, 6],
];
sheet.setArray(0, 6, dataArray);
sheet.getRange(1, 7, 6, 3).formatter("$#,##0.00");
//add chart
var Charts = GC.Spread.Sheets.Charts;
var columnChart = sheet.charts.add('columnChart', Charts.ChartType.columnClustered, 10, 100, 400, 350);
var xyScatterChart = sheet.charts.add('xyScatterChart', GC.Spread.Sheets.Charts.ChartType.xyScatterSmooth, 420, 100, 400, 350, 'G1:J7');
var orientationChart = sheet.charts.add('orientationChart', Charts.ChartType.columnClustered, 1040, 100, 400, 350,'A1:D4');
var series = columnChart.series();
series.add({
chartType: Charts.ChartType.columnClustered,
axisGroup: Charts.AxisGroup.primary,
name: "Sheet1!$A$2",
xValues: "Sheet1!$B$1:$D$1",
yValues: "Sheet1!$B$2:$D$2"
});
series.add({
chartType: Charts.ChartType.columnClustered,
axisGroup: Charts.AxisGroup.primary,
name: "Sheet1!$A$3",
xValues: "Sheet1!$B$1:$D$1",
yValues: "Sheet1!$B$3:$D$3"
});
series.add({
chartType: Charts.ChartType.lineMarkers,
axisGroup: Charts.AxisGroup.secondary,
name: "Sheet1!$A$4",
xValues: "Sheet1!$B$1:$D$1",
yValues: "Sheet1!$B$4:$D$4"
});
var axes = columnChart.axes();
axes.primaryCategory.style.color = 'orange';
axes.primaryCategory.title.color = 'orange';
axes.primaryCategory.title.text = 'Primary Category Axis';
axes.primaryValue.style.color = 'red';
axes.primaryValue.title.color = 'red';
axes.primaryValue.title.text = 'Primary Value Logarithmic Axis';
axes.primaryValue.title.fontSize = 16;
axes.primaryValue.scaling = {
logBase: 2
};
axes.secondaryCategory.visible = true;
axes.secondaryCategory.style.color = 'green';
axes.secondaryCategory.title.color = 'green';
axes.secondaryCategory.title.text = 'Secondary Category Axis';
axes.secondaryCategory.title.fontSize = 16;
axes.secondaryValue.style.color = 'blue';
axes.secondaryValue.title.color = 'blue';
axes.secondaryValue.format = 'General';
axes.secondaryValue.title.text = 'Secondary Value Axis';
var columnChartTitle = columnChart.title();
columnChartTitle.text = "Product Sales";
columnChart.title(columnChartTitle);
columnChart.axes(axes);
var axes1 = xyScatterChart.axes();
var xyScatterChartTitle = xyScatterChart.title();
xyScatterChartTitle.text = "First Half Financial Income";
xyScatterChart.title(xyScatterChartTitle);
axes1.primaryCategory.crossPoint = 3;
xyScatterChart.axes(axes1);
var axes2 = orientationChart.axes();
var orientationChartTitle = orientationChart.title();
orientationChartTitle.text = "Product Sales(reverse order)";
orientationChart.title(orientationChartTitle);
axes2.primaryValue.scaling = {
orientation: GC.Spread.Sheets.Charts.AxisOrientation.maxMin
};
orientationChart.axes(axes2);
sheet.resumePaint();
};
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100% ;
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
