flot/flot

Attractive JavaScript charts for jQuery

flot

About

flot is a JavaScript plotting library for engineering and scientific applications derived from Flot: http://www.flotcharts.org/

Take a look at the the examples in examples/index.html; they should give a good impression of what flot can do, and the source code of the examples is probably the fastest way to learn how to use flot.

Installation

Just include the JavaScript file after you've included jQuery.

Generally, all modern browsers are supported.

You need at least jQuery 1.2.6, but try at least 1.3.2 for interactive charts because of performance improvements in event handling.

Basic usage

Create a placeholder div to put the graph in:

<div id="placeholder"></div>

You need to set the width and height of this div, otherwise the plot library doesn't know how to scale the graph. You can do it inline like this:

<div id="placeholder" style="width:600px;height:300px"></div>

You can also do it with an external stylesheet. Make sure that the placeholder isn't within something with a display:none CSS property - in that case, Flot has trouble measuring label dimensions which results in garbled looks and might have trouble measuring the placeholder dimensions which is fatal (it'll throw an exception).

Then when the div is ready in the DOM, which is usually on document ready, run the plot function:

$.plot($("#placeholder"), data, options);

Here, data is an array of data series and options is an object with settings if you want to customize the plot. Take a look at the examples for some ideas of what to put in or look at the API reference. Here's a quick example that'll draw a line from (0, 0) to (1, 1):

$.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });

The plot function immediately draws the chart and then returns a plot object with a couple of methods.

Documentation and examples

API Documentation is available here: API reference

About how the plugins work: Plugins

High level overview on how interactions are handled internally: Interactions

Examples are included in the examples folder of this repository, but they can be tried out online as well: Examples

CircleCI

CircleCI is used in this repo to run dont-break, which checks if the current version of flot breaks unit tests on specified dependent projects.

flot's Issues

Pie Charts

Original author: [email protected] (December 06, 2007 18:39:18)

I didn't notice pie charts in the todo. I think they would be a great addition.

Original issue: http://code.google.com/p/flot/issues/detail?id=5

HTML-code in the legend

Original author: [email protected] (December 06, 2007 20:09:10)

Hello!

Is it somehow possible to do some formatting (e.g. adding a hyperlink) with
the legend?

Thanks!

Original issue: http://code.google.com/p/flot/issues/detail?id=6

weekend highlighting in visitors example broken by daylight savings change

Original author: [email protected] (April 17, 2008 16:04:45)

What steps will reproduce the problem?

1. create a graph based on visitors.html example (see attached
   visitors_with_DST.html)
2. note xmin at Friday April 4 2300, xmax at Saturday April 5 0200

What is the expected output? What do you see instead?

The weekend (Saturday) appears to start at 0100 instead of 0000 hours.

What version of the product are you using? On what operating system?

Any / Any

Please provide any additional information below.

This problem occurs because:

• we can see hourly data
• the previous weekend started without Daylight savings time
• the current weekend in the view starts with Daylight savings time

fix:

change:
i += 7 * 24 * 60 * 60 * 1000;
to:
d.setDate(d.getDate() + 7); // avoids daylight savings changes
i = d.getTime();

regards,
ninj

Original issue: http://code.google.com/p/flot/issues/detail?id=32

Zooming too much freezes the script

Original author: [email protected] (December 19, 2007 07:56:26)

What steps will reproduce the problem?

1. Go to the zooming example.
2. Keep zooming more and more smaller chunks (zoom within the zoom).

What is the expected output? What do you see instead?
I would expect it to stop me at some stage...?

What version of the product are you using? On what operating system?
Whatever is online on the examples page at the time of writing this entry.

Please provide any additional information below.
If I keep zooming at some stage the numbers on the axes become huge and
then all of a sudden the chart just freezes. After a while Firefox tells me
that a script is running in a loop and would I like to stop it.

Original issue: http://code.google.com/p/flot/issues/detail?id=17

Plot area disappears in Firefox for large viewport sizes

Original author: [email protected] (January 07, 2008 18:26:46)

