Question

I am trying to add axis labels to my X axis with the date instead of just 1,2,3,4 etc. which it defaults to.

The date_time returned from the server also needs to be converted to a readable date/time.

Any help appreciated.

Code

<script type="text/javascript"> 

var chart;
var store;

require(["dojo/request/xhr",
    "dojo/json",
    "dojo/store/Memory",
    "dojo/store/Observable",
    "dojox/charting/StoreSeries",
    "dojox/charting/Chart2D", 
    "dojox/charting/plot2d/Lines", 
    "dojox/charting/axis2d/Default",    
    "dojo/domReady!"], 

    function(xhr, JSON, Memory, Observable, StoreSeries, Chart) {

    xhr("json_result.php",{
            handleAs: "json"
        }).then(function(data){ 

            store = Observable(new Memory({data: data}));

            chart = new Chart("graph");

            chart.addPlot("default", {type: "Lines", markers:true});

            chart.addAxis("x", {title:"Time", titleOrientation:"away"});
            chart.addAxis("y", {vertical: true, majorTick: false, title:"Load"});

            chart.addSeries("Load Cell 1", new StoreSeries(store, { query: { load_cell_id:0 }}, "kn"));
            chart.addSeries("Load Cell 2", new StoreSeries(store, { query: { load_cell_id:1 } }, "kn"));

            chart.render();
        });         
});


</script>

JSON Result

[{"date_time":1351280845,"load_cell_id":0,"kn":56.8},{"date_time":1351280845,"load_cell_id":1,"kn":45},{"date_time":1351367241,"load_cell_id":0,"kn":23.7},{"date_time":1351367241,"load_cell_id":1,"kn":34.9},{"date_time":1351417945,"load_cell_id":0,"kn":56.9},{"date_time":1351417945,"load_cell_id":1,"kn":67.8},{"date_time":1353914066,"load_cell_id":0,"kn":12.4},{"date_time":1353914066,"load_cell_id":1,"kn":19.43},{"date_time":1353992714,"load_cell_id":0,"kn":45.8},{"date_time":1353992714,"load_cell_id":1,"kn":40.8}]

Answer 1

Try following, its about controlling the indexes (major) and then formatting the data-date_time in a label generating function.

ddl =>             "dojo/date/locale", require this

chart.addAxis("x", {
    title: "Time",
    titleOrientation: "away",
    includeZero: true,
    //from: 0, to: (data.length -1),
    minorTicks: false,
    labelFunc: function(n){              
        // I am assuming that your timestamp needs to be multiplied by 1000. 
        var date = new Date(parseInt(data[n].date_time) * 1000);
        return ddl.format(date,  {
            selector: "date",
            datePattern: "dd MMMM"
        });

    }
});

The minor ticks will produce 0.1, 0.2 additions to the current major tick – and does not go well together with an array indice.