Променете диаграмата на доджото по оста x с реални данни

Въпрос: Как мога да изградя ос X за диаграма на доджо от колона с дата?

Опитвам се да създам персонализирана функция addAxis() за оста x на многосерийна линейна диаграма на Dojo.

Входящите JSON данни се съхраняват в dstore на наблюдаема памет, извлечени чрез 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 чрез UNIX_TIMESTAMP() на MySQL в колона с дата. Не е задължително, но изпробвах много рецепти и тази е най-новата.

Моята персонализирана функция изглежда така:

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 Reference“ (известен още като „кратък преглед/урок“ във всеки друг проект) предоставя само ограничени рецепти за тези обекти и примери за безполезни твърдо кодирани масиви.

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

Това 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 поле като 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