Develop Reference

Plotly.js adds top-margin to graphs inconsistently, how to prevent it

With Plotly.js I'm getting a top-margin added sometimes (not consistently), where the total height of the graph is 300px, but the graph itself is only 150px high. The SVG container then is stretched and the actual graph is smaller. What can I do to prevent this white-space, and why does it only show up selectively?
Plotly Matlab syntax that results in 300px div instead of a 300px graph:
`% PLOT MEAN MOVEMENT
data = {...
struct(...
'x', nScan, ...
'y',fastmotion, ...
'type', 'scatter')...
};
if max(fastmotion) < 0.3
yminval = 0.3;
else
yminval = round(max(fastmotion) + 1);
end
layout = struct(...
'yaxis', struct(...
'title', 'Movement (mm)', ...
'range', [0, yminval]));
header{3} = 'Absolute Movement';
layout.width = 800;
layout.height = 300;
p = plotlyfig;
p.data = data;
p.layout = layout;
p.PlotOptions.FileName = 'plot_5';
html_file = plotlyoffline(p);
html_file;`

You can check this answer on a different question, and here is the fiddle.
The quick code you can use:
var layout = {
margin: {
l: 20,
r: 20,
b: 20,
t: 20,
pad: 5
}, title: false
};
As mfedoten says on his answer: But be careful if you have tick labels, if you set margins to zero the labels will be cropped

So apparently line 68 in plotlyfig.m caused the issue:
obj.PlotlyDefaults.MinTitleMargin = 80;
Even though I had no title, it sometimes added 80 px on top of the graph, maxing out at the specified graph height. Setting this value to 0 solves the problem.

Probably line 68 in plotlyfig.m just set default margins.
You can set the margins manually like that:
p.layout.margin = struct('b', 15,'l', 30, 'r', 0, 't', 0);
You can find documentation on margins here.
But be careful if you have tick labels, if you set margins to zero the labels will be cropped.

How to add 2nd horizontal x axis scale to jqplot and customize axis settings?

Note: Although this is a self-answered question, I am always curious about better approaches.
sin(x) and cos(x) for x in degrees.
Goal: I would like to adjust this initial plot and add a 2nd X axis to show both degrees and radians.
How do I set up jqPlot PlotOptions to add x and y labels, change scales, and add a second X axis?
I am using a JavaScript library that I wrote called html5csv [License: GPL] that support various data analysis operations and interfaces to jqPlot for plotting. It allows the specification of the jqPlot plotOptions object for each plot.
The (currently blank) plotOptions are on the first line of code. You may assume the plotOptions are correctly delivered to jqPlot by the subsequent code invoking CSV().jqplot() from the html5csv library.
html5csv + jqplot dual line graph without special axes
plotOptions = {};
CSV.begin('%F', {dim:[36,4],header:['deg','rad','sin','cos'],
func: function(i,j){
var deg = 10*(i);
var rad = deg*2*Math.PI/360.0;
if (j===0) return deg;
if (j===1) return rad;
if (j===2) return Math.sin(rad);
if (j===3) return Math.cos(rad);
}
}).
jqplot([['chart1',[['deg','sin'],['deg','cos']], plotOptions]]).
table('tab1',{header:1}).
go();
jsfiddle of single axes sine, cosine wave plot
This jqPlot documentation shows up to 2 X axes and 9 Y axes but when calling new Axis() I get Uncaught ReferenceError: Axis is not defined in the console. To fix this I tried adding more of the jqplot .js files to the script headers but it did not help.
jqplot Axis formatting options documentation shows all the options to configure axis labels, ticks, etc. for a particular axis if I could create one.
How do I proceed from here?

