javascript - Modify dojo chart x axis with real data -


question: how can build x axis dojo chart date column?

i'm trying create custom addaxis() function x axis of dojo multiseries line chart.

incoming json data stored in observable memory dstore, retrieved via xhr php script, , looks like:

{"date":1415854800,"pressure1":23.2312,"pressure2":17,"pressure3":0,"pressure4":0}, {"date":1415913460,"pressure1":25.0123,"pressure2":17,"pressure3":0.015,"pressure4":0},... 

that "date" field unix epochal timestamp via mysql's unix_timestamp() on date column. doesn't have be, i've tried lot of recipes , that's latest one.

my custom function looks like:

var data = new memory({data:myjsondata}); ... labelfunc: function(n) {     var d = dates.get(n).date;     alert(d); } 

the "data" object far addseries concerned: addseries() can plot 4 pressures correctly. that's hard part. usually.

dojo charts accept dstore, store, , datatable objects, , other data types well, "api reference" (aka "brief overview/tutorial" in other project) provides limited recipes objects, , examples of useless hard-coded arrays.

the data objects aren't documented either, don't have time read source , figure out hack, , besides, there appear many obsolete iterations of data objects. it's easy lost , that's am.

that dates.get(n).date throws exception because 'date' undefined. according recent documentation version i'm using, that's way it. maybe. if version of memory dstore object documentation isn't in error.

question: how can build x axis dojo chart date column?

i can make data anything, x axis needs reflect date value, , every other field in row y axis value date.

the trick, seems, add "id" column json mysql output, , also set id field memory object id via idproperty in memory constructor, in example:

in php code:

... $stmt = $conn->prepare("@i := 0"); $stmt->execute(); $stmt = $conn->prepare("select @i:=@i+1 id, mydate, myval1, myval2 t_blahblah"); $stmt->execute(); $data = $stmt->fetchall(pdo::fetch_assoc);  // might need convert "null"s null // toss "null" strings array_walk_recursive($data, function(&$item, $key) {     if ($item == 'null' || $item == null) $item = null; }); echo json_encode($data, json_numeric_check); 

now, json looks like:

[{"id":1,"mydate":"2014-12-01","myval1":2.22,"myval2":0.77},  {"id":2,"mydate":"2014-12-02","myval1":4.92,"myval2":1.14},... 

the javascript grab data looks like:

... function(ready, chart, storeseries, claro, legend,          default, markers, tooltip,          magnify, selectablelegend,          memory, observable, simplequeryengine, lang, arr,          xhr, domconstruct, dom, aspect){           xhr.get({              url: "blahdatum.php",              sync: true,              handleas: "json"          }).then(function(data){              store = observable(new memory({data:data, idproperty:"id"}));          });           // create chart within it's "holding" node          var chart = new dojox.charting.chart("chartnode");           // set theme          chart.settheme(claro);           chart.addplot("default", {              type: markers,              markers: true,              interpolate: true,              tension: "x"          });           chart.addaxis("x", {              title: "date",              titleorientation: "away",              includezero: false,              rotation: -30,              minorticks: false,              labelfunc: function(n) {                  var row = store.get(n);                  if (row !== null && row !== undefined) {                      var date = new date(row.date);                      return date.tolocaledatestring();                  }              }          });          .... // addseries, legend, etc 

everything clicked place once set idproperty in memory() constructor.

this answer explains how add x axis using iso dates database.


Comments

Popular posts from this blog

ruby on rails - RuntimeError: Circular dependency detected while autoloading constant - ActiveAdmin.register Role -

c++ - OpenMP unpredictable overhead -

javascript - Wordpress slider, not displayed 100% width -