Per line fill VERY EASILY DONE

[dnschnur]

Original author: kwibus...@gmail.com (March 26, 2009 14:36:54)

Hi, I'm working on a FlotPanel for Apache's Wicket, and while doing this, I
wanted to have a ONE line to have it filled, and the other (in my case) two
others not.

I found out it's done enormously easy:

Line 1275:
if (series.lines.fill)
change to:
if (series.fill)

In your js code to paint a line, you can now use the fill option instead of
"lines" options.

The 'series' var already adds the new 'fill' parameter, but when changing
line 1275, Flot will check each line for fill.

Why is this better?:

• I want to put a scoring area which is good or bad and the actual line
  with a client's data.

How is everyone thinking about this? And if you like the change, can you
change Flot with the next version?

Still I'd like to add this area function, but I already give quite a lot of
hours to the Wicket Community.

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

[dnschnur]

From kwibus...@gmail.com on March 26, 2009 14:43:08
js code to paint a line: I meant the data array to create a line :$

example:

$(function ()
{
var options =
{
...
lines:
{
...
fill: 0.25, // NOT USED ANYMORE
},
...
};
var d1 =
{
label: "good area",
color: "#00FF00",
fill: true, // ** NEW PLACE OF FILL **
data:
[
[5000,120],
[4000,120],
[3000,120],
[2000,120],
[1000,120],
[0,120],
[0,90],
[1000,90],
[2000,90],
[3000,90],
[4000,90],
[5000,90],
[5000,120]
],
};
var d2 =
{
label: "lefthandside",
color: "#FF0000",
data:
[
...
],
};
var d3 =
{
label: "righthandside",
color: "#FF0000",
data:
[
...
],
};
$.plot($("#panel"),[ d1, d2, d3 ], options);
});

[dnschnur]

From olau%iol...@gtempaccount.com on March 31, 2009 19:51:57
What's wrong with

var d1 = { ... , lines: { show: true, fill: true }}

on a pristine Flot?

[dnschnur]

From kwibus...@gmail.com on April 01, 2009 09:59:25
That also works... but it means that when you add data for a line, you must tell for
this line only that all lines are filled or not.... I think it's better the other way.

besides, I think if you put down the coördinates of a line, I think you would like to
show the line as well...

Still, it's just a suggestion, but I think it's a good addition/change on Flot

[dnschnur]

From olau%iol...@gtempaccount.com on April 01, 2009 15:50:15
Are you aware that you can rewrite your example to

var d1 =
{
label: "good area",
color: "#00FF00",
lines: { show: true, fill: true },
data:
[
[5000,120],
...
],
};

If you don't want the line itself, you can change the line width to 0, I think.

[dnschnur]

From kwibus...@gmail.com on April 01, 2009 17:44:25
Since today... :-$

Anyway, tnx for the comments.
Maybe this is even more generic than my idea. I'll come back on it.

[dnschnur]

From kwibus...@gmail.com on April 02, 2009 08:37:15
The problem which I now have with the original flot code is that filling is not in
the desired color...

I now have:

(...)
var d1 =
{
label: "good area",
color: "#AAFFAA",
lines:
{
show: true,
fill: true,
fillColor: "#AAFFAA"
},
data:
[ ... ]
}
.......

but still the filled area is completely black (instead of green). I also had the code
put somewhere else, here's what I tried to get the green fill back:

• fillColor under color in var d1{ HERE }
• color under fillColor in var d1{ lines { HERE } }
  but still the areais black.

What am I missing? :-(

// oh and why does IE still exist??? It works perfectly under all browsers except
IE.... //

[dnschnur]

From olau%iol...@gtempaccount.com on April 02, 2009 09:33:38
Are you sure you reverted your changes correctly? This works fine with the
graph-types.html example for me, at least with the SVN version. Maybe you could start
from that and see if you can figure out the problem.

To get IE support, make sure you're including the excanvas script. A common gotcha is
that when specifying objects, IE doesn't allow a trailing comma, so for instance

{ a: 1, b: 2, }

gives an error in IE while working fine in Firefox.

[dnschnur]

From kwibus...@gmail.com on April 02, 2009 13:29:04
Rechecked, and found that I changed another line as well :-$ Sorry, changed back and
filling works as it used to be. Tnx :-)
I used the excanvas already (still IE should be removed from planet Earth...)

One more step is taken to get Flot into Wicket, three more to go :P :( (and yes, all
3 IE prpoblems: opening flot through Ajax)

[dnschnur]

From olau%iol...@gtempaccount.com on April 02, 2009 14:19:03
OK, I guess we're all clear then. IE: yes, it's a pain.

[dnschnur]

From jsinge...@gmail.com on July 10, 2009 10:00:58
I see you where working on a example of Wicket and Flot.

I am currently using wicket and google charts.

How far did you get with Flot and wicket, and any chance you can share the code?

Thanks in advance

[dnschnur]

From kwibus...@gmail.com on July 10, 2009 11:10:45
I'll see if I can commit the dependancy for global use. I'll get back to you shortly.

[dnschnur]

From kwibus...@gmail.com on July 13, 2009 09:06:01
Hey jsinger, I've got good news for you. I've talked to my boss and he's ok with
contributing to the community. (Maybe you've heard of Topicus, it's the company who's
behind Wicket.)

I also found out that someone else also created a flotpanel and it's committed in
Wicket-Stuff. I'm now trying to contact him in, maybe we can merge the two projects
in order to get a better one for the both of us and the community. Some of the
differences between these two is that 'mine' copes with ajax calls ('his' doesn't
yet) and 'his' copes with bars ('mine' doesn't yet).

Summary, I will again get back to you shortly, hopefully with a very nice merged
FlotPanel in wicket-stuff.

Regards, Jeroen

[dnschnur]

From stu...@gmail.com on September 27, 2010 20:00:37
Hi Jeroen,

Is this already merged in wicket-stuff? I'm curious for the Ajax updates of the Flot graphs...

Regards, Daan