About
RGraph is a JavaScript charts library based on
HTML5 SVG and canvas. RGraph is mature (over 15 years
old) and has a wealth of features making it an ideal
choice to use for showing charts on your website.
Download
Get the latest version of RGraph (version 6.19, 28th September 2024) from
the download page. You can read the changelog here. There's also older versions available,
minified files and links to cdnjs.com hosted libraries.
License
RGraph can be used for free under the GPL or if
that doesn't suit your situation there's an
inexpensive (£129) commercial license available.Scatter chart issue: The xaxisScaleFormatter property is not working as expected
Posted by sho at 11:20 on Friday 6th September 2024 [link]
"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>
```
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>
```
Posted by Richard at 13:57 on Friday 6th September 2024 [link]
I've taken your configuration, massaged it a little and put it here:
https://www.rgraph.net/tests/canvas.scatter/xaxisScaleFormatter.html
You were using an old format for the xaxisScaleFormatter function so I've updated that. Here's the source code for the chart that's in that page:
scatter = new RGraph.Scatter({
id: "cvs",
data: rawData,
options: {
marginLeft: 50,
marginRight: 50,
marginTop: 50,
marginBottom: 50,
tooltipsFormattedKeyColors: ["black", "red"],
tooltipsCss: {
fontSize: "16pt",
boxShadow: "",
textAlign: "left",
},
xaxisScale: true,
xaxisScaleMax: 1.25 * abs_max,
xaxisScaleMin: -1.25 * abs_max,
xaxisScaleDecimals: 2,
xaxisTickmarks: false,
xaxisLabelsCount: 5,
xaxisScaleFormatter: function (opt)
{
return parseFloat(opt.number).toFixed(3);
},
yaxisScaleMax: 1.25 * abs_max,
yaxisScaleMin: -1.25 * abs_max,
yaxisScaleDecimals: 2,
backgroundGridColor: "#eee",
textSize: 16
},
}).draw();
https://www.rgraph.net/tests/canvas.scatter/xaxisScaleFormatter.html
You were using an old format for the xaxisScaleFormatter function so I've updated that. Here's the source code for the chart that's in that page:
scatter = new RGraph.Scatter({
id: "cvs",
data: rawData,
options: {
marginLeft: 50,
marginRight: 50,
marginTop: 50,
marginBottom: 50,
tooltipsFormattedKeyColors: ["black", "red"],
tooltipsCss: {
fontSize: "16pt",
boxShadow: "",
textAlign: "left",
},
xaxisScale: true,
xaxisScaleMax: 1.25 * abs_max,
xaxisScaleMin: -1.25 * abs_max,
xaxisScaleDecimals: 2,
xaxisTickmarks: false,
xaxisLabelsCount: 5,
xaxisScaleFormatter: function (opt)
{
return parseFloat(opt.number).toFixed(3);
},
yaxisScaleMax: 1.25 * abs_max,
yaxisScaleMin: -1.25 * abs_max,
yaxisScaleDecimals: 2,
backgroundGridColor: "#eee",
textSize: 16
},
}).draw();