CSP variable interaction with JSP
I wish to retrieve data from a cache table and then chart the results using javascript/chart.js. I have had numerous iterations of the code attempting to do this (none of which worked) and my latest iteration is shown below.
<html>
<head>
<title>Cache Server Page</title>
<!-- Include the Chart.js library -->
<script src="chart.umd.min.js"></script>
<csp:SQLQUERY NAME='resultSet' P1='A'>
select Value, StatsDate from Stats
</csp:SQLQUERY>
<script LANGUAGE="JavaScript">
// Initialize arrays to store data
var xValues = [];
var yValues = [];
</script>
<csp:WHILE CONDITION="resultSet.Next()">
xValues.push(#(resultSet.Get("StatsDate"))#)
yValues.push(#(resultSet.Get("Value"))#)
</csp:WHILE>
<script LANGUAGE="JavaScript">
document.addEventListener("DOMContentLoaded", function() {
// Create a line chart
var ctx = document.getElementById('lineChart').getContext('2d');
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: xValues,
datasets: [{
label: 'Y Values',
data: yValues,
fill: false,
borderColor: 'blue',
borderWidth: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: true
}
});
});
</script>
</head>
<body>
<h1>Line Graph Example</h1>
<canvas id="lineChart" width="20" height="10"></canvas>
</body>
</html>
This is successfully retrieving the data and displaying the page, but it displays the text:
xValues.push(12/29/2023) yValues.push(6) xValues.push(12/30/2023) yValues.push(1) xValues.push(12/31/2023) yValues.push(1) xValues.push(01/01/2024) yValues.push(1) xValues.push(01/02/2024) yValues.push(3) xValues.push(01/03/2024) yValues.push(122)
followed by an empty graph, because the push statements were treated as text.
I initially tried creating variables xValues, and yValues in ObjectScript SCRIPT using SET statements and then accessing them via javascript, but couldn't get that to work.
Is it possible to do what I am trying to achieve? Any tips would be greatly appreciated. TIA.
Comments
Objectscript variables are not accessible from JavaScript, objectscript is executed on the server and JavaScript is executed on the client.
My suggestion is, create a hidden html table from objectscript and read the values using JavaScript to create the array for the graph.
Thanks for your suggestion.
I suggest you create a json object in an objectscript method and call this method with an http request from your javascript to retrieve the object
Thanks for your suggestion.
there is a basic misunderstanding:
inside the <CSP:WHILE...> block you are in HTML context
but you issue instead JavaScript >>>> which just prints it out.
To illustrate this see this simple example:
But changing to JS_context solved my simple demo withalert();
<csp:WHILECONDITION="resultSet.Next()"><!-- xValues.push(#(resultSet.Get("StatsDate"))#)
yValues.push(#(resultSet.Get("Value"))#) --><p>#(resultSet.Get("StatsDate"))#<br>#(resultSet.Get("Value"))#</p><scriptLANGUAGE="JavaScript">
alert(#(resultSet.Get("StatsDate"))#+'>>>'+#(resultSet.Get("Value"))#);
</script></csp:WHILE>In ENSEMBLE default namespace SAMPLES holds a collection, CSP examples.
Thanks Robert, that is exactly what I was trying to achieve. Based on your response I changed it to the code below and the graph was displayed:
<csp:WHILE CONDITION="resultSet.Next()">
<script LANGUAGE="JavaScript">
xValues.push(#(resultSet.Get("StatsDate"))#)
yValues.push(#(resultSet.Get("Value"))#)
</script></csp:WHILE
Thanks for your suggestion.