I have a graph that is 520 x 300. The window viewport size is 1441 X 999
(reported through Web Developer toolbar). When I resize the viewport past a
height of 999, the plot area disappears while axis labels and legend
remain. The graph starts 400px down the page.

I'm using Flot 0.3 on Mac Firefox 2.0.0.11 with jQuery 1.2.1. The problem
does not occur on Safari, Windows IE, or Windows FF.

This is probably a low priority bug.

Original issue: http://code.google.com/p/flot/issues/detail?id=20

Examples don't work in Konqueror 3.5.8

Original author: [email protected] (December 05, 2007 20:46:20)

What steps will reproduce the problem?

1. Try to view examples in Konqueror

What is the expected output? What do you see instead?

Expected to see graphs, see blank areas instead

What version of the product are you using? On what operating system?

Konqueror 3.5.8, Kubuntu 7.10

Please provide any additional information below.

I'm not sure on the extent of Konqueror's support of the canvas tag. Also
Konqueror support is probably not a priority and it may be interesting to
see what Konqueror in KDE 4 brings. It would however be nice to support
Konqueror if it's possible without too much work.

Original issue: http://code.google.com/p/flot/issues/detail?id=4

Graph area appears larger than the div

Original author: [email protected] (December 21, 2007 14:48:04)

What steps will reproduce the problem?

1. Place the target div inside another div of the same, or slightly larger, size

What is the expected output? What do you see instead?

• Scrollbars will appear. There's some horizontal space that shouldn't be there off to the right.
  The vertical scrollbar appears to be present due to the horizontal scrollbar

What version of the product are you using? On what operating system?

• 0.3 on OSX Leopard in Safari and Firefox.

Please provide any additional information below.

• Modify examples/real-data.html around line 15 as follows:

  <div id="placeholder2" style="overflow:auto;width:601px;height:301px;">
  <div id="placeholder" style="width:600px;height:300px;"></div>
  </div>

Original issue: http://code.google.com/p/flot/issues/detail?id=19

Negative bars which go past the min of the y-axis are not shown.

Original author: [email protected] (May 18, 2008 16:10:17)

What steps will reproduce the problem?

1. Place the attached file in the examples dir of the flot distribution and
   open.

What is the expected output? What do you see instead?
The third bar has a value of -2, which is below the min y-axis value. Its
not shown on the graph. It should be.

What version of the product are you using? On what operating system?
Flot-0.4

Please provide any additional information below.

Problem is on line 1191-1194:
var left = x, right = x + barWidth, bottom = 0, top = y;

if (right < xaxis.min || left > xaxis.max || top < yaxis.min || bottom >
yaxis.max)
continue;

On a negative bar, top is the bottom of the rectangle to draw, and bottom
is the top, so this logic fails. Top and bottom should be swapped so that
the clip code below this continues to work. For example, change 1191 from:
var left = x, right = x + barWidth, bottom = 0, top = y;
to:
var left = x, right = x + barWidth, bottom = (y < 0 ? y : 0), top = (y < 0
? 0 : y);

Original issue: http://code.google.com/p/flot/issues/detail?id=36

Labels for X and Y axis

Original author: koneru.chowdary (June 03, 2008 09:55:46)

is there any way for displaying labels for X axis and Y axis?

Original issue: http://code.google.com/p/flot/issues/detail?id=42

excanvas missing from downloads

Original author: [email protected] (December 05, 2007 18:07:11)

the Excanvas library for IE compatibility is missing from the downloads.
It instead must be accessed via the subversion repository. You may want to
add it to a zip download or package it as a separate download independent
of the repository

Original issue: http://code.google.com/p/flot/issues/detail?id=2

Create releases

Original author: [email protected] (April 08, 2008 19:57:17)

Currently flot only has code in the trunk. It would be good to get "official" releases so that users
can rely on the fact that they have a certain version rather than a randomly checked out revision of
the file.

Original issue: http://code.google.com/p/flot/issues/detail?id=29

Legends are multiplying

Original author: [email protected] (June 16, 2008 13:47:18)

When I zoom (create a selection) legends in container are being multiply.
Here is a code which is working fine:

