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