title: Dynamically creating graphs with jQuery
body: <p>I have a page that lists about 30 portfolios, each with 3 stocks. I am trying to create a pie chart to go with each portfolio, where the pie chart would be composed of values from the three stocks in that portfolio.</p>
  
  <p>The values of the stocks are printed to the screen, so I can grab them quite easily with jQuery <code>.text()</code> and <code>.slice()</code>.</p>
  
  <p>My problem arises when I want to change the data in the graph to corespond with each portfolio (or group of stocks). </p>
  
  <p><strong>The <code>&lt;script&gt;</code>:</strong></p>
  
  <pre><code>  $(document).ready(function() {
  
      $.each($('.stocks-data'), function(){
          $this = $(this);
          $a_base = $this.children(".a-card").text();
          $a_pie = $a_base.].replace ( /[^\d.]/g, '' );;
          console.log($a_pie)
          $b_base = $this.children(".b-card").text();
          $b_pie = $b_base.replace ( /[^\d.]/g, '' );
          console.log($b_pie)
          $c_base = $this.children(".c-card").text();
          $c_pie = $c_base.replace ( /[^\d.]/g, '' );
          console.log($c_pie)
  
          var data = [
          {
              value: $a_pie,
              color:"#F7464A",
              highlight: "#FF5A5E",
              label: "Stock A"
          },
          {
              value: $b_pie,
              color: "#46BFBD",
              highlight: "#5AD3D1",
              label: "Stock B"
          },
          {
              value: $c_pie,
              color: "#FDB45C",
              highlight: "#FFC870",
              label: "Stock C"
          }
          ]
  
          $this.children('.stocks-pie'), (function(index, element){          
              var ctx = element.getContext("2d");
              new Chart(ctx).Doughnut(data ,{animateRotate: false});
          });
  
      });
  
  });
  </code></pre>
  
  <p><strong>The <code>page.php</code>:</strong></p>
  
  <pre><code>#in a php echo
  &lt;div class=".stocks-data"&gt;
      &lt;div class="name-container"&gt;
          &lt;div class="name"&gt;Name:  '.$name.'&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="a-card"&gt;Stock A:  '.$stocka.'g&lt;/div&gt;
      &lt;div class="b-card"&gt;Stock B:  '.$stockb.'g&lt;/div&gt;
      &lt;div class="c-card"&gt;Stock C:  '.$stockc.'g&lt;/div&gt;
      &lt;canvas class="stocks-pie" height="80" width="100"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Example Data:</strong></p>
  
  <p><code>.$stocka. = 14.2</code>
  <code>.$stockb. = 2.8</code>
  <code>.$stockc. = 3.9</code></p>
  
  <p><strong>The Problem:</strong></p>
  
  <p>I can get the charts to work, but only be displaying the last portfolios data for each portfolios chart, which is obviously not what I want. How can I make this dynamic, in which the chart is created for each portfolio using it's own data? </p>
  
  <p><strong>Supplementary Info:</strong></p>
  
  <p>This is using <a href="http://www.chartjs.org/" rel="nofollow">Charts.js</a></p>