Don't call new Axis(); This is done for you internally in jqPlot.
Basically, if you declare the right keys in plotOptions, the Axis will be set up for you. But if the keys are missing or misnamed, it will obviously fail.
Here are the finished examples:
Part 1: Customized set of single axes
Output
jqplot PlotOptions Input
plotOptions = {
axes: {
xaxis: {
show: true,
label: 'deg',
min: 0,
max: 360,
tickInterval: 45
},
yaxis: {
show: true,
label: 'y',
min: -2.0,
max: 2.0
}
}
};
Note: You don't need to call new Axis, but you do need to name the object fields as shown.
plotOptions = {
axes: {
xaxis: {
show: true,
label: 'deg',
min: 0,
max: 360,
tickInterval: 45
},
yaxis: {
show: true,
label: 'y',
min: -2.0,
max: 2.0
}
}
};
CSV.begin('%F', {
dim: [36, 4],
header: ['deg', 'rad', 'sin', 'cos'],
func: function(i, j) {
var deg = 10 * (i);
var rad = deg * 2 * Math.PI / 360.0;
if (j === 0) return deg;
if (j === 1) return rad;
if (j === 2) return Math.sin(rad);
if (j === 3) return Math.cos(rad);
}
}).
jqplot([
['chart1', [
['deg', 'sin'],
['deg', 'cos']
], plotOptions]
]).
table('tab1', {
header: 1
}).
go();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.css" />
<script src="https://cdn.rawgit.com/DrPaulBrewer/html5csv/7f39da16/html5csv.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisTickRenderer.js"></script>
Part 2: Dual X axes, with degrees and radians scales
Output
jqPlot PlotOptions Input
plotOptions = {
axes: {
xaxis: {
show: true,
label: 'deg',
min: 0,
max: 360,
tickInterval: 45
},
x2axis: {
show: true,
label: 'rad',
min: 0,
max: 2 * Math.PI,
numberTicks: 9
},
yaxis: {
show: true,
label: 'y',
min: -2.0,
max: 2.0
}
}
};
plotOptions = {
axes: {
xaxis: {
show: true,
label: 'deg',
min: 0,
max: 360,
tickInterval: 45
},
x2axis: {
show: true,
label: 'rad',
min: 0,
max: 2 * Math.PI,
numberTicks: 9
},
yaxis: {
show: true,
label: 'y',
min: -2.0,
max: 2.0
}
}
};
CSV.begin('%F', {
dim: [36, 4],
header: ['deg', 'rad', 'sin', 'cos'],
func: function(i, j) {
var deg = 10 * (i);
var rad = deg * 2 * Math.PI / 360.0;
if (j === 0) return deg;
if (j === 1) return rad;
if (j === 2) return Math.sin(rad);
if (j === 3) return Math.cos(rad);
}
}).
jqplot([
['chart1', [
['deg', 'sin'],
['deg', 'cos']
], plotOptions]
]).
table('tab1', {
header: 1
}).
go();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.css" />
<script src="https://cdn.rawgit.com/DrPaulBrewer/html5csv/7f39da16/html5csv.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisTickRenderer.js"></script>
Notes: No need to call new Axis() here, either. Name the plotOptions keys properly and it works.
Plotting of data used the original single X coordinate using the 1st X axis.
Reference
From the jqPlot Axis docs:
Axes options are specified within an axes object at the top level of the plot options like so:
{
axes: {
xaxis: {min: 5},
yaxis: {min: 2, max: 8, numberTicks:4},
x2axis: {pad: 1.5},
y2axis: {ticks:[22, 44, 66, 88]}
}
}
There are 2 x axes, ‘xaxis’ and ‘x2axis’, and 9 yaxes, ‘yaxis’, ‘y2axis’. ‘y3axis’, ... Any or all of which may be specified.
Useful axis options excerpted from the documentation
Note: Additional options do exist. These are the most basic ones.
In a few of these I edited slightly for clarity.
show
true to display the axis on the graph.
label
Label for the axis
showLabel
true to show the axis label.
min
minimum value of the axis (in data units, not pixels).
max
maximum value of the axis (in data units, not pixels).
autoscale
true to Autoscale the axis min and max values to provide sensible tick spacing.
If axis min or max are set, autoscale will be turned off. The numberTicks, tickInterval and pad options do work with autoscale, although tickInterval has not been tested yet. padMin and padMax do nothing when autoscale is on.
ticks
1D [val, val, ...] or 2D [[val, label], [val, label], ...] array of ticks for the axis. If no label is specified, the value is formatted into an appropriate label.
numberTicks
Desired number of ticks. Default is to compute automatically.
tickInterval
number of units between ticks. Mutually exclusive with numberTicks.
showTicks
true to show the ticks (both marks and labels) or not. Will not override showMark and showLabel options if specified on the ticks themselves.
showTickMarks
true to show the tick marks (line crossing grid) or not. Overridden by showTicks and showMark option of tick itself.
syncTicks
true to try and synchronize tick spacing across multiple axes so that ticks and grid lines line up. This has an impact on autoscaling algorithm, however. In general, autoscaling an individual axis will work better if it does not have to sync ticks.
tickSpacing
A number giving approximate pixel spacing between ticks on graph. Used during autoscaling. This number will be an upper bound, actual spacing will be less.

Flot Thresholds on x-axis

I created a realtime (updates every 10ms) vertical spline chart using Flot. The chart can be seen here on Codepen. I included the Flot multiple threshold plugin, but I would like for the thresholds to use the x-axis values (on the bottom of the vertical chart) and not the y-axis values (left of the chart). The plot would then paint all values outside of the dashed black lines in red.
In the example you can see that the thresholds use the y-axis to color thresholds (in my case, all values below constraintMax, which is 60).
The operative lines of code are where I set up the options (line 79 in the update function):
var options = {
xaxis: {
position: 'bottom',
min: -10,
max: 100
},
yaxis: {
position: 'left',
min: iterator,
max: updatedData.length-1+iterator,
transform: function (v) { return -v; },
inverseTransform: function (v) { return -v; }
}
};
Where I set up the constraints (line 66 in the update function):
var constraintMax = {
threshold: 60,
color: "rgb(255,0,0)",
evaluate : function(y,threshold){ return y < threshold; }
}
var constraintMin = {
threshold: 25,
color: "rgb(255,0,0)",
evaluate : function(y,threshold){ return y < threshold; }
}
And where I actually plot (line 93 in the update function):
$.plot("#"+elementID, [{data: updatedData, constraints: [constraintMin, constraintMax]}, {data: initialMinData, color: "#000000", dashes: { show: true }}, {data: initialMaxData, color: "#000000", dashes: { show: true }}], options);
Does anyone have any ideas on how to paint the plot points that are outside of the dashed lines red? Thank you in advance.

The multiple threshold plugin only support y-value thresholds out of the box. Therefore you have to change it for your plot. I copied the code into a jsfiddle (I don't like codepen) and changed it there.
1) Your constraintMax threshold is wrong for what you want to do, you need return y > threshold.
2) Changes in the multiple threshold plugin:
if (evaluate(currentPoint[1], threshold)) {
v
if (evaluate(currentPoint[0], threshold)) {
and
function _getPointOnThreshold(threshold, prevP, currP) {
var currentX = currP[0];
var currentY = currP[1];
var prevX = prevP[0];
var prevY = prevP[1];
var slope = (threshold - currentX) / (prevX - currentX);
var yOnConstraintLine = slope * (prevY - currentY) + currentY;
return [threshold, yOnConstraintLine];
}
See the fiddle for the working example.

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