title: SpringBoot - Charts in Web Application
body: <p>I am using SpringBoot for my Web Application and I am trying to integrate some charts in one of my pages. I was wondering if anyone could help me or link me a tutorial of how to set the data properly in the javascript function which creates the chart.</p>
  
  <p>I'm using CanvasJS charts and the javascript function to create the chart looks like this</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  window.onload = function () {
  var chart = new CanvasJS.Chart("chartContainer",
  {
    title:{
      text: "Gaming Consoles Sold in 2012"
    },
     data: [
    {
       type: "pie",
     showInLegend: true,
     dataPoints: [
     {  y: 4181563, legendText:"PS 3", indexLabel: "PlayStation 3" },
     {  y: 2175498, legendText:"Wii", indexLabel: "Wii" },
     {  y: 3125844, legendText:"Xbox", indexLabel: "Xbox 360" },
     {  y: 1176121, legendText:"DS" , indexLabel: "Nintendo DS"},
     {  y: 1727161, legendText:"PSP", indexLabel: "PSP" },
     {  y: 4303364, legendText:"3DS" , indexLabel: "Nintendo 3DS"},
     {  y: 1717786, legendText:"Vita" , indexLabel: "PS Vita"}
     ]
   }
   ]
  });
  
  chart.render();
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And the HTML page where I intend to display the charts looks like</p>
  
  <pre><code>  &lt;!DOCTYPE HTML&gt;
    &lt;html xmlns:th="http://www.thymeleaf.org"&gt;
    &lt;head&gt;
      &lt;title th:text="#{titulo.app}"&gt;&lt;/title&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
      &lt;meta name="description" content="" /&gt;
      &lt;meta name="keywords" content="" /&gt;
  
      &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.scrolly.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.dropotron.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.scrollex.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/skel.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/skel-layers.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/init.js"&gt;&lt;/script&gt;
      &lt;script src="js/funciones.js"&gt;&lt;/script&gt;
      &lt;script src="js/jcanvasjs.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
      &lt;div class="12u" th:each="valor : ${listValores}"&gt;
          &lt;/div&gt;
  
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>And 'valor' got a method which returns a HashMap with the data</p>
  
  <pre><code>public Map&lt;String,Long&gt; returnData()
  </code></pre>
  
  <p>the String is the indexLabel and the Long is the y value.</p>
  
  <p>How can I pass this Map to the javascript function?</p>
  
  <p>Thanks.</p>