humblesoftware/flotr2

Graphs and Charts for Canvas in JavaScript.

Flotr2

The Canvas graphing library.

http://groups.google.com/group/flotr2/

Please fork http://jsfiddle.net/cesutherland/ZFBj5/ with your question or bug reproduction case.

API

The API consists of a primary draw method which accepts a configuration object, helper methods, and several microlibs.

Example

  var
    // Container div:
    container = document.getElementById("flotr-example-graph"),
    // First data series:
    d1 = [[0, 3], [4, 8], [8, 5], [9, 13]],
    // Second data series:
    d2 = [],
    // A couple flotr configuration options:
    options = {
      xaxis: {
        minorTickFreq: 4
      }, 
      grid: {
        minorVerticalLines: true
      }
    },
    i, graph;

  // Generated second data set:
  for (i = 0; i < 14; i += 0.5) {
    d2.push([i, Math.sin(i)]);
  }

  // Draw the graph:
  graph = Flotr.draw(
    container,  // Container element
    [ d1, d2 ], // Array of data series
    options     // Configuration options
  );

Microlibs

• underscore.js
• bean.js

Extending

Flotr may be extended by adding new plugins and graph types.

Graph Types

Graph types define how a particular chart is rendered. Examples include line, bar, pie.

Existing graph types are found in js/types/.

Plugins

Plugins extend the core of flotr with new functionality. They can add interactions, new decorations, etc. Examples include titles, labels and selection.

The plugins included are found in js/plugins/.

Development

This project uses smoosh to build and jasmine with js-imagediff to test. Tests may be executed by jasmine-headless-webkit with cd spec; jasmine-headless-webkit -j jasmine.yml -c or by a browser by navigating to flotr2/spec/SpecRunner.html.

Shoutouts

Thanks to Bas Wenneker, Fabien Ménager and others for all the work on the original Flotr. Thanks to Jochen Berger and Jordan Santell for their contributions to Flotr2.

flotr2's Issues

Label individual points on basic axis/scatterplot graph?

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.

gantt chart type example

Never used or seen an example of the Gantt chart. Does it even work?

Pie Chart - Empty Slice

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.

Mouse over bubble causes border to be drawn outside of chart

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();

Could Mouse Multi Track and ask about autoscaleMargin

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

Download Chrome

Download not working in chrome.

defaultOptions ticks parameter

defaultOptions ticks parameter should accept Numbers as labels.

Does not work with JqueryMobile

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"

Mouse tracking and timline

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

autoscale & autoscaleMargin

Create tests for these and examine the behavior of autoscaleMargin. It's not transparent to me how this affects the auto min / max.

Canvas measureText

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.

Mobile device gesture problem.

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 ?

"z order" on bubbles isn't correct

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>    

seriesIndex undefined

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.

Mouse Tracking overlay is not visible if only one data-series contains non zero values

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.

highlight styling of points when hovering over them

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

Y autoscale when zoom in

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 !

package.json and npm support

Support for Waterfall Charts

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).

Stylesheet - remove inline styles

Add a separate stylesheet, either static or dynamic with javascript.

Note: Add default cursor to stylesheet.

Handles Plugin / static data

Handles plugin is using static data where it should be specific data to that instance of the plugin.

click on hit

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

bubbles chart type auto min/max

The auto min/max is broken for bubbles (extendX, extendY are broken). Work on this issue should be done on the testable-charts branch.

Candlestick charts and timeline

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

Mouse Tracking Bubble Chart

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.

Don't attempt to draw charts if value or data is undefined

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.

}

Ticks not showing

If formatter returns numbers then ticks are not shown, response expects a string to be returned

http://jsfiddle.net/LurmY/42/

Filled line border.

Add an optional border around for the lines type when filling. This will look good when there is no grid border.

Removal of parseFloat from getSeries

8c5b238, the removal of parseFloat from getSeries, constitutes a major API change. Consider this more carefully.

Bar graph, time and barWidth

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 :).

Legend in FF

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.

Problem with mouse tracking

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.

Line graphs - mouse track only on first series?

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)

yaxis title rotation problem

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.

Line fill, empty values not supported

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"));

Bar Shadow Clip

There is a clip method in the line type.

Bar shadows overflow the plot area. Clip these.

Add support for grouping series together

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

flotr:select, flotr:click issue

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.

'bars.show' or 'pie.show' is null or not an object

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) {

gantt chart extend range

Remove the inner-loop reference to series. This should be done on testable-charts branch.

Line fill, incomplete series not supported.

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"));

Grid outlineWidth parameter

Munges up the plot offset if > 1.

Test Plan

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.

radar chart axis is always 0 - 10

Max is currently hardcoded to 10 in radar.js:46

HTML vs. Canvas Text, Chrome

HTML vs. Canvas Text (HtmlText : true|false) show up as different sizes in chrome.

Problems with lines chart with all y-values being 0

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.

Weird behavior of mouse tracking with pie chart

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?

Labels Cleanup (plugins/labels.js)

There is a lot of cruft in labels. Let's see if we can't do this in < 100 lines.

Multiple div, containers and EventAdapter

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

Pie clearHit

Isn't 100% clearing the hit.

http://humblesoftware.com/flotr2/#!basic-pie