humblesoftware / flotr2 Goto Github PK
View Code? Open in Web Editor NEWGraphs and Charts for Canvas in JavaScript.
Home Page: http://www.humblesoftware.com/flotr2/
License: MIT License
Graphs and Charts for Canvas in JavaScript.
Home Page: http://www.humblesoftware.com/flotr2/
License: MIT License
Hi Flotr2 team,
I require a waterfall chart.
Is this possible with your library? Or is it possible to add this chart type?
Thanks heaps :-)
Steven
See http://en.wikipedia.org/wiki/Waterfall_chart
...AND... http://i.imgur.com/kR1mL.png
This image has the colours inverse with green being a decrease and red being an increase.
This is just whatever context the graph represents. Typically this graph demonstrates what impacts (on the x-axis) on each previous item led to the final figure with red being bad and green as good. It's just an audience thing.
This image was created by jfreechart. It would be good to have defualts matching the wiki link and the option to change the colours (good/bad and the first and last colour).
The mouse tracking feature is limited on a timeline. The display is only triggered when the mouse is on the starting point of the timeline whereas it's better to have it displayed whenever the mouse is anywhere above the whole timeline line.
Edit :
In fact, having timelines behave like bars when the mouse pointer moves over the object would be just perfect : highlight, tooltip position
In FireFox Browser,
Legend is Not clearly Shown ( with HtmlText option true case).
when i check debuger in FF, z-index is not set in FF. (version is 11.0 and 12.0)
so, i added below script to add z-index option. (by jQuery)
$('.flotr-legend').css('z-index', '2');
$('.flotr-legend-bg').css('z-index', '1');
That's work.
Example is : http://jsfiddle.net/deadfire/EcDGL/
But, need to check . Thanks.
Remove the inner-loop reference to series. This should be done on testable-charts branch.
A hit is only detected on a bubble when the cursor is as at the bubbles centre. A hit should be registered on a bubble when the cursor touches/enters the bubble. This seems to be "standard" e.g. https://developers.google.com/chart/interactive/docs/gallery/bubblechart
The issue can be replicated easily enough by using the bubble example and adding:
mouse : {
track : true,
},
to the options.
The auto min/max is broken for bubbles (extendX, extendY are broken). Work on this issue should be done on the testable-charts branch.
Add a separate stylesheet, either static or dynamic with javascript.
Note: Add default cursor to stylesheet.
Download not working in chrome.
Hi !
I had build a Humble Finace http://humblesoftware.com/finance/index using Flort libraries
here my chart : http://www.flickr.com/photos/77437418@N05/6958591266/in/photostream/
in this picture I want to display all mouse track in all series at the same time , currently mouse track just display only one series
autoscaleMargin : here my problem ( http://www.flickr.com/photos/77437418@N05/7104660753/in/photostream/ )
I set autoscaleMargin : 0 but it's too close with border top and bottom . How can I set it's margin just a little from the top and button .
Plz help me
8c5b238, the removal of parseFloat from getSeries, constitutes a major API change. Consider this more carefully.
Max is currently hardcoded to 10 in radar.js:46
See: http://jsfiddle.net/gbakatos/FMeRG/
Mouse Tracking overlay is not visible if only one data-series contains non zero values (100% - 0% partition).
I'm using the track-formatter to show absolute values for the series.
Issue:
Hi. We probably found some bugs:
https://github.com/HumbleSoftware/Flotr2/blob/master/flotr2.js
4559: // TODO wtf is this for?
4560: if (startAngle == endAngle) return;With it pie chart will be broken, if last data was [0,0].
For example:
graph = Flotr.draw(container, [
{ data : [0, 20], label : 'Male' },
{ data : [0, 80], label : 'Unknown'},
{ data: [0,0], label: 'Female'}], // <---
...But if it not last, all ok.
And because of it on 4649 slice (this.slices[index]) will be undefined.
We commented 4560 line and pie worked ok.
There is a lot of cruft in labels. Let's see if we can't do this in < 100 lines.
defaultOptions ticks parameter should accept Numbers as labels.
Never used or seen an example of the Gantt chart. Does it even work?
Hi,
I 've been using your charting library which is very good. Thank you for this excellent work.
I recently ran into what I think is a bug with the candlestick implementation and time series. In order to see candles on a daily chart I have set the candleWidth to 86000000 (one day wide). The problem is the candles bodies are showing up in a very light gray and you can't see the high and low lines. I am guessing this has to do with the scaling?
There is another small related issue: my data is for weekdays (I am displaying the open/high/low/close for a financial contract), and there is a gap on the chart each week end (5 points, then 2 blancs, then 5 points... etc.) This is not how financial contracts are typically displayed.
I have started to take a look at your code for candles, but thought I would ask here first for some help. I would really appreciate if you could point me in the right direction.
I copy my options for reference:
{
candles: {
show: true,
candleWidth: 86000000,
fill: true,
wickLineWidth: 1,
upFillColor: '#000000',
downFillColor: '#000000',
fillOpacity: 1,
barcharts: false
},
xaxis: {
mode: 'time',
labelsAngle: 45
},
yaxis: {
autoscale:true,
autoscaleMargin: 0.1
},
selection: {
mode: "x"
},
title: "Candle Bars"
}
Best
No testing currently.
Implement a test plan. We want unit testing on all base classes. Currently Jasmine is at the top of my list for writing tests and (js-test-driver)[http://code.google.com/p/js-test-driver/] is at the top for continuous integration.
If formatter returns numbers then ticks are not shown, response expects a string to be returned
if set track to true and bars.js or pie.js isn't included, the above iisue occurs. So line 229 should be :} else if (s.bars && s.bars.show) {, line 304 should be } else if (s.pie && s.pie.show) {
If we use HtmlText = true, the rotation of yaxis doesn't work. I tried to add rotation styles for div-container of the title, but it is also necessary to recalculate left offsets (i.e. plotOffset ). Can you resolve this or give me an idea, how to do it in better way.
I would like each point in a data series to be able to have a label associated with it.
Is this currently possible?
For example, the specific case I'm looking at is that I have a series of events that happen over time. This events have a magnitude (y-axis) and date/time (x-axis) but they also have a unique name for each event.
Obviously this could also apply to bar charts and other types of data.
Munges up the plot offset if > 1.
HTML vs. Canvas Text (HtmlText : true|false) show up as different sizes in chrome.
Create tests for these and examine the behavior of autoscaleMargin. It's not transparent to me how this affects the auto min / max.
That's ok, when i use PC's browser
But, there is some problem in mobile device (android, iphone, ipad etc).
In some long contents, i can scroll by selecting no flotr2 area (by finger),
But i can't scroll page when i click flotr2 chart area.
Some gesture(zoom) is ok, but scrolling is not working.
I think event bubbling is cancled by stopPropagation or preventDefault.
Is there any option for on/off event bubbling ?
Can we implement this for all text size measurements?
I saw it done this morning here: https://github.com/jasondavies/d3-cloud/blob/master/d3.layout.cloud.js and I think it would greatly improve the speed of text dimension calculations.
Line charts support skipping of null values, but not when filling.
(function basic(container) {
var
d1 = [[0, 3], [4, 8], [5, 6], [6, null], [7, 7], [8, 5]], // First data series
d2 = [], // Second data series
i, graph;
// Generate first data set
for (i = 0; i < 14; i += 0.5) {
d2.push([i, Math.sin(i)]);
}
// Draw Graph
graph = Flotr.draw(container, [ d1, d2 ], {
xaxis: {
minorTickFreq: 4
},
lines: {
fill : true
},
grid: {
minorVerticalLines: true
}
});
})(document.getElementById("flotr-example-graph"));
Add an optional border around for the lines type when filling. This will look good when there is no grid border.
If you have multiple sets of data specifying the same x value for the points in a vertical barchart that doesn't stack, the series are rendered on top of eachother, instead of next to eachother
See http://stackoverflow.com/questions/3659871/flot-column-charts-series-aligned-together and http://code.google.com/p/flot/issues/detail?id=159 for more info
Isn't 100% clearing the hit.
I have a line graph, with two data series plotted, points displayed, and mouse tracking enabled (including y). I can successfully hover over points on the first series, but the second series doesn't work. Not entirely sure if this is a bug, something I'm doing wrong, or something that just isn't supported, but since the documentation doesn't indicate that it shouldn't work I thought I'd log it.
You can see it here: http://ciarang.com/stuff/greenhouse/daily.html (temperature line, hovering over points brings up the info - humidity line, nothing happens)
Hi,
I tried using Flotr2 with JqueryMobile. I tried to plot a pie-chart after the page is initialized. But all I get is
"The target container must be visible"
When bubbles overlay each other it isn't always possible to hit a smaller bubble that's hidden behind a larger bubble. It seems that ordering only works on 2 layers of bubble and not more. Following code illustrates where it's not possible to hit the inner bubble:
<script>
function basic_bubble() {
var container = document.getElementById("editor-render-0");
var
d1 = [],
d2 = [],
point, graph, i;
var i = 1;
point = [i, 10, 10];
d1.push(point);
point = [i, 10, 6];
d2.push(point);
point = [i, 10, 3];
d2.push(point);
// Draw the graph
graph = Flotr.draw(container, [d1, d2], {
bubbles : { show : true, baseRadius : 5 },
xaxis : { min : -4, max : 14 },
yaxis : { min : -4, max : 14 },
mouse : {
track : true,
},
});
};
basic_bubble();
</script>
Hi,
I have a question.
I am using FlotR2 to create from one to N graph on the same page.
Each graph is embeded in a div with unique id
I am using
Flotr.EventAdapter.observe
to make zoom in and zoom out on my different graphs.
The problem is that I can select my graphs, but the zoom is each time done on the last graph. I don't really understand what's going on. I am wondering if I could add a canvas ID somewhere but I don't know how to do it !
Any idea ?
Thank you
Using Firebug, found error in hit() this was caught at line 4626 of envision.js
closest is defined but has no member seriesIndex, this is then used to index which causes the error.
Like "old" flotr, flotr2 miss click on the hit
For example i use this feature to open a popup and send note for the clicked point on a datetime line graph
You can see comment and old patch on http://code.google.com/p/flotr/issues/detail?id=53
in some cases, when the data points may be undefined, don't attempt to draw the charts, as an example, I use this addition in the pie charts draw method:
draw : function (options) {
// exit
if (!options.data[0]) {
return;
}
// etc.
}
Hi guys,
I have a strange problem. I'm drawing a pie chart with this data:
[
{ 'label': 'Category 1', 'data': [[0,32.07]] },
{ 'label': 'Category 2', 'data': [[0,9.26]] },
{ 'label': 'Category 3', 'data': [[0,11.42]] },
{ 'label': 'Category 4', 'data': [[0,10.15]] },
{ 'label': 'Category 7', 'data': [[0,11.19]] },
{ 'label': 'Category 8', 'data': [[0,8.42]] },
{ 'label': 'Category 9', 'data': [[0,4.68]] },
{ 'label': 'Category 10', 'data': [[0,12.8]] }
]
and options:
{
'HtmlText': false,
'shadowSize': 3,
'grid': {
'verticalLines': false,
'horizontalLines': false,
'outlineWidth': 0
},
'xaxis': { 'showLabels' : false },
'yaxis': { 'showLabels' : false },
'pie': {
'show': true,
'explode': 6
},
'mouse': {
'track': true,
'relative': true
},
'legend': { 'show': false }
}
The chart looks fine, but I have a problem with mouse tracking. It behaves as if it doesn't track hovers over pie slices. Instead it highlights a slice which value corresponds to Y axis value. If moving mouse from bottom of canvas to top it'll highlight pies in Y value order.
What is at all confusing is that the same data set and the same config work perfectly fine when entered into editor in pie chart example.
I'm using the latest version from master branch.
Any ideas of what I'm doing wrong?
There is a clip method in the line type.
Bar shadows overflow the plot area. Clip these.
Hi,
In this page
http://jsfiddle.net/cesutherland/J3Kvf/
we have an example of the zoom in function. I think that this line is not working
yaxis: {min:area.y1, max:area.y2}
After zooming in, the yaxis is still the same.
Is there a nice way to do y autoscale after a zoomin ? Of course, I can go through my table to find the min and max, but maybe there's another solution
Thank you !
The following example gets no y axis labels and not line.
(function basic(container) {
Flotr.draw(container, [[[0, 0], [1, 0],[2, 0]]]);
})(document.getElementById("flotr-example-graph"));
Apparently, that is the case if all y values are the same and \leq 0. If I set them all to 3 or to 0.001, the graph is drawn as expected.
AFAICT, the culprit is either Flotr.getTickSize
or Flotr.getMagnitude
, the latter returning NaN
or the former not handling NaN
as a return value.
After implementing re-use of existing canvas elements, there is an issue where click fires if select re-draws. Click events attached during mouseup will fire immediately.
See discussion here: https://groups.google.com/forum/?fromgroups#!topic/flotr2/p3lT7JbVtgI
Currently, the only styling options that seem to be available to style a point when it's being hovered over is drawing an extra circle on top of the standard point. The only thing that can be controlled is the color of the circle.
The sort of styling I'm after could be like displayed over here: http://people.iola.dk/olau/flot/examples/interacting.html or just drawing a wider, non-filled circle around the already displayed point
Paul
Line fill not supported on series which end before max-x value.
(function basic(container) {
var
d1 = [[0, 3], [4, 8], [5, 6], [6, 5], [7, 7], [8, 5]], // First data series
d2 = [], // Second data series
i, graph;
// Generate first data set
for (i = 0; i < 14; i += 0.5) {
d2.push([i, Math.sin(i)]);
}
// Draw Graph
graph = Flotr.draw(container, [ d1, d2 ], {
xaxis: {
minorTickFreq: 4
},
lines: {
fill : true
},
grid: {
minorVerticalLines: true
}
});
})(document.getElementById("flotr-example-graph"));
Hi,
what exactly is the unit of barWith in time mode? When I set barWidth to 86400 * 1000 (i.e. 24hrs in ms, like in flot) the graph won't draw (and the browser hangs). When I set it to something smaller (say 24) the bars' width doesn't change. What does change is y axis scale - it's padded.
I'm at all confused :).
A bug exists if a flotr graph is used in a floating window. In this particular application, the background can still be scrolled, even though it's not receiving input. However, when the background is scrolled, the mouse tracking gets vertically out of sync. If the background window is scrolled up it's correct, and the further down it scrolls, the more out of sync it gets.
There needs to be an adjustment made for the mouse position in these circumstances.
With the following code if I hover over a bubble whose bottom section is beneath the x axis (and correctly "chopped off") the border is drawn on the hit event but the border doesn't honour the bottom of the chart and is drawn outside of the chart bounds.
function basic_bubble() {
var container = document.getElementById("editor-render-0");
var d1 = [],
d2 = [],
point, graph, i;
for (i = 0; i < 10; i++) {
point = [i, Math.ceil(Math.random() * 10), Math.ceil(Math.random() * 10)];
d1.push(point);
point = [i, Math.ceil(Math.random() * 10), Math.ceil(Math.random() * 10)];
d2.push(point);
}
graph = Flotr.draw(container, [d1, d2], {
bubbles: {
show: true,
baseRadius: 5
},
mouse : {
track : true,
},
xaxis: {
min: -4,
max: 14,
},
yaxis: {
//min: -4,
//max: 14,
ticks : [[0, "Lower"], 10, 20, 30, [40, "Upper"]],
max : 40,
title : 'y = f(x)'
}
});
}
basic_bubble();
Handles plugin is using static data where it should be specific data to that instance of the plugin.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.