var options = {
xaxis: { mode: "time" },
selection: { mode: "x" },
legend: {
show: true,
container: $("#chartTimeLineLegend")
}
};
var plot = $.plot($('#'+divId), [timeLine_01, timeLine_02,
timeLine_03, timeLine_04, timeLine_05, timeLine_06], options);
var overview = $.plot($("#overview"), [timeLine_01_complete,
timeLine_02_complete, timeLine_03_complete, timeLine_04_complete,
timeLine_05_complete, timeLine_06_complete], {
lines: { show: true, lineWidth: 1 },
shadowSize: 0,
xaxis: { ticks: [], mode: "time" },
yaxis: { ticks: [], min: 0 },
selection: { mode: "x" }
});
var internalSelection = false;
$('#'+divId).bind("selected", function (event, area) {
plot = $.plot($('#'+divId), [timeLine_01, timeLine_02,
timeLine_03, timeLine_04, timeLine_05, timeLine_06],
$.extend(true, {}, options, {
xaxis: { min: area.x1, max: area.x2 }
}));
if (internalSelection) {
return;
}
internalSelection = true;
overview.setSelection(area);
internalSelection = false;
});
$("#overview").bind("selected", function (event, area) {
if (internalSelection)
return;
internalSelection = true;
plot.setSelection(area);
internalSelection = false;
});

Attached screenshots are showing how legends are multiplying by creating a
selection (zoom).

How to stop multiplying legends in container if user create a selection?!

Best regards,
Aleksandar Cajic

Original issue: http://code.google.com/p/flot/issues/detail?id=47

Graph Lines get rendered 1px too far left

Original author: [email protected] (December 07, 2007 13:25:00)

If you look closely at any rendered graph, the lines start on the left
border not inside it.

Original issue: http://code.google.com/p/flot/issues/detail?id=8

Bars in mode "time"

Original author: [email protected] (March 06, 2008 10:51:46)

Using SVN-Flot version with Firefox 2 on Ubuntu.

I'm using bars in "time" mode. What I get is one pixel width for each bar.
No way even if playing with xaxis.tickSize, xaxis.minTickSize, xaxis.ticks etc.

I see the "time" mode is something new....

Am I doing anything wrong?

really stupid serie :

var data = [[(new Date(100000)).getTime(), 1], [(new

Date(1000000)).getTime(), 10], [(new Date(10000000)).getTime(), 5], [(new
Date(100000000)).getTime(), 13]];

Original issue: http://code.google.com/p/flot/issues/detail?id=28

Problem creating charts with bars

Original author: [email protected] (December 16, 2007 11:43:25)

Hi!

I tried to find out the best way to create a chart with bars.

I use the following statement to declare the data:

{data: [[0,28], [0,28]],label: “label goes here”,bars: {show: true } },

I think it is a little bit redundant to specify [0,28] twice, but if I try
something like
{data: [[0,28]],label: “label goes here”,bars: {show: true } },
only the legend is shown, but no bars. What am I doing wrong?

(maybe it is a stupid question because it works if I use the first
statement, but it seems to me that even the bars are painted twice, so the
colors (originally pastel colors) are much darker.

Best regards!

Original issue: http://code.google.com/p/flot/issues/detail?id=16

Flot doesn't load in ASP.NET pages with a master page

Original author: [email protected] (December 09, 2007 02:39:07)

What steps will reproduce the problem?

1. Insert sample code in an ASP.NET page with a master page
   2.
   3.

What is the expected output? What do you see instead?
Flot doesn't do anything, generates javascript error... looks like the
jquery.flot.js file was opened (threw a few alerts in it to test) but the
$.plot function doesn't get created properly so calls to it fail.

What version of the product are you using? On what operating system?
Tested in Firefox and IE.

Please provide any additional information below.
I pasted some of the sample code into a plain HTML in my ASP.NET project
and it worked. But when used within a page that has a master page, it
fails. Played with it a bit but coudln't figure out any reason for it.

Original issue: http://code.google.com/p/flot/issues/detail?id=10

Flot with Ext JS (tab)

Original author: [email protected] (January 17, 2008 14:43:21)

What steps will reproduce the problem?

1. Include code flot (basic example) in div (tab) it does not work
2. Include code flot outside div works perfectly

What is the expected output? What do you see instead?

The basic example. Nothing.

What version of the product are you using? On what operating system?

Newest. Apache server. FF2 and IE7

Original issue: http://code.google.com/p/flot/issues/detail?id=22

Graph must be rendered on page load.

Original author: [email protected] (December 07, 2007 05:42:25)

The graph will appear blank unless rendered initially upon the page load.

The following code is an example that breaks it:

setTimeout(function() {
$(function () {
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.sin(i)]);

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    $.plot($("#placeholder"), [ d1, d2 ]);
});

},1000);

