Dynamically creating graphs with jQuery

Question

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.

The values of the stocks are printed to the screen, so I can grab them quite easily with jQuery .text() and .slice().

My problem arises when I want to change the data in the graph to corespond with each portfolio (or group of stocks).

The <script>:

  $(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});
        });

    });

});

The page.php:

#in a php echo
<div class=".stocks-data">
    <div class="name-container">
        <div class="name">Name:  '.$name.'</div>
    </div>
    <div class="a-card">Stock A:  '.$stocka.'g</div>
    <div class="b-card">Stock B:  '.$stockb.'g</div>
    <div class="c-card">Stock C:  '.$stockc.'g</div>
    <canvas class="stocks-pie" height="80" width="100"></canvas>
</div>

Example Data:

.$stocka. = 14.2 .$stockb. = 2.8 .$stockc. = 3.9

The Problem:

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?

Supplementary Info:

This is using Charts.js

Answer 1

Working jsfiddle - http://jsfiddle.net/6cgo4opg/45/

Fixed the below

$a_pie = $a_base.].replace ( /[^\d.]/g, '' );;

should be

$a_pie = $a_base.replace(/[^\d.]/g, '');

and

$this.children('.stocks-pie'), (function(index, element){   

should be

$this.children('.stocks-pie').each(function (index, element) {

and

<div class=".stocks-data">

should be

<div class="stocks-data">