Modify dojo chart x axis with real data

问题

Question: How can I build an X axis for a dojo chart from a Date column?

I'm trying to create a custom addAxis() function for the x axis of a Dojo multiseries line chart.

Incoming JSON data is stored in an Observable Memory dstore, retrieved via xhr from a PHP script, and 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 is a Unix epochal timestamp via MySQL's UNIX_TIMESTAMP() on a Date column. It doesn't have to be, but I've tried a lot of recipes and that's the 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 is good as far as addSeries is concerned: addSeries() can plot all 4 pressures correctly. That's the hard part. Usually.

Dojo charts accept dstore, store, and DataTable objects, and probably other data types as well, but the "API Reference" (aka "brief overview/tutorial" in any other project) only provides limited recipes for those objects, and examples of useless hard-coded arrays.

The data objects aren't really documented either, I don't have time to read the source and figure out a hack, and besides, there appear to be many obsolete iterations of data objects. It's easy to get lost and that's exactly where I am.

That dates.get(n).Date throws an exception because 'Date' is undefined. According to the most recent documentation for the version I'm using, that's a way to do it. Maybe. If this version of the Memory dstore object documentation isn't in error.

Question: How can I build an X axis for a dojo chart from a Date column?

I can make the data look like anything, but the X axis needs to reflect that Date value, and every other field in the row is a Y axis value for that Date.

回答1:

The trick, it seems, is to add an "id" column to the JSON MySQL output, and also set that id field as the Memory object id via idProperty in the Memory constructor, as in this example:

in the PHP code:

...
$stmt = $conn->prepare("@i := 0");
$stmt->execute();
$stmt = $conn->prepare("SELECT @i:=@i+1 AS id, myDate, myVal1, myVal2 FROM T_BlahBlah");
$stmt->execute();
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Might need to convert some "null"s to NULL
// Toss the "null" strings
array_walk_recursive($data, function(&$item, $key) {
    if ($item == 'null' || $item == NULL) $item = NULL;
});
echo json_encode($data, JSON_NUMERIC_CHECK);

Now, your 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 to grab this 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 the chart within it's "holding" node
         var chart = new dojox.charting.Chart("chartNode");

         // Set the 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 into place once I set the idProperty in the Memory() constructor.

This answer also explains how you add an X axis using ISO dates from a database.

来源：https://stackoverflow.com/questions/27238497/modify-dojo-chart-x-axis-with-real-data

标签

javascript

mysql

dojo

dojox.charting