However, if you render the graph on page load, and then attempt to call
.plot afterwards it will update the graph with no issues.

Original issue: http://code.google.com/p/flot/issues/detail?id=7

Suggestion - Google Finance-like interactivity

Original author: [email protected] (December 11, 2007 15:14:01)

It'd be neat if the plot could recognize the mouse over each point, as
Google Finance's stock maps do, and put a little indicator to flag where
you are and maybe raise an even that could be used to update other
information on the screen.

Original issue: http://code.google.com/p/flot/issues/detail?id=13

Support for bar charts with keys instead of x-axis values

Original author: [email protected] (March 06, 2008 10:11:16)

I'm using Flot on SVN, or by the way Flot 0.3. Firefox 2 on Ubuntu.

When giving more the one serie with "bars : {show : true}" I see the bars
of the different series for the same x-value overlapping : I mean the bars
are one on each other. Is there any way (ie. any "bars" option) to say to
draw the bars one next to eachother for the same x-value instead?

I read more times the API, the issues, the samples and whatever but I
couldn't find anything that could help me.

Thank you.

Original issue: http://code.google.com/p/flot/issues/detail?id=27

Snap to ticks mode for the selection

Original author: [email protected] (July 22, 2008 17:23:24)

This is an enhancement rather than a issue. The attached code is simply proof of concept and
should be considered incomplete.

Selecting ranges (selection-mode-x) is great but I wanted to make it easier to select the entire
region between ticks. I wanted when I click the mouse and move for the current region to be
selected and then as I cross over each tick the next region is selected in whole, rather than pixel
by pixel.

The patch as I said is little more than a proof, it doesn't work correctly going from right to left.
There's a variable glob that's simply a placeholder, ideally this would be replaced by some
configuration. I figured it was best to simply do a proof of concept to illustrate what I wanted,
then as you guys have time/interest you can come up with a clean/proper implementation.

Attached is an example screenshot and a patch.

Original issue: http://code.google.com/p/flot/issues/detail?id=50

Printing in Firefox upsets formatting

Original author: [email protected] (February 01, 2008 17:28:02)

It would be really nice if the graphs maintained their appearance when printed

Original issue: http://code.google.com/p/flot/issues/detail?id=25

Flot + thickbox 3 iframe

Original author: [email protected] (December 13, 2007 17:15:52)

What steps will reproduce the problem?

1. make link <a
   href="?blah=123&KeepThis=true&TB_iframe=true&height=400&width=600"
   class="thickbox">test</a>
2. click on the link
3. couse javascript error

Original issue: http://code.google.com/p/flot/issues/detail?id=15

Support for stacked bars.

Original author: [email protected] (April 12, 2008 14:59:21)

It seems that it is not possible to create a graph with stacked bars. Like
this one: http://www.fusioncharts.com/free/Images/GalleryIcons/5/4.gif

It would be nice if it could! Thank you for considering this.

Original issue: http://code.google.com/p/flot/issues/detail?id=31

legend: labelFormatter = function(serie) Why serie is just the label, not the whole object

Original author: [email protected] (May 16, 2008 11:10:38)

Excuse me if my explaination is not clear, i'm french ;-)

For example:
<code>
var testdata = [{ label: "Serie1", data: 10},
{ label: "Serie2", data: 30},
{ label: "Serie3", data: 90},
{ label: "Serie4", data: 70},
{ label: "Serie5", data: 80},
{ label: "Serie6", data: 110}];

