How to get the y axis max range in FLOT graph - flot

I want to change the y axis max range based on plotting data. So When I draw the graph, it dynamically assign the y axis range based on maximum plotting data.
Currently, I am not defining any maximum range for Y axis in options to achieve the above. So it do dynamically assign maximum y-axis range, based on data plotting
This is my code for above implementation
var source = [];
var options = {
xaxis: {
...
}
yaxis: {
min: 0,
axisLabel: "Y",
axisLabelUseCanvas: false,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
axisLabelPadding: 15
},
}
plotObj = $.plot($("#placeholder"), source, options) ;
It is working fine and allocating y axis max range dynamically. But, I have included "jquery.flot.selection.js" plugin to zoom the selected area. So it zoom to the ranges.yaxis.from to ranges.yaxis.to with below mentioned code
$("#placeholder").on("plotselected", function(ev, ranges) {
//clearInterval(protection_timer);
axes_data = plotObj.getAxes(); //get plotted axis ranges
axes_data.xaxis.options.min = ranges.xaxis.from ;
axes_data.xaxis.options.max = ranges.xaxis.to ;
axes_data.yaxis.options.min = ranges.yaxis.from;
axes_data.yaxis.options.max = ranges.yaxis.to;
...
plotObj.setData(graphData);
plotObj.setupGrid();
plotObj.draw();
});
Now, when user double click on the placeholder area, I need to reset beck the graph. But this time, as y axis max range is undefined, it is not resetting back. How can I get the y axis range, it was displaying in before zooming ? please give some suggestion

Expand your plotselected event with the second line here:
axes_data = plotObj.getAxes(); //get plotted axis ranges
axes_data.yaxis.originalMax = axes_data.yaxis.max; // save max value
axes_data.xaxis.options.min = ranges.xaxis.from;
and in the doubleclick event to reset the graph add the corresponding line:
axes_data.yaxis.max = axes_data.yaxis.originalMax; // restore max value

Related

Resize image keeping aspect ratio and fit in bounds nodejs

I need to resize images to fit in a specific dimensions. I want to keep aspect ratio.
For example
original image:
w:634
h:975
resize to max:
w:50
h:100
result:
w:50
h:85
I have not found anything that could do that(calculations for w and h)
and I am too dumb to figure it out by myself
copilot suggested me something that just keeps aspect ratio
If you want to use packages. I prefer jimp for image editing.
Jimp.read('image.jpg')
.then((lenna) => {
const isHorizontal = lenna.getWidth() > lenna.getHeight();
const ratio = isHorizontal
? lenna.getWidth() / lenna.getHeight()
: lenna.getHeight() / lenna.getWidth();
const width = 375; // set the width you want
const height = isHorizontal ? width / ratio : width * ratio;
return lenna.resize(width, height).quality(60).write("image.jpg");
})
.catch((err) => {
console.error(err);
});
Calculate the aspect ratio of your original image and of your maximum dimensions. According to that ratios, either take the maximum width or height as fixed and calculate the other side accordingly.
let
oheight = 634, owidth = 975,
mheight = 50, mwidth = 100,
theight, twidth;
let
oratio = owidth/oheight, // (~1.54)
mratio = mwidth/mheight, // (2)
if (mratio > oratio) {
//original image is "higher" so take the maximum height
//and calculate the width accordingly
theight = mheight; //50
twidth = theight * oratio; //77
} else {
//original image is "wider" so take the maximum width
//and calculate the height accordingly
twidth = mwidth;
theight = twidth / oratio;
}
But any decent image processing library will have the functionality, that you can pass in the maximum dimensions and define to keep the aspect ratio and will do these calculations internally ...

Problems in using vtkCubeAxesActor() instance. (Number representing, and contamination)

