Master Slave Axis for Seconds and Microseconds - javascript

I am currently working with d3.js and have to work with seconds and microseconds. For this I intend to use a axis that is formatted similar to this:
I tried using two x-axes but the problem is that I don't know how to make the µ-sec axis dependent on the sec axis in order to restart the µ-sec numeration from zero after a new sec tick.
Here's a example of a data entry:
{"id": 0, "start": 5667572130, "end": 5667581035, "taskName": "t"},
And heres how I initialize the two axes:
x = d3.scale.linear().domain( [ timeDomainStart, timeDomainEnd ] ).range( [ 0, width ] ).clamp( true );
x2 = d3.scale.linear().domain( [ timeDomainStart/1000000, (timeDomainEnd/1000000) ] ).range( [ 0, width ] ).clamp( true );
xAxis = d3.svg.axis().scale( x ).orient( "bottom" ).tickSize( 4 ).tickPadding( 4 ).ticks(5);
x2Axis = d3.svg.axis().scale( x2 ).orient( "bottom" ).tickSize( 8 ).tickPadding( 8 ).tickFormat( d3.format( "f" ) ).ticks(10);
Here's a jsfiddle, it is based one following gantt example https://dk8996.github.io/Gantt-Chart/

Related

How to plot time data on a D3.js line graph

I have a ton of data associated with time. I want to plot a, hopefully, simple line graph. A simplified example:
var data = [{ time: 13:30, size: 100 }, { time: 13:37, size: 500}, { time: 13: 42, size: 300 }
{ time: 13:51, size: 150 }, { time: 13:56, size: 175 }, { time: 15:59, size: 75 }
{ time: 16:11, size: 75 }, { time: 16:37, size: 125 }, { time: 15:27, size: 200 } [...]
{ time: 20:36, size: 500 }]
Many time values, and corresponding size values. Of course, I do not want to plot every single time value on this graph. Instead I want to take the lowest value, 13:30, then plot the time on the axes at 30 minute intervals (i.e. 13:30, 14:00, 14:30 ... 20:30) until I hit the latest time in my array of data. At the same time, I want to plot every size value. So, the graph will only display a tick for 13:30 and 14:00, but the values that correspond with 13.37, 13.42, 13.51, 13.56 will be plotted on the line.
How would I go about doing this?
My first attempt was something like this:
var graph = d3.select('.graph'),
WIDTH = 790,
HEIGHT = 250,
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 50
}
xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]),
yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([smallest, largest]),
xAxis = d3.svg.axis().scale(xScale),
yAxis = d3.svg.axis().scale(yScale).orient("left");
NB the "smallest" and "largest" variables are the smallest and largest size values in my data array, calculated elsewhere. Obviously this is wrong because this would plot every single time value on the axes (as explained above, I do not want this) and even if I did it errors and glitches horribly.
How would I go about achieving what I want to achieve?
Thx
-- Gaweyne
Solved it. d3.time.scale not d3.scale.linear()
xScale = d3.time.scale(range([MARGINS.left, WIDTH - MARGINS.right]).domain(new Date([//Earliest Date//]), new Date([//Latest Date//]))

How I can set maximum value at graphael y axis and why?

I have several points that I try to represent using a graphael line chart. Almost all of them are below 0.03. However, the chart sets 1 as the maximum and all points are shown to be very down at the chart. When I have even one point over 0.03, graphael sets the maximum value something more than 0.03 and therefore the chart displays correctly. What can I do for the rest cases where all my points are below 0.03? It is really very ungly, and not helpful at all.
Is there a way to set the max value of the y axis automatically?
If you cannot help me, can you please run it, just to tell me if he can run it normally? It wouldn't take much time...
This is what I mean
I noticed that it also might produce very wrong y axis labels...
My code is shown below
var lines = r.linechart(30, 30, 600, 440,[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71]],[[0.02046,0.00635,0.02813,0.02808,0.02385,0.00729,0.02145,0.01978,0.02683,0.03006,0.03105,0.01211,0.0083,0.0022,0.02172,0.01541,0.01181,0.02418,0.00552,0.02708,0.01011,0.0105,0.0294,0.00132,0.00615,0.02303,0.00065,0.00967,0.00381,0.02167,0.01357,0.0221,0.02512,0.00918,0.01072,0.01083,0.00598,0.00195,0.01716,0.00347,0.03058,0.01815,0.02899,0.01537,0.0241,0.0241,0.00451,0.00088,0.01574,0.00688,0.0143,0.0024,0.03047,0.02876,0.00528,0.00996,0.00865,0.02681,0.02194,0.00082,0.00664,0.01178,0.01596,0.00516,0.0165,0.00895,0.01869,0.03082,0.02318,0.01089,0.00943,0.00986]], {axisxstep : 12,axisystep : 5,nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true }).hoverColumn(function () {
this.tags = r.set();
for (var i = 0, ii = this.y.length; i < ii; i++) {
this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }]));
}
}, function () {
this.tags && this.tags.remove();
});

Flot charts - How to plot only 1 tick per month on x-axis?