$.plot(
$('#myDiv'),
testdata,
{
...,
legend: {
labelFormatter: function(serie){
...
return serie;
}
}
);
</code>

In this example, serie is "Serie1" or "Serie2" or ... or "Serie6"
It would be great if serie was { label: "Serie1", data: 10}

Don't you think?

Original issue: http://code.google.com/p/flot/issues/detail?id=34

Invert Axis

Original author: [email protected] (January 22, 2008 12:20:44)

Could you add in a value to invert whatever axis eg:

xaxis, yaxis: {
invert: true
}

Original issue: http://code.google.com/p/flot/issues/detail?id=23

Issue with MSIE 6 and 7

Original author: [email protected] (May 21, 2008 14:01:34)

By innerHTML method (document.getElementById('right').innerHTML) Im
printing out some html code where is div tag for chart. With Mozilla
browsers this working fine without a problem but with MSIE 6 and 7 I have
an issue.

I don't have any kind of output, space for chart is reserved but instead
chart I've got an JS error "window.G_vmlCanvasManager" is null or not an
object.

Im using latest version of Flot lib version 0.4.

Best regards,
Alex

Original issue: http://code.google.com/p/flot/issues/detail?id=39

Odd behavior in Safari (both windows & mac) with other code on page

Original author: [email protected] (December 10, 2007 17:09:27)

What steps will reproduce the problem?

1. use Google News bar wizard to create some code in the page -
   http://www.google.com/uds/solutions/wizards/newsbar.html?uds_o=0
2. insert some flot code
3. open the page - it won't generate the chart. (if it does display
   chart, hit F5 - it'll probably disappear)
4. browse to flot samples pages; they will work
5. use back button to go back to test page - chart will now display
6. hit f5 to refresh - chart will disappear

You can look at http://dev.geoinvesting.com to see what I mean. If I
remove the Google newsbar code, the chart generates in Safari normally
even after page refresh.

It seems to have something to do with the onload events... it seems like
Safari isn't running them properly. I thought maybe Google's on load
event was conflicting with Jquery, but even if I remove it (or embed their
on load code after the flot setup) it doesn't make things better.

Original issue: http://code.google.com/p/flot/issues/detail?id=12

Flot Ext Js : loosing line colors when dragging

Original author: [email protected] (June 16, 2008 07:05:07)

Hello everybody,

I try to use flot with Ext js, including a chart in a gadget but when I'm
moving my gadget in the window I loose the colors for my lines (only with
IE7, it works fine with Firefox).

Any idea about how to fix that?

Thanks a lot in advance

Original issue: http://code.google.com/p/flot/issues/detail?id=46

Examples don't display in IE 6.0

Original author: [email protected] (December 05, 2007 19:16:47)

What steps will reproduce the problem?

1. Try to view the examples in IE 6.0... the actual graphs don't display.
   2.
   3.

What is the expected output? What do you see instead?

What version of the product are you using? On what operating system?

Please provide any additional information below.

Original issue: http://code.google.com/p/flot/issues/detail?id=3

clear selection width zoom doesnt redraw?

Original author: [email protected] (April 11, 2008 14:31:38)

What steps will reproduce the problem?

1. select an area and zoom
2. clearSelection() on the plot

What is the expected output? return to the orinigal state of the chart
What do you see instead? it clears the selection :) And just the selection

