Измените ось X диаграммы додзё с реальными данными

Вопрос: Как построить ось X для диаграммы додзё из столбца «Дата»?

Я пытаюсь создать пользовательскую функцию addAxis() для оси X многосерийной линейной диаграммы Dojo.

Входящие данные JSON хранятся в dstore Observable Memory, извлекаются через xhr из PHP-скрипта и выглядят так:

{"Date":1415854800,"Pressure1":23.2312,"Pressure2":17,"Pressure3":0,"Pressure4":0},
{"Date":1415913460,"Pressure1":25.0123,"Pressure2":17,"Pressure3":0.015,"Pressure4":0},...

Это поле «Дата» является эпохальной временной меткой Unix через MySQL UNIX_TIMESTAMP() в столбце «Дата». Это не обязательно, но я пробовал много рецептов, и это самый последний.

Моя пользовательская функция выглядит так:

var data = new Memory({data:myjsondata});
...
labelFunc: function(n) {
    var d = dates.get(n).Date;
    alert(d);
}

Объект «данные» хорош с точки зрения addSeries: addSeries() может правильно отображать все 4 давления. Это сложная часть. Как правило.

Диаграммы Dojo принимают объекты dstore, store и DataTable, а также, возможно, и другие типы данных, но «Справочник по API» (также известный как «краткий обзор/руководство» в любом другом проекте) предоставляет только ограниченные рецепты для этих объектов и примеры бесполезных жестко запрограммированные массивы.

Объекты данных также толком не задокументированы, у меня нет времени читать исходники и разбираться в хаках, и, кроме того, кажется, что есть много устаревших итераций объектов данных. Легко заблудиться, и это именно то, где я нахожусь.

Этот dates.get(n).Date выдает исключение, поскольку «Дата» не определена. Согласно самой последней документации для версии, которую я использую, это способ сделать это. Может быть. Если эта версия документации объекта Memory dstore не является ошибкой.

Вопрос: Как построить ось X для диаграммы додзё из столбца «Дата»?

Я могу заставить данные выглядеть как угодно, но ось X должна отражать это значение даты, а каждое другое поле в строке является значением оси Y для этой даты.


mysql javascript dojo dojox.charting
person Padraig    schedule 01.12.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Хитрость, похоже, заключается в том, чтобы добавить столбец «id» в вывод JSON MySQL и также установить это поле id в качестве идентификатора объекта памяти через idProperty в конструкторе памяти, как в этом примере:

в PHP-коде:

...
$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);

Теперь ваш JSON выглядит так:

[{"id":1,"myDate":"2014-12-01","myVal1":2.22,"myVal2":0.77},
 {"id":2,"myDate":"2014-12-02","myVal1":4.92,"myVal2":1.14},...

JavaScript для получения этих данных выглядит так:

...
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

Все встало на свои места, как только я установил idProperty в конструкторе Memory().

Этот ответ также объясняет, как вы добавляете ось X, используя даты ISO из базы данных.

person Padraig    schedule 02.12.2014