I am drawing a real time chart. X-axis represents the time which grows continuously. The left most spot always display the current timestamp and the right most is 30 seconds from current.
I want to display the left-most and right-most labels. But it appeared that only when both X values are a multiply of 10 would they both show up. Take the sample code below, if minX grows to 11 and maxX 21, then neither label is displayed. I can force the display of right-most label by changing majorTickStep to maxX. Which axis attributes can be used to display the left-most label? Many thanks,
var makeObjects = function(){
var minX=10, maxX=20;
var chart = new dojox.charting.Chart2D("test");
chart.addAxis("x", {fixLower: "none", fixUpper: "none", natural: true,
min: minX, max: maxX, majorLabels: true,minorLabels: true, htmlLabels: false,
//majorTickStep:10 ,minorTickStep: 1,
fixed: false,
labels: [{value:minX, text:"First"},{value:maxX, text:"Last"}]
});
chart.addAxis("y", {vertical: true, min: 0, max: 10});
chart.addPlot("default", {type: "Lines"});
chart.render();
};
Well, I expect them to show
Well, I expect them to show up as minor tick labels. Let me look into this problem more…
starting point of labels doesn't coincide with min value
I've found that the chart decides for itself where to put min and max values. So I do the following
1. set up the data
2. get the x-axis object from the chart
3. ask the x axis to prepare itself for rendering
4. use the x-axis object' calculate() method to figure out the start and end points, and the step size for the labels
5. label the points with the correct times
I do this because my data uses seconds for the x axis, while I want my labels to show up as hour:minute values.
So you could do a similar thing, just label the start and end points of your x axis, as computed by the call to calculate()
A code snippet:
if(!tickstep){ tickstep= xA.majorTickStep;}
if(!tickstep){ tickstep= 120;}
xA.labels = [];
var md = dojo.date.stamp.fromISOString(minDate);
// adjust md by diff
if(xstart != xmin){
md = dojo.date.add(md,'second',xstart-xmin);
}
for (var i = xstart; i<=xmax; i+=tickstep){
var diff=i-xstart;
var newd = dojo.date.add(md,'second',diff);
var label= newd.getHours() +":";
label += newd.getMinutes() < 10 ? "0"+newd.getMinutes():newd.getMinutes();
xA.labels.push({
'text':label,
'value':i});
}
return xA;
};
// then inside of my data plotting loop
//...
chart.addAxis("x", xAxisArgs);
// get the axis back
var xA = chart.axes["x"];
// call calculate now in order to set the axis up properly
xA.calculate();
// only at most 8 labels fit nicely on my x axis, so...
var xScale=xA.getScaler();
// this loop is specific to the time case
// try 5 minutes increments (300 seconds), etc
var nextTick=300;
while(xScale.major.count>8){
//console.log(xScale.major.count);
xAxisArgs.majorTickStep=nextTick;
chart.addAxis("x", xAxisArgs);
// get the axis back
xA = chart.axes["x"];
xA.calculate();
xScale=xA.getScaler();
nextTick+=300; // five more minutes... probably should optimize based on major.count compared to 8
}
// label the axis properly
makeYourTimeLabels(xAxisArgs,
mindate, // the starting Date string of the data
minx, // the staring seconds of the data, matches mindate
xScale.major.start, // not usually the same as minx in the data
xScale.bounds.upper, // not usually the same as maxx in the data
xScale.major.tick
);
// set the labels in the axis
xA.opt.labels=xAxisArgs.labels;
//...