Used the latest release and could be easily demonstrated using the demo's
provided (http://people.iola.dk/olau/flot/examples/selection.html)

Original issue: http://code.google.com/p/flot/issues/detail?id=30

Some lines disspears when the data it's big

Original author: [email protected] (May 20, 2008 01:01:00)

What steps will reproduce the problem?
When I try to use a lot of information (like 500 points * 8 lines) some
lines, the ones that has bigger point's values dissapear (+1000000).
Also, the lines that are showing, don't begin in the 0 of x axis, like
it's expected

What is the expected output? What do you see instead?
See all the data and that's begining in the 0.

What version of the product are you using? On what operating system?
0.4 in Opera 9.5 and Firefox 3.05 in Ubuntu

Please provide any additional information below.

I love what you have done. It's amazing and a very easy to use.
Thank you.

Original issue: http://code.google.com/p/flot/issues/detail?id=37

Legend colors do not print

Original author: [email protected] (June 10, 2008 15:29:19)

What steps will reproduce the problem?

1. Create a chart with legends
2. Print it (or use print preview)

What is the expected output? What do you see instead?
I expected to see the colored boxes that correspond to the trace colors.
Instead the legend label boxes are white.

What version of the product are you using? On what operating system?

• Flot 0.4.
• Firefox 3.0rc1, IE 6, IE 7 (on Win XP)
• Firefox 2.0.0.11 (on Linux)

Please provide any additional information below.
Unfortunately the background colors set with CSS don't print (unless the
user overrides a setting on their browsers).
I think you have to either make the legend labels be canvas tags or use the
colored border cheat. In the example below, the top div is the same as
your legends, the bottom one uses the margin color trick to make printable
blocks:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>

<ul>

<li> <div style="overflow: hidden; width: 14px; height: 10px;
background-color: rgb(175, 216, 248);"/> </li>

<li> <p><div style="overflow: hidden; width: 0px; height: 0px;
border-width: 5px 7px 5px 7px; border-style: solid; border-color: rgb(175,
216, 248);"/></li>

</ul>

</body>
</html>

Original issue: http://code.google.com/p/flot/issues/detail?id=45

Enhancement request: Gauge

Original author: [email protected] (January 27, 2008 03:49:46)

xml/swl charts have a companion product called gauge:

http://www.maani.us/gauge/

It would great if you guys could do that.

Original issue: http://code.google.com/p/flot/issues/detail?id=24

Dashed lines

Original author: koneru.chowdary (May 27, 2008 05:38:09)

is there any way to show dashed lines instead of plain lines on the Flot
charts?

if anyones have idea plis let me know...

thanx in advance

Original issue: http://code.google.com/p/flot/issues/detail?id=41

grid borderWidth bug

Original author: [email protected] (May 13, 2008 14:04:20)

What steps will reproduce the problem?

1. Set the grid borderWidth value to 0
2. Using a date range picker (x-axis = time) select a few date ranges
3. The displayed date range becomes innaccurate

What is the expected output? What do you see instead?
borderless grid that doesn't forget its bounds

What version of the product are you using? On what operating system?
latest release on Windows Firefox 2.0.0.14

Please provide any additional information below.
It seems to be an issue with the grid border being taken into account with
the calculations. Perhaps if this could be turned into a CSS border eg. on
a div behind the graph or alternatively add a gridBorderColor parameter so
it could be set to white. The former of these suggestions would help to
remove borderwidth calculations from the plotting process so may be
beneficial in more ways than one.

Thanks,
Rob

Original issue: http://code.google.com/p/flot/issues/detail?id=33

Infiinite recursion for time series for certain data sets

Original author: [email protected] (June 05, 2008 15:20:55)

What steps will reproduce the problem?

This javascript fragment:
<code>
<script id="source" language="javascript" type="text/javascript">
$(function () {
var d = [];

        d.push([1081569600000, 125]);

        d.push([1140066000000, 117.9]);

        d.push([1142226000000, 111.3]);

        d.push([1145505600000, 144.8]);

        d.push([1148011200000, 129]);

        d.push([1150430400000, 126.8]);

        d.push([1151035200000, 129]);

        d.push([1153972800000, 123.9]);

        d.push([1155873600000, 109.1]);

        d.push([1176177600000, 119]);

    $.plot($("#weightDiv"), 
        [{  label: "Weight (LBS)",  data: d } ], 
        {   lines: { show: true },
            points: { show: true },
            xaxis: { mode: "time", timeformat: "%y %b %d" },
            yaxis: { ticks: 10, min: 98.19, max: 159.28000000000003 },
        shadowSize: 0,
        colors: ["#003366"]

    });
});

</script>
</code>

What is the expected output? What do you see instead?

Expected output is a graph of weight over time, but an infinite loop occurs
and the script must be stopped or the page hangs.

What version of the product are you using? On what operating system?
Using 0.4 on Ubuntu with Firefox 2

