php - Javascript charts not populating data from mysql -
i attempting query mysql table info use data populate chart getting x axis "clothing undefined" running across , bars not populating.
i using following script query table clothing.php:
if($_get['action'] == 'clothingordered' && $_get['id']){ $uid = $_get['id']; $sql = "select clothing, orders clothingorder userid = '$uid'"; $query = mysqli_query($db_conx, $sql); if($query){ $data = array(); foreach($query $row){ $data[] = $row; } print json_encode($data); }else{ echo mysqli_error($db_conx); } }else{ print 'not good'; }
this yields:
[{"clothing":"tshirt ","orders":"4"},{"clothing":"jeans","orders":"7"},{"clothing":"hats","orders":"34"},{"clothing":"dresses","orders":"12"},{"clothing":"jackets","orders":"27"},{"clothing":"sweaters","orders":"23"}]
area graph:
<canvas id="mychart" width="400" height="400"></canvas>
js file data:
$(document).ready(function(){ var id = $('#intro').data('id'); $.ajax({ url: '../php_parsers/clothing.php?action=clothingordered&id='+id, method: "get", success: function(data) { console.log(data); var clothing = []; var orders = []; for(var in data) { clothing.push("clothing " + data[i].clothing); orders.push(data[i].orders); } var chartdata = { labels: clothing, datasets : [ { label: 'clothing ordered', backgroundcolor: 'rgba(200, 200, 200, 0.75)', bordercolor: 'rgba(200, 200, 200, 0.75)', hoverbackgroundcolor: 'rgba(200, 200, 200, 1)', hoverbordercolor: 'rgba(200, 200, 200, 1)', data: orders } ] }; var ctx = $("#mychart"); var bargraph = new chart(ctx, { type: 'bar', data: chartdata }); }, error: function(data) { console.log(data); } }); });
i have following scripts included in page chart is:
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hvvnyaiadrto2pzugmuljr8blusjgizsdygmijlv2b8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-dztdapbwprxsa/3eyeeuwrwcy7g5kfbe8ffjk5jaixuyhkkdx6qin1dkwx51bbrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vbwwzlzj8ea9acx4pew3rvhjgjt7zpknpzk+02d9phzyevke+jo0iegizqplforn" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.3.0/chart.bundle.min.js"></script>
any feedback welcomed. thank you.
make sure set datatype parameter ajax request.
$.ajax({ url: '../php_parsers/clothing.php?action=clothingordered&id='+id, method: "get", datatype: "json", success: function(data) { // ... }, error: function(data) { console.log(data); } });
Comments
Post a Comment