New post
Question
· Jan 3

CSP variable interaction with JSP

#CSP #JavaScript #Ensemble #InterSystems IRIS

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.

Product version: Ensemble 2017.1
$ZV: Cache for UNIX (Oracle Solaris for SPARC-64) 2017.2.2 (Build 865U) Mon Jun 25 2018 10:58:52 EDT
Discussion (8)2
Log in or sign up to continue
Robert Cemper · Jan 3

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 with alert();
 

<csp:WHILE CONDITION="resultSet.Next()">     

 <!-- xValues.push(#(resultSet.Get("StatsDate"))#)
  yValues.push(#(resultSet.Get("Value"))#) -->
  
 <p>#(resultSet.Get("StatsDate"))#<br>#(resultSet.Get("Value"))#</p>
 
 <script LANGUAGE="JavaScript">
 alert(#(resultSet.Get("StatsDate"))#+'>>>'+#(resultSet.Get("Value"))#);
 </script>

</csp:WHILE>
1 0