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
Post a Comment