"Dear RGraph Support Team,
I hope this message finds you well. I am currently working on a project that involves using the RGraph Scatter Chart, and I encountered an issue with the xaxisScaleFormatter functionality. Despite properly configuring the formatter function, it does not appear to be triggered during the graph rendering, and as a result, the X-axis labels are not being formatted as expected.
Here are the steps I have taken to resolve the issue:
Verified that xaxisScaleMin and xaxisScaleMax are set correctly.
Updated to the latest version of RGraph (6.18).
Simplified the graph configuration to isolate the issue.
However, the problem persists. I would greatly appreciate any guidance or suggestions on how to address this issue. If this is a bug, I hope this report can help improve the library.
Thank you for your time and assistance.
Best regards,
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="
https://www.rgraph.net/libraries/RGraph.common.core.js"></script>
<script src="
https://www.rgraph.net/libraries/RGraph.scatter.js"></script>
</head>
<style>
#myDiv {
width: 600px;
height: 600px;
}
</style>
<body>
<div id="myDiv"></div>
<p>aaa</p>
<script>
tooltip = "%{key}";
function SetupBalanceChart(
divChartID,
canvasID,
balanceChartData
// chartLabels
) {
// console.log(balanceChartData);
var chartDiv = document.getElementById(divChartID);
while (chartDiv.firstChild) {
chartDiv.removeChild(chartDiv.firstChild);
// ????
}
// chartLabels.showTitle = false; // V3.0
SetupBalanceChart2(
divChartID,
0,
1,
canvasID,
balanceChartData
// chartLabels
);
}
function SetupBalanceChart2(
divChartID,
chartNo,
nCharts,
canvasID,
balanceChartData
// chartLabels
) {
var divChart = document.getElementById(divChartID);
// var style =
// chartNo == gDataTBIndex ? "display:block;" : "display:none;";
var style = "display:block;";
// The canvas is square for this chart:
var divWidth = divChart.clientWidth;
var divHeight = divChart.clientHeight;
var chartSize = Math.min(divWidth, divHeight);
var lm = 0;
if (chartSize < divWidth) {
lm = (divWidth - chartSize) / 2;
}
// Create the chart container
var divBCn = document.createElement("div");
divBCn.id = divChartID + (chartNo + 1);
divBCn.style = style;
// Create the main canvas
var canvas = document.createElement("canvas");
canvas.id = canvasID;
canvas.width = chartSize;
canvas.height = chartSize;
canvas.style.marginLeft = lm + "px";
divBCn.appendChild(canvas);
// Create the scatter canvas
var scatterCanvas = document.createElement("canvas");
scatterCanvas.id = canvasID + "_scatter";
scatterCanvas.width = chartSize;
scatterCanvas.height = chartSize;
scatterCanvas.classList.add("balance_scatter");
scatterCanvas.style.marginLeft = lm + "px";
divBCn.appendChild(scatterCanvas);
divChart.appendChild(divBCn);
canvas = document.getElementById(scatterCanvas.id);
var dataCount = balanceChartData.rawData.x.length;
var rawData = [];
var min_x = 1000,
max_x = 0,
min_y = 1000,
max_y = 0;
for (var i = 0; i < dataCount; i++) {
rawData[i] = [
balanceChartData.rawData.y[i] / 125.0,
balanceChartData.rawData.z[i] / 125.0,
];
if (rawData[i][0] > max_x) max_x = rawData[i][0];
if (rawData[i][0] < min_x) min_x = rawData[i][0];
if (rawData[i][1] > max_y) max_y = rawData[i][1];
if (rawData[i][1] < min_y) min_y = rawData[i][1];
}
var abs_max = Math.max(
Math.abs(min_x),
Math.abs(max_x),
Math.abs(min_y),
Math.abs(max_y)
);
var xaxisLabels = [];
var min = -1.25 * abs_max;
var max = 1.25 * abs_max;
var interval = (max - min) / 5;
for (var i = 0; i < 6; i++) {
xaxisLabels.push((min + i * interval).toFixed(2));
}
scatter = new RGraph.Scatter({
id: "cvs",
data: rawData,
options: {
xaxis: true,
marginLeft: 50,
marginRight: 50,
marginTop: 50,
marginBottom: 50,
tooltipsFormattedKeyColors: ["black", "red"],
tooltipsCss: {
fontSize: "16pt",
boxShadow: "",
textAlign: "left",
},
xaxisScaleMax: 1.25 * abs_max,
xaxisScaleMin: -1.25 * abs_max,
yaxisScaleMax: 1.25 * abs_max,
yaxisScaleMin: -1.25 * abs_max,
yaxisScaleDecimals: 2,
backgroundGridColor: "#eee",
xaxisLabels: xaxisLabels,
xaxisTickmarks: false,
textSize: 16,
xaxisLabelsCount: 5,
xaxisScaleFormatter: function (obj, num) {
return num.toFixed(2);
},
},
}).draw();
var canvas = document.getElementById("cvs");
var context = canvas.getContext("2d");
var marginLeft = scatter.get("marginLeft");
var marginRight = scatter.get("marginRight");
var marginTop = scatter.get("marginTop");
var marginBottom = scatter.get("marginBottom");
context.beginPath();
context.moveTo(marginLeft, canvas.height / 2);
context.lineTo(canvas.width - marginRight, canvas.height / 2);
context.strokeStyle = "black";
context.lineWidth = 2;
context.stroke();
context.beginPath();
var xCenter =
marginLeft + (canvas.width - marginLeft - marginRight) / 2;
context.moveTo(xCenter, marginTop);
context.lineTo(xCenter, canvas.height - marginBottom);
context.strokeStyle = "#000";
context.lineWidth = 2;
context.stroke();
if (
document
.getElementById("pgChart")
.classList.contains("ui-page-active")
) {
var tbl =
"<table bgcolor='#EFEFEF' style='font-size: 13px;margin: 0 auto;width: 90%;border-collapse:collapse;' cellpadding='8' cellspacing='2'>";
tbl += "<tr style='border-bottom:1px #FEFEFE solid;'><td></td>";
tbl += "<td align=center style='font-size: 9px'>X?(??)</td>";
tbl += "<td align=center style='font-size: 9px'>Y?(??)</td>";
tbl += "<td align=center style='font-size: 9px'>Z?(??)</td>";
tbl += "</tr>";
tbl += "<tr style='border-bottom:1px #FEFEFE solid;'><td>RMS</td>";
tbl +=
"<td align=center>" + gSummaryData.data[0].reduced_si_x + "</td>";
tbl +=
"<td align=center>" + gSummaryData.data[0].reduced_si_y + "</td>";
tbl +=
"<td align=center>" + gSummaryData.data[0].reduced_si_z + "</td>";
tbl += "</tr>";
tbl +=
"<tr style='border-bottom:1px #FEFEFE solid;'><td>RMS??</td>";
tbl +=
"<td align=center colspan=3>" +
(
(gSummaryData.data[0].reduced_si_x +
gSummaryData.data[0].reduced_si_y +
gSummaryData.data[0].reduced_si_z) /
3
).toFixed(3) +
"</td>";
tbl += "</tr>";
tbl += "</table><br><br>";
tbl += "<div style='text-align:center;'>??</div>\n";
tbl += createSumaryTable(
gSummaryData.data[0].xyz,
[
gSummaryData.data[0].qt2,
gSummaryData.data[0].qt1,
gSummaryData.data[0].qt3,
gSummaryData.data[0].qt4,
],
gSummaryData.data[0].totalNormAverage,
gSummaryData.data[0].totalNormStdDev
);
tbl += "<br><br>";
tbl += "<div style='text-align:center;'>??50%??</div>\n";
tbl += createSumaryTable(
gSummaryData.data[0].xyz50,
[
gSummaryData.data[0].qt2_50,
gSummaryData.data[0].qt1_50,
gSummaryData.data[0].qt3_50,
gSummaryData.data[0].qt4_50,
],
gSummaryData.data[0].totalNormAverage50,
gSummaryData.data[0].totalNormStdDev50
);
tbl += "<br><br>";
divChart.insertAdjacentHTML("beforeend", tbl);
}
}
const balanceChartData = {
rawData: {
x: [
-15.0935, -24.0935, -24.0935, -5.0935, 0.9065, -24.0935, -35.0935,
31.9065, 46.9065, -28.0935, -14.0935, -21.0935, 11.9065, 5.9065,
-24.0935, -59.0935, -46.0935, -26.0935, 10.9065, 47.9065, 3.9065,
99.9065, 53.9065, 5.9065, 2.9065, -32.0935, -46.0935, -31.0935,
-11.0935, -13.0935, -31.0935, 7.9065, 125.9065, 43.9065, -6.0935,
-45.0935, -19.0935, -14.0935, -44.0935, -56.0935, -46.0935, -1.0935,
46.9065, 80.9065, -21.0935, 44.9065, 111.9065, 11.9065, 6.9065,
-5.0935, -30.0935, -41.0935, -35.0935, -32.0935, -57.0935, -38.0935,
112.9065, 116.9065, -3.0935, -32.0935, -17.0935, -16.0935, -30.0935,
-52.0935, -74.0935, -43.0935, 13.9065, 83.9065, 77.9065, -4.0935,
78.9065, 91.9065, 18.9065, 18.9065, -3.0935, -42.0935, -55.0935,
-61.0935, -46.0935, -67.0935, -6.0935, 153.9066, 94.9065, 7.9065,
3.9065, 4.9065, 2.9065, -16.0935, -35.0935, -77.0935, -93.0935,
-58.0935, 7.9065, 57.9065, 40.9065, 59.9065, 49.9065, 18.9065,
-3.0935, -27.0935, -50.0935, -66.0935, -59.0935, -70.0935, -88.0935,
58.9065, 216.9066,
],
y: [
-18.028, -19.028, 7.972, 39.972, 45.972, 9.972, -17.028, -72.028,
-39.028, 72.972, 35.972, -21.028, -5.028, 17.972, 6.972, -19.028,
-35.028, -3.028, 50.972, 147.972, -30.028, -89.028, -24.028, 26.972,
-10.028, -24.028, -4.028, 15.972, 48.972, 21.972, -32.028, -100.028,
-69.028, 63.972, 108.972, 1.972, -48.028, -17.028, 13.972, 0.972,
-21.028, 3.972, 32.972, 140.972, 21.972, -107.028, -55.028, 27.972,
19.972, -25.028, -23.028, -9.028, 23.972, 65.972, 24.972, -40.028,
-147.028, -44.028, 166.972, 22.972, -53.028, -6.028, 13.972,
-19.028, -45.028, -0.028, 42.972, 61.972, 155.972, 16.972, -103.028,
-56.028, 24.972, 9.972, -37.028, -34.028, -6.028, 48.972, 74.972,
17.972, -47.028, -162.028, 57.972, 139.972, -20.028, -61.028,
-29.028, 7.972, -10.028, -44.028, -23.028, 6.972, 18.972, 145.972,
24.972, -120.028, -6.028, 61.972, -0.028, -31.028, -12.028, 15.972,
31.972, 5.972, -26.028, -49.028, -114.028,
],
z: [
-0.5794, -1.5794, 2.4206, 2.4206, 4.4206, -29.5794, 70.4206,
117.4206, 49.4206, 37.4206, 12.4206, 36.4206, -11.5794, -15.5794,
10.4206, 10.4206, 6.4206, -7.5794, 60.4206, 173.4206, 52.4206,
7.4206, 17.4206, 9.4206, -15.5794, -13.5794, -1.5794, 11.4206,
-7.5794, -28.5794, 13.4206, 156.4206, 67.4206, 70.4206, -16.5794,
32.4206, 13.4206, -27.5794, -4.5794, 13.4206, -14.5794, -25.5794,
2.4206, 111.4206, 21.4206, 40.4206, -29.5794, 1.4206, -29.5794,
-39.5794, -38.5794, -22.5794, -8.5794, -7.5794, -28.5794, 61.4206,
91.4206, 22.4206, -31.5794, 0.4206, -2.5794, -46.5794, -35.5794,
-5.5794, -26.5794, -10.5794, -55.5794, -36.5794, 103.4206, 15.4206,
4.4206, -63.5794, -22.5794, -41.5794, -51.5794, -37.5794, -14.5794,
-12.5794, -8.5794, -44.5794, 59.4206, 19.4206, 22.4206, -49.5794,
14.4206, -26.5794, -40.5794, -46.5794, -33.5794, 3.4206, -20.5794,
-30.5794, 30.4206, 86.4206, -56.5794, -81.5794, -69.5794, -76.5794,
-79.5794, -56.5794, -47.5794, -38.5794, -12.5794, -20.5794,
-30.5794, 85.4206, -62.5794,
],
},
};
SetupBalanceChart("myDiv", "cvs", balanceChartData);
</script>
</body>
</html>
```