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

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -

here tables: create table customer ( cid int primary key, name varchar(32) ) create table ord ( oid int primary key, cid int foreign key references customer, address varchar(20) ) here's linq-to-sql statement: var aaa = c in db.customer select new { c, o = c.ord.tolist() }; and here's inexplicable query generated linq-to-sql: select [t0].[cid] [cid], [t0].[name] [name], [t1].[oid] [oid], [t1].[cid] [cid2], [t1].[address] [address], (select count(*) [dbo].[ord] [t2] [t2].[cid] = [t0].[cid]) [value] [dbo].[customer] [t0] left outer join [dbo].[ord] [t1] on [t1].[cid] = [t0].[cid] order [t0].[cid], [t1].[oid] i want understand how rid of count(*) part. it's entirely uncalled for! linq needs count(*) in order determine number of entries returned o = c.ord.tolist() .
Read more