Please provide any additional information below.
It appears that this is due to flot generating a default "tickSize" for
this dataSeries of 0.5 and a default unit of "year". This combination
causes an infinite loop due to line 523-525 of jquery.flot.js, which never
actually changes the date, and thus loops forever:

<code>
else if (unit == "year") {
d.setFullYear(d.getFullYear() + tickSize);
}
</code>

I have fixed this locally by changing the above to:
<code>
else if (unit == "year") {
d.setFullYear(d.getFullYear() + (tickSize < 1 ? 1 : tickSize));
}
</code>

Original issue: http://code.google.com/p/flot/issues/detail?id=44

ParseInt Data

Original author: [email protected] (January 10, 2008 02:15:29)

Could I suggest when Parsing data to graph, run the data through parseInt
or parseFloat. I spent 6 hours trying to figure out why the bar graphs
looked hideous to find that the data I was using that came out of PHP came
in string format. While the line graphs plot this fine, the bar graph has
trouble with barWidth. Parsing each x and y co-ordinate through parseInt()
did the trick for me. Note, I'm only testing on Firefox in a Linux enviroment.

Happy Graphing
Choice

Original issue: http://code.google.com/p/flot/issues/detail?id=21

The examples page is down

Original author: [email protected] (December 05, 2007 15:21:15)

Possible Digg effect?

Original issue: http://code.google.com/p/flot/issues/detail?id=1

Fill not displayed correctly with opera < 0.5

Original author: [email protected] (December 10, 2007 15:02:17)

What steps will reproduce the problem?

1. fire up opera and go to http://people.iola.dk/olau/flot/examples/graph-
   types.html
2. take a close look at the yellowish fill under d1 (sinus graph)

What is the expected output? What do you see instead?
fill is broken, doesn't fill the complete space under the line to the x-
axis

What version of the product are you using? On what operating system?
opera 9.24 on mac

Original issue: http://code.google.com/p/flot/issues/detail?id=11

labelWidth and labelHeight for axis settings do not work

Original author: [email protected] (May 26, 2008 10:52:59)

What steps will reproduce the problem?

1. set labelWidth/labelHeight for x- or yaxis
2. nothing happens

What is the expected output? What do you see instead?
some change in the display of the labels

What version of the product are you using? On what operating system?
0.4

Please provide any additional information below.
I searched jquery.flot.js for labelWidth/labelHeight in order to check the
script but I did not find it. So I think it is not yet implemented. Am I right?

Actually I searched a way to remove the xaxis labels.

Original issue: http://code.google.com/p/flot/issues/detail?id=40

Roadmap

Original author: [email protected] (December 19, 2007 07:57:35)

Hey guys, how about a roadmap of where the project is going and what you
plan to do with it. Maybe some release dates too?

Original issue: http://code.google.com/p/flot/issues/detail?id=18

Microsoft Internet Explorer 7 (7.0.5730.13)

Original author: [email protected] (June 05, 2008 12:32:47)

I've got a report from my customer that he has issues with MSIE7 and Flot
chart. What is interesting, I've made a test with MSIE7 at my place and
everything working fine, but at customer's place that isn't a situation.
All need scripts are included and complete web application was tested with
Safari, Firefox, MSIE6 and MSIE7.

I'm posting a screenshot of MSIE7 browser which is showing strange looking
Flot chart. Please, I need some suggestion or a solution.

Version of MSIE7 at customer is 7.0.5730.13 and at my place is 7.0.5730.11

Best regards,
Aleksandar Cajic

Original issue: http://code.google.com/p/flot/issues/detail?id=43

Strings as Ticks scaling

Original author: [email protected] (December 07, 2007 18:49:49)

You demonstrate that it is fine to specifically set the tick positions and
set them as strings.

For example I have dates in an array and am setting the ticks on the xaxis
like so:

xaxis:{
ticks: [[0, allLicenseDates[0]], [(0.045_4), allLicenseDates[4]],
[(0.045_8), allLicenseDates[8]], [(0.045_12), allLicenseDates[12]],
[(0.045_16), allLicenseDates[16]], [(0.045*21), allLicenseDates[21]]]
}

