I have a page that lists about 30 portfolios, each of which has 3 shares. I am trying to create a pie chart for each portfolio, where the pie chart will consist of the values of the three stocks in this portfolio.
Stock values are printed on the screen, so I can easily capture them using jQuery .text() and .slice() .
My problem arises when I want to change the data on the chart to fit each portfolio (or group of stocks).
<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}); }); }); });
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>
Sample data:
.$stocka. = 14.2 .$stocka. = 14.2 .$stockb. = 2.8 .$stockb. = 2.8 .$stockc. = 3.9 .$stockc. = 3.9
Problem:
I can make the charts work, but only show the latest portfolio data for each portfolio chart, which is clearly not what I want. How can I make this dynamic in which a chart is created for each portfolio using its own data?
Additional Information:
It uses Charts.js