php - ChartJS adding 3yAxes -
i try make chart, issue need more y-axis because stock data , reviews/price looks after try chart not loading, tried add: yaxisid: '#name#' each dataset.
so want add y-axis price, 1 reviews , 1 rank.
$(document).ready(function(){ $.ajax({ url : "/data.php", type : "get", success : function(data){ console.log(data); var stock = []; var price = []; var reviews = []; var date = []; for(var in data) { stock.push(data[i].stock); price.push(data[i].price); reviews.push(data[i].rating); date.push(data[i].scrape_date); } var chartdata = { labels: date, datasets: [ { label: "price", fill: false, linetension: 0.1, backgroundcolor: "rgba(59, 89, 152, 0.75)", bordercolor: "rgba(59, 89, 152, 1)", pointhoverbackgroundcolor: "rgba(59, 89, 152, 1)", pointhoverbordercolor: "rgba(59, 89, 152, 1)", data: price }, { label: "reviews", fill: false, linetension: 0.1, backgroundcolor: "rgba(29, 202, 255, 0.75)", bordercolor: "rgba(29, 202, 255, 1)", pointhoverbackgroundcolor: "rgba(29, 202, 255, 1)", pointhoverbordercolor: "rgba(29, 202, 255, 1)", data: reviews }, { label: "stock", fill: false, linetension: 0.1, backgroundcolor: "rgba(211, 72, 54, 0.75)", bordercolor: "rgba(211, 72, 54, 1)", pointhoverbackgroundcolor: "rgba(211, 72, 54, 1)", pointhoverbordercolor: "rgba(211, 72, 54, 1)", data: stock } ] }; var ctx = $("#mycanvas"); var linegraph = new chart(ctx, { data: chartdata }); }, error : function(data) { } }); }); and here data.php data:
[{"stock":"100","price":"9.99","rating":"5","best_seller_rank":"40","scrape_date":"2017-07-05 17:22:00"},{"stock":"93","price":"9.99","rating":"5","best_seller_rank":"291","scrape_date":"2017-07-07 00:44:00"},{"stock":"93","price":"9.99","rating":"5","best_seller_rank":"563","scrape_date":"2017-07-07 16:47:00"},{"stock":"92","price":"9.99","rating":"5","best_seller_rank":"495","scrape_date":"2017-07-08 17:44:00"},{"stock":"90","price":"9.99","rating":"5","best_seller_rank":"641","scrape_date":"2017-07-09 20:28:00"},{"stock":"1000","price":"9.99","rating":"5","best_seller_rank":"899","scrape_date":"2017-07-10 17:51:00"},{"stock":"83","price":"9.99","rating":"5","best_seller_rank":"973","scrape_date":"2017-07-11 18:20:00"},{"stock":"79","price":"9.99","rating":"5","best_seller_rank":"575","scrape_date":"2017-07-12 19:32:00"},{"stock":"76","price":"9.99","rating":"5","best_seller_rank":"970","scrape_date":"2017-07-13 16:03:00"},{"stock":"77","price":"9.99","rating":"5","best_seller_rank":"845","scrape_date":"2017-07-14 16:26:00"},{"stock":"72","price":"9.99","rating":"7","best_seller_rank":"255","scrape_date":"2017-07-17 13:09:00"},{"stock":"64","price":"9.99","rating":"8","best_seller_rank":"999","scrape_date":"2017-07-19 14:41:00"},{"stock":"1000","price":"9.99","rating":"8","best_seller_rank":"55","scrape_date":"2017-07-20 18:37:00"},{"stock":"58","price":"9.99","rating":"8","best_seller_rank":"39","scrape_date":"2017-07-21 12:56:00"},{"stock":"1000","price":"9.99","rating":"8","best_seller_rank":"983","scrape_date":"2017-07-24 01:55:00"},{"stock":"36","price":"9.99","rating":"8","best_seller_rank":"428","scrape_date":"2017-07-24 23:26:00"},{"stock":"1000","price":"9.99","rating":"8","best_seller_rank":"294","scrape_date":"2017-07-27 11:15:00"},{"stock":"8","price":"9.99","rating":"8","best_seller_rank":"11","scrape_date":"2017-07-29 16:09:00"},{"stock":"1","price":"9.99","rating":"8","best_seller_rank":"13","scrape_date":"2017-07-31 21:01:00"},{"stock":"65","price":"9.99","rating":"8","best_seller_rank":"15","scrape_date":"2017-08-01 23:33:00"}]
the chart not loading because, haven't defined chart type (bar, line etc.).
so, define chart type, such :
... var linegraph = new chart(ctx, { type: 'line', data: chartdata, ... now, add 3 y-axis, first need set yaxisid each dataset, :
... datasets: [{ ..., yaxisid: 'price' }, { ..., yaxisid: 'reviews' }, { ..., yaxisid: 'stock' }] ... then, add 3 separate y-axis , set id in chart options, such :
options: { scales: { yaxes: [{ id: 'price' }, { id: 'reviews' }, { id: 'stock' }] } } ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
$(document).ready(function() { $.ajax({ url: "https://istack.000webhostapp.com/json/t12.json", type: "get", success: function(data) { console.log(data); var stock = []; var price = []; var reviews = []; var date = []; (var in data) { stock.push(data[i].stock); price.push(data[i].price); reviews.push(data[i].rating); date.push(data[i].scrape_date); } var chartdata = { labels: date, datasets: [{ label: "price", fill: false, linetension: 0.1, backgroundcolor: "rgba(59, 89, 152, 0.75)", bordercolor: "rgba(59, 89, 152, 1)", pointhoverbackgroundcolor: "rgba(59, 89, 152, 1)", pointhoverbordercolor: "rgba(59, 89, 152, 1)", data: price, yaxisid: 'price' }, { label: "reviews", fill: false, linetension: 0.1, backgroundcolor: "rgba(29, 202, 255, 0.75)", bordercolor: "rgba(29, 202, 255, 1)", pointhoverbackgroundcolor: "rgba(29, 202, 255, 1)", pointhoverbordercolor: "rgba(29, 202, 255, 1)", data: reviews, yaxisid: 'reviews' }, { label: "stock", fill: false, linetension: 0.1, backgroundcolor: "rgba(211, 72, 54, 0.75)", bordercolor: "rgba(211, 72, 54, 1)", pointhoverbackgroundcolor: "rgba(211, 72, 54, 1)", pointhoverbordercolor: "rgba(211, 72, 54, 1)", data: stock, yaxisid: 'stock' }] }; var ctx = $("#mycanvas"); var linegraph = new chart(ctx, { type: 'line', data: chartdata, options: { scales: { yaxes: [{ id: 'price' }, { id: 'reviews' }, { id: 'stock' }] } } }); }, error: function(data) { } }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.6.0/chart.min.js"></script> <canvas id="mycanvas"></canvas>
Comments
Post a Comment