So a string of “Dec 6” appears at 0 on the x-axis. However, this
introduces overflow outside the margins in the graph if I dont calculate it
correctly. I would rather let Flot handle the spacing and scaling of the
graph instead of setting it myself so that the graph is more flexbile.
When I try to set it myself, the graph goes outside of its margins.

What syntax should I use for specifying strings on the x-axis and letting
Flot do the spacing/scaling?

Original issue: http://code.google.com/p/flot/issues/detail?id=9

Support for arbitrary grid lines

Original author: [email protected] (May 17, 2008 12:55:33)

Through the use of flot for some internal projects we've needed to show
'markers' on graphs, to indicate trends toward a value, etc.

I've made the change to support this in the source, changed the
'setting-options' example to use it and updated the documentation with a
quick note on it's use.

Please see the attached diff for inclusion/consideration.

I'm no 'canvas' expert so please feel completely free to alter the code in
any way that might be necessary.

Take care,
Ryan

ps. Thanks for flot! It's awesome :)

Original issue: http://code.google.com/p/flot/issues/detail?id=35

Support for XML Namespaces and some cosmetic changes

Original author: [email protected] (December 13, 2007 01:00:50)

What steps will reproduce the problem?

1. Use flot on a non html page. (xml+?)

What is the expected output? What do you see instead?
It doesn't work at all because the tag canvas is not supported in said
namespace.

What version of the product are you using? On what operating system?
Mozilla Firefox 2.0.0.11, jQuery 1.2.1, Flot 0.2 on a XUL page.

Please provide any additional information below.

Solution:
Use of document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas')
instead of typed HTML where supported.

1. Added support for Flot to coexist in a namespaced pages, if it doesn't
   support document.createElementNS fall back to document.createElement Also
   note I have added a div container under target so fixed absolute
   positionment works in this cases. I have also replaced every instance of
   innerHTML or typed HTML with their DOM equivalent functions so it should
   work where typed HTML didn't.
2. Fixed alignment on legend cells where supported.
3. Tabs instead of spaces, it was previously mixed.

Tested on IE6, IE7, Firefox2. All examples work.

PLL.

Original issue: http://code.google.com/p/flot/issues/detail?id=14

Additive Chart Support

Original author: [email protected] (July 13, 2008 19:01:44)

It would be nice to add additive charts. An additive chart will sum the
values of more than one item. The chart could be used for looking at the
production of a set of companies during a set of years. Viewers could then
see each companies production, but also the total production.

Original issue: http://code.google.com/p/flot/issues/detail?id=48

Ticks are not centered on bar graphs

Original author: [email protected] (July 16, 2008 11:38:23)

What steps will reproduce the problem?

1. Create a bar graph chart with custom ticks

What is the expected output? What do you see instead?
I expected to see the ticks centered under each bar. They were instead
centered under the vertical line, which is the beginning of each bar. It is
hard to see which label belongs to which bar especially if they are long
labels.

What version of the product are you using? On what operating system?
0.4

Original issue: http://code.google.com/p/flot/issues/detail?id=49

Logarithmic scales

Original author: [email protected] (February 10, 2008 17:53:24)

What steps will reproduce the problem?
1.
2.
3.

What is the expected output? What do you see instead?

What version of the product are you using? On what operating system?
flot 0.3 on win xp/vista

Please provide any additional information below.

In some of the scientific graphs the values for x axis are uneven and plotted graphs provide the necessary information in that way only.
i.e. for values between 300 and 500 points are plotted for every 20 units. and For values from 500 to 3000 values are plotted for every 100 units and beyond 3000 points are plotted for every 500 points.
Can we do this using current library easily

Original issue: http://code.google.com/p/flot/issues/detail?id=26

ShadowSize is not implemented

Original author: [email protected] (May 21, 2008 10:49:54)

line 216:

if (s.shadowSize == null)
s.shadowSize = options.shadowSize;

should be

if (s.shadowSize != null)
s.shadowSize = options.shadowSize;

Original issue: http://code.google.com/p/flot/issues/detail?id=38