I have three questions.
Q1. In the picture above, only X axis displays actual numbers(:300,400,etc.) but Z axis just shows ratio number accompanying 'Z(x10^3)'. How can I show actual numbers for Y,Z axes as well?
Q2. In background, "contaminated" things(:characters?) are shown. How can I suppress that?
Q3. When I set big numbers as bounds like this one,
cubeAxesActor.SetBounds(0, 1100, 0, 1100, 0, 1100)
instead of
cubeAxesActor.SetBounds(polyD_src.GetBounds())
actual number are not shown and ratio numbers(0.1, 0.2, ~ 1.0) along axes are shown. How can I constraint numbers for showing its actual numbers?
Part of code is this one.
Thank you!
cubeAxesActor = vtk.vtkCubeAxesActor()
self.renderer.AddActor(cubeAxesActor)
axes = vtk.vtkAxesActor()
cubeAxesActor.SetUseTextActor3D(1)
cubeAxesActor.SetBounds(polyD_src.GetBounds())
cubeAxesActor.SetCamera(self.renderer.GetActiveCamera())
cubeAxesActor.GetTitleTextProperty(0).SetFontSize(1)
cubeAxesActor.GetTitleTextProperty(0).SetColor(tickColor)
cubeAxesActor.GetLabelTextProperty(0).SetColor(tickColor)
cubeAxesActor.GetTitleTextProperty(1).SetColor(tickColor)
cubeAxesActor.GetLabelTextProperty(1).SetColor(tickColor)
cubeAxesActor.GetTitleTextProperty(2).SetColor(tickColor)
cubeAxesActor.GetLabelTextProperty(2).SetColor(tickColor)
cubeAxesActor.GetXAxesLinesProperty().SetColor(tickColor)
cubeAxesActor.GetYAxesLinesProperty().SetColor(tickColor)
cubeAxesActor.GetZAxesLinesProperty().SetColor(tickColor)
cubeAxesActor.GetXAxesGridlinesProperty().SetColor(tickColor)
cubeAxesActor.GetYAxesGridlinesProperty().SetColor(tickColor)
cubeAxesActor.GetZAxesGridlinesProperty().SetColor(tickColor)
cubeAxesActor.XAxisMinorTickVisibilityOff()
cubeAxesActor.YAxisMinorTickVisibilityOff()
cubeAxesActor.ZAxisMinorTickVisibilityOff()
cubeAxesActor.SetXTitle("Y");
cubeAxesActor.SetYTitle("Z");
cubeAxesActor.SetZTitle("X");
cubeAxesActor.SetFlyModeToStaticEdges()
transform = vtk.vtkTransform()
transform.Translate(0.0, 0.0, 0.0)
transform.RotateZ(-90)
transform.RotateY(-90)
self.renderer.ResetCamera()
self.renderer.SetBackground(backgroundColor)
self.vtkWidget.GetRenderWindow().AddRenderer(self.renderer)
self.iren = self.vtkWidget.GetRenderWindow().GetInteractor()
self.frame_vis.setLayout(self.bl)
self.show()
self.iren.Initialize();'''
int vtkCubeAxesActor::LabelExponent(double min, double max)
{
...
//
// Determine power of 10 to scale axis labels to.
//
double range = (fabs(min) > fabs(max) ? fabs(min) : fabs(max));
double pow10 = log10(range);
const double eformat_cut_min = -1.5;
const double eformat_cut_max = 5.0; // orgin is 3.0 1000 change 5 (10000)
...
}

Flot tick labels not displaying properly in .toDataURL() export

I am using Flot version 0.8.3 to display several types of charts. I give users an option to export the chart from the canvas using .toDataURL('img/png').
The exported images were not showing the tick axis labels. I eventually figured out this was because the labels were rendering in html and not on the canvas. So, I added jquery.flot.canvas.js and set options.canvas = true just prior to exporting. The labels now appear in the exported image, but the x-axis tick labels overlap each other.
I then added jquery.flot.tickrotor.js and set options.xaxis.rotateTicks = 135 to rotate the labels. The labels do still appear in the exported image, and they are correctly rotated, but they have lost the font size, appearing much smaller than other text, and the x-axis ticks have disappeared from the grid. (I have set the font with options.xaxis.font.size = 24, the same font size I've given all text in the canvas.)
What do I need to do to include the tick labels in the exported image without overlapping and, if rotated, at the correct font size?
There were two issues here:
(1) First, the rotated tick label text was tiny. I was initially setting the tick label font with xaxis.font, which is ignored by jquery.flot.tickrotor.js. As stated in the plugin's README, declare the font in the xaxis.rotateTicksFont option instead.
(2) Second, when rotating tick labels, the vertical tick lines would disappear. As pointed out by Mark in the comments, this is due to a bug on on line 77 of jquery.flot.tickrotor.js: opts.ticks = [];. (A bug report has been filed.)
In the meantime, until the bug gets resolved, to fix the issue I have patched jquery.flot.js as follows:
/jquery.flot.js
Index: assets/javascript/lib/jquery/plugins/flot/jquery.flot.js
===================================================================
--- assets/javascript/lib/jquery/plugins/flot/jquery.flot.js (revision 13829)
+++ assets/javascript/lib/jquery/plugins/flot/jquery.flot.js (working copy)
## -2030,8 +2030,9 ##
for (var j = 0; j < axes.length; ++j) {
var axis = axes[j], box = axis.box,
- t = axis.tickLength, x, y, xoff, yoff;
- if (!axis.show || axis.ticks.length == 0)
+ t = axis.tickLength, x, y, xoff, yoff,
+ rTicks = axis.rotatedTicks || axis.ticks;
+ if (!axis.show || rTicks.length == 0)
continue;
ctx.lineWidth = 1;
## -2080,8 +2081,8 ##
ctx.strokeStyle = axis.options.tickColor;
ctx.beginPath();
- for (i = 0; i < axis.ticks.length; ++i) {
- var v = axis.ticks[i].v;
+ for (i = 0; i < rTicks.length; ++i) {
+ var v = rTicks[i].v;
xoff = yoff = 0;
Problem solved.

Flot time series, too many data points

I've plotted win rate on a Flot chart here: http://jsfiddle.net/xR66k/
The x-axis displays the week number, but I don't want the points between these ticks (for example between week 37 and 38, and between week 41 and 42) – how can I remove these?
I'm creating the ticks with the following code:
var data = [[1382911200000,7.6805],[1382306400000,27.4607],[1381701600000,13.0376],[1381096800000,-26.3855],[1380492000000,-11.9624],[1379887200000,-5.018],[1379282400000,-11.0009],[1378677600000,50.5376],[1378072800000,0],[1377468000000,0]];
var ticks = [];
for (var i = 0; i < data.length; i++) {
ticks.push(data[i][0]);
}
Why does Flot plot extra data points?
As I said in my comment this is a known limitation of the threshold plugin, so, let's work around it. In this fiddle, I've simply created two series one with just points and one with just lines. The "just lines" will get threshold properly without the addition of point markers.
data = [
{ label: 'Win Rate', data: data, points: {show:false} },
{ label: null, data: data, points: {show:true}, lines: {show:false} }
];

Get percentual of remaining slices of Pie Chart - NVD3

In some cases of my Pie Chart, I would like to show the user the percentage relative to slices of the Pie Chart instead of showing the values of the slices.
For example: I have three slices in my pie: A representing 70% of the pie, B representing 15% of the pie and C representing 15% of the pie.
When I click to hide the slice A I want to show to the user the percentage of the remaining slices, in this example it'll be B = 50% and C = 50%.
Is it possible in NVD3?
Important: I don't want to reload the chart when click to hide some slice.
You can use chart.tooltipContent to override the chart tooltip label. The following is adapted from the live code example on NVD3's website. http://nvd3.org/livecode/#codemirrorNav
Example: http://plnkr.co/edit/UiGLIj?p=preview
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.showLabels(true);
chart.tooltipContent(function(key, x, obj){
var enabledTotal = data[0].values
.filter(function(item){return !item.disabled;})
.reduce(function(a, b){return a + b.value}, 0);
return Math.round((obj.value/enabledTotal) * 100) + "%";
})
d3.select("#chart svg")
.datum(data)
.transition().duration(1200)
.call(chart);
return chart;
});

Resources