title: Google charts with jstl forEach
body: <p>Hi I am trying to render google chart on my java program. but it doesn't display at all. Google chart api is implemented in .jsp file. Since my java code delivers correct data (I checked with system print), there must be something wrong on my jsp file. specially [A] part.. 
  I am very new to this world. </p>
  
  <p>Can anyone point out what did I do wrong in .jsp file.</p>
  
  <p>my jsp file  </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
  
  var data = google.visualization.DataTable();
  data.addColumn('number', 'Data value');
  
  data.addRows([
      &lt;c:forEach var="dataIntValue" items="${dataInt}"&gt;
          ['${dataIntValue}'], //---- [A]
      &lt;/c:forEach&gt;
      ]);    
  
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  
  chart.draw(data, {width: 600, height: 340, min: 0});
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="chart_div" style="width: 1000px; height: 540px;"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Update</strong>
  when I look at the page source on browser.. it shows like this.. </p>
  
  <pre><code>    &lt;html&gt;
    &lt;head&gt;
      &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
  
          var data = google.visualization.DataTable();
          data.addColumn('number', 'Data Value');
          data.addRows([
  
                  ['100'], 
  
                  ['200'], 
  
                  ['300'], 
  
                  ['400'], 
  
                  ['500'], 
  
                  ['110'], 
  
                  ['120'], 
  
                  ['130'], 
  
                  ['140'], 
  
                  ['200'], 
  
              ]);    
          var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  
          chart.draw(data, {width: 1000, height: 540, min: 0});
        }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="chart_div" style="width: 1000px; height: 540px;"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and the values are right ones.. but I don't know it should be with this '' together.. Can that be problem? e.g. it shows this ['400'], but may be should like this [400] without ''? but I don't know why it is with ''? what did I do in my code... and why with '400'? not just the value 400...  </p>
  
  <p><strong>update 2</strong> 
  applied the comment advice and then, get a syntax error , can't compile at all.. </p>
  
  <p>what I did based on advice: remove the ' ' in the [A]
  so jsp file looks like this.. all same only [A] part is different by removing the ' '.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
  
          var data = google.visualization.DataTable();
          data.addColumn('number', 'Data Value');
          data.addRows([
              &lt;c:forEach var="dataIntValue" items="${dataInt}"&gt;
                  [${dataIntValue}], //---[A]
              &lt;/c:forEach&gt;   //----[B]
              ]);            //----[B]
          var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  
          chart.draw(data, {width: 1000, height: 540, min: 0});
        }   //----- [c]
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="chart_div" style="width: 1000px; height: 540px;"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>These are the syntax errors.. what I get after removing ' ' from [A]</p>
  
  <pre><code>Multiple annotations found at this line:
  - Syntax error on tokens, ArrayLiteralHeader expected 
   instead
  - Syntax error, insert "]" to complete 
   MemberExpression
  - Syntax error, insert ")" to complete Arguments
  - Syntax error on tokens, delete these tokens
  - Syntax error, insert "]" to complete ArrayLiteral
  </code></pre>
  
  <p><strong>result here: can compile but no charts appears on browser: Comments from (JB Nizet)=> What you posted is not an error you get at runtime. It's an error that your IDE, which tries to interpret your code as pure JavaScript, generates. The code is correct. Deploy it, run it, ans see if it works</strong> </p>
  
  <p><strong>update 3 &amp; solved: comma should be there in [A] and google chart code was problem should be like this:</strong></p>
  
  <p>working code: 
  1) changed to google.visualization.arrayToDataTable instead google.visualization.DataTable. 
  2) I was missing first column element in here (so should have 2 elements like this) <code>['${dataIntValue}', ${dataIntValue}],</code> instead with only one element this was wrong: [${dataIntValue}],</p>
  
  <p>Correct code=></p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
  
         //---[solution] modified from here
          var data = google.visualization.arrayToDataTable([
            ['number', 'Data Value'],
             &lt;c:forEach var="dataIntValue" items="${dataInt}"&gt;
                  ['${dataIntValue}', ${dataIntValue}], 
              &lt;/c:forEach&gt;
          ]);  //--- until here. 
  
          var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  
          chart.draw(data, {width: 600, height: 340, min: 0});
        }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="chart_div" style="width: 600px; height: 340px;"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>