I want to have 1 tick on the x-axis every month.
I have this setting in flot charts, but it sometimes only plots 1 tick in the x-axis every 2 months
var options = {
xaxis: { mode: "time", timeformat: "%m/%d/%y", minTickSize: [1, "month"] }
};
If you want full control over the ticks on an axis you can set the ticks property with an array, for example:
var tickArray = [ new Date(2013, 0, 1).getTime(), new Date(2013, 1, 1).getTime(), ... ];
var options = {
xaxis: { mode: "time", timeformat: "%m/%d/%y", ticks: tickArray }
};
You can use tickSize property to set 1 month on x-axis like this.
tickSize: [1, "month"]

jqplot reversing y axis points and other problems

I am getting this kind of result:
Which is weird because why on earth am I getting this values on my y axis 1 1 2 2 2. My expected Y Axis points are just 1 and 2 since the result that I have is
[[["2013-01-30", "2"], ["2013-01-31", "2"], ["2013-02-01", "1"]]]
What i'm trying to do here is to reverse the Y axis as being 1 as the highest or on the top, just like on the screenshot.
Here is my code:
I am getting this one on my json result via ajax. This is the result:
[{"execution_datetime":"2013-01-30","sales_rank":"2"},{"execution_datetime":"2013-01-31","sales_rank":"2"},{"execution_datetime":"2013-02-01","sales_rank":"1"}] , that is the result of the data on the jQuery.each
var response =[[]];
var maxSR = 1;
jQuery.each(data, function(index, value) {
if( this.sales_rank > maxSR ) {
maxSR = this.sales_rank; //I am getting the largest number in the response array so that I can assign it on the Y-AXIS MIN
}
response[0].push([this.execution_datetime, this.sales_rank]);
});
//response has already a value of:
//[[["2013-01-30", "2"], ["2013-01-31", "2"], ["2013-02-01", "1"]]]
var tmpMin = response[0][0];
var xMin = tmpMin[0];
var plot2 = $.jqplot('myChart',response,{
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%b %#d'},
tickInterval:"1 days",
min: xMin,
},
yaxis:{
tickOptions:{ formatString:'%d' },
max:1,
min:parseInt(maxSR),
},
},
highlighter:{
show:true,
sizeAdjust: 7.5,
},
cursor: {
show:false,
},
});
I also tried removing the tickOptions:{ formatString:'%d' }, on the y-axis, it seems to be working, the problem is that, I am getting some floats on my Y-Axis which I don't like. How would I solve that one?
Another question incase this will be solved, is it possible to set a kind of offset to the x axis so that the points won't lie on the border?
Your help will be greatly appreciated! Thank you! :)
With this you can reverse the Y axis values:
tickOptions:{ formatString:'%i'}
To eliminate values on your y axis 1 1 2 2 2 you should use:
numberTicks: value
is it possible to set a kind of offset to the x axis so that the points won't lie on the border?
You could use this:
xaxis:{
//
min: xMin <-- subtract 1 to this value.
//
yaxis:{
min: parseInt(maxSR) <-- subtract 1 to this value.
I think the max is 1 and min is 2 in the below code. You want to set max to 2 and min to 1
yaxis:{
tickOptions:{ formatString:'%d' },
max:1,
min:parseInt(maxSR),
},
Example
yaxis:{
tickOptions:{ formatString:'%d' },
max:2,
min:1,
},

THREE.js & the order of transformations

I'm learning THREE.js right now, and I stucked with a probably noob problem.
I've a JSON object width dynamic update, it contains some data of 4 walls. The JSON struct:
{
...
walls: [{
start: {
x : 0,
y : 0,
z : 0
},
length: 1200,
rotation: 0
}, {
start: {
x : 0,
y : 0,
z : 0
},
length: 1200,
rotation: -(Math.PI/2)
}, {
start: {
x : 0,
y : 0,
z : 1200
},
length: 1200,
rotation: 0
}, {
start: {
x : 1200,
y : 0,
z : 0
},
length: 1200,
rotation: (Math.PI/2)
}],
...
}
I'm trying to position walls on canvas, It's OK when the wall has just a translation OR rotation, but there's a problem when the wall has both of them.
Here's my code (this._container is an instance of THREE.Mesh):
this._container.matrixAutoUpdate = false;
this._container.add(new THREE.AxisHelper(1000));
if(rotation) {
this._container.rotation.y = rotation;
this._container.updateMatrix();
}
if(translation) {
this._container.translateX((translation.x + (width/2)));
this._container.translateY((translation.y + (height/2)));
this._container.translateZ((translation.z));
this._container.updateMatrix();
}
If I apply rotation first then translate, it rotates the object's local axes too, and the translation will have wrong directions (http://robber.hu/webgl/1.png). If I apply translation first, than rotate, the Y axis moves to other position, and the rotation will be around wrong point (http://robber.hu/webgl/2.png).
I think there are two ways to solve this problem, but can't find the solutions:
Somehow using a "global translation", so the object translates on the scene's axis, and then use the first method
Change the object's "pivot" to left or right edge, and than use the second method
How can I implement it, or where can I find some docs/tutorial for this?
Solved.
The solution was that: Use three transformations insted of two. First, translate object to final position, second, rotate it, and finally, translate again via local X and y axis. Third translation moving the local axis from object's center to the corner.
R

Categories

Resources