title: Convert JSP code into JavaScript for canvasJS
body: <p>I'm trying to get this <a href="http://canvasjs.com/spring-mvc-charts/chart-zoom-pan" rel="nofollow noreferrer">canvasJS line chart</a> to render using thymeleaf rather than JSP.</p>
  
  <p>It has the following loop in jsp that I need to convert to javascript. However I'm not proficient in javascript </p>
  
  <pre><code>&lt;c:forEach items="${dataPointsList}" var="dataPoints" varStatus="loop"&gt; 
      &lt;c:forEach items="${dataPoints}" var="dataPoint"&gt;
          xValue = parseInt("${dataPoint.x}");
          yValue = parseFloat("${dataPoint.y}");
          dps[parseInt("${loop.index}")].push({
              x : xValue,
              y : yValue,
          });     
      &lt;/c:forEach&gt;    
  &lt;/c:forEach&gt; 
  </code></pre>
  
  <p>The above $dataPointList is created in java as follows</p>
  
  <pre><code>static List&lt;Map&lt;Object, Object&gt;&gt; dataPoints1 = new ArrayList&lt;Map&lt;Object, Object&gt;&gt;();
  
      static {
          int limit = 50000;
          int y = 100;
          Random rand = new Random();
  
          for (int i = 0; i &lt; limit; i += 1) {
              y += rand.nextInt(11) - 5;
              map = new HashMap&lt;Object, Object&gt;();
              map.put("x", i);
              map.put("y", y);
              dataPoints1.add(map);
          }
  
          list.add(dataPoints1);
      }
  
      public static List&lt;List&lt;Map&lt;Object, Object&gt;&gt;&gt; getCanvasjsDataList() {
          return list;
      }
  </code></pre>
  
  <p>I've tried the following however dps[parseInt(i)].push({ gives a type error. I'm not sure how to create the required data structure for canvasJS given the datalist defined in java.</p>
  
  <pre><code>  &lt;script src="http://canvasjs.com/assets/script/canvasjs.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" th:inline="none" class="init"&gt;
              /*&lt;![CDATA[*/
              window.onload = function (e) {
                  var dps = [[]];
                  var chart = new CanvasJS.Chart("chartContainer", {
                      theme: "light2", // "light1", "dark1", "dark2"
                      animationEnabled: true,
                      zoomEnabled: true,
                      title: {
                          text: "Try Zooming and Panning"
                      },
                      data: [{
                              type: "area",
                              dataPoints: dps[0]
                          }]
                  });
  
                  var xValue;
                  var yValue;
  
                  var dataPointsList = /*[[${dataPointsList}]]*/ 'default';
  
                  for (var i = 0; i &lt; dataPointsList.length; i++) {
                      var dataPoints = dataPointsList[i];
                      for (var j = 0; j &lt; dataPoints.length; j++) {
                          dps[parseInt(i)].push({
                          x : dataPoints[j].x,
                          y : dataPoints[j].y,
                      });     
                      }
                  }
  
  
                  chart.render();
  
              }
              /*]]&gt;*/
          &lt;/script&gt;
  </code></pre>