Comments (10)
(Please keep in mind that I've never written any JS... I could be totally mistaken.)
After investigation I believe this is caused by the boundX
function in selection.js
(from Flotr2).
function boundX(x, graph) {
return Math.min(Math.max(0, x), graph.plotWidth - 1);
}
The selection is set to a maximum of width - 1. In my case summary.api.flotr.selection.selection.second.x
is maxed at 847, instead of the initial width of 848.
The interesting part is how this maxed width is then multiplied with the axis scale:
setSelection: function(area, preventEvent){
var options = this.options,
xa = this.axes.x,
ya = this.axes.y,
vertScale = ya.scale,
hozScale = xa.scale,
selX = options.selection.mode.indexOf('x') != -1,
selY = options.selection.mode.indexOf('y') != -1,
s = this.selection.selection;
this.selection.clearSelection();
s.first.y = boundY((selX && !selY) ? 0 : (ya.max - area.y1) * vertScale, this);
s.second.y = boundY((selX && !selY) ? this.plotHeight - 1: (ya.max - area.y2) * vertScale, this);
s.first.x = boundX((selY && !selX) ? 0 : (area.x1 - xa.min) * hozScale, this);
s.second.x = boundX((selY && !selX) ? this.plotWidth : (area.x2 - xa.min) * hozScale, this);
this.selection.drawSelection();
if (!preventEvent)
this.selection.fireSelectEvent();
},
Yet the scale in Axis.js
isn't based on the width -1, but rather on the width/length directly:
setScale : function () {
var
length = this.length,
max = this.max,
min = this.min,
offset = this.offset,
orientation = this.orientation,
options = this.options,
logarithmic = options.scaling === LOGARITHMIC,
scale;
if (logarithmic) {
scale = length / (log(max, options.base) - log(min, options.base));
} else {
scale = length / (max - min);
}
this.scale = scale;
from envisionjs.
Should I open an issue in Flotr2 instead of Envision?
from envisionjs.
Could you please fork this with your reproduction? http://jsfiddle.net/cesutherland/LurmY/49/
from envisionjs.
The same behavior is already present in this jsfiddle.
Here is a comparison of the selections one can make on the left and right side.
Complete selection up to the 'touching' point.
from envisionjs.
Ah, got it!
from envisionjs.
Would you prefer if i opened this as a Flotr2 issue?
from envisionjs.
Thank you, no... it's an issue en the envision data processing. I'll take a look at it. Maybe off-by-1 heh...
from envisionjs.
Bump!
Any changes?
from envisionjs.
I have found this issue in my project as well.
I collected some data that might help you:
# of points | # of points missing | px width of chart |
---|---|---|
5012 | 4 | 1356 |
5012 | 8 | 712 |
3313 | 2 | 1356 |
3313 | 5 | 712 |
1528 | 1 | 1356 |
1528 | 2 | 712 |
As you can see with the data above, it seems to be an off-by-one error.
((# of points missing) / (# of points)) * (px width of chart) is always close to 1.
I also tried this with a few smaller examples, (all the way down to 2 data points). The last data point was always missing when I tried to select some area.
As mentioned above, by @Frozenlock , when I click the summary list to reset the selection, the whole data pool is displayed.
from envisionjs.
I have found the off-by-one error to be in flotr2.js function called boundX.
The implementation of the function is:
return Math.min(Math.max(0, x), graph.plotWidth - 1);
where it should be:
return Math.min(Math.max(0, x), graph.plotWidth);
This is in line # 4117 in the envision.js file.
After some testing on my charts, this seems to cause no error and fixes all my problems.
I will submit a pull request when I am able.
from envisionjs.
Related Issues (20)
- Multichart HOT 5
- Several rightmost points are truncated in chart HOT 2
- Bug: destroy chart never free memory HOT 2
- envision.min.js breaks some Flotr options HOT 3
- Selection in the 'summary' area selects text from other sections HOT 2
- Handling of null data
- Browser crash - Too many ticks added when min and max are of similar values
- When xaxis mode : time, mousetracker displays milliseconds, not converted time stamp.
- Realtime chart range selection problem HOT 5
- Where is the flags feature?
- Finance: Is there a way to show lines of differing height at different Y points?
- Bug: Multiple time series, different time stamps, rendering error
- Broken links in README
- Annotation Feature? HOT 1
- Update on Envision latest version HOT 1
- [Vuln] SSRF vulnerability in `curl_init` Function of `proxy.php` File (Envision.js latest version)
- [Vuln] SSRF vulnerability in `readile` Function of `proxy.php` File (Envision.js latest version)
- process to consider envison.js FOSS 3PP code as our application code
- What is the EoS/EoM/EoL?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from envisionjs.