Display value on bar graph

[GillouStyle]

Dear all,

First, thanks for this great piece of software.

As you can see on my test page, (here: http://www.gilleslemagnen.fr/tesst/
), underneath the photo you see: "Last 6 months production" and then,
right beneath it, a graph with "bars" filled.

I would like to show the value of each bar. Right now we have to guess
that February is roughly "215" or that March is "300".


I thought I would use the "Interacting with the data points" example
( http://people.iola.dk/olau/flot/examples/interacting.html ).

Because my graphs aren't using the "cos/sin" functions defined in this
example, I think I need to adapt the code to be using my set of data
(which is grabbed from a MySQL database). Since I am a total newbie in
Javascript, I am unable to achieve this.

Would anyone be able to get me started? or tell me straight if this is
not possible with Flot 0.6?

Thanks,


--
Subscription settings: http://groups.google.com/group/flot-graphs/subscribe?hl=en-GB

[Ryley Breiddal]

Actually, I think you're on the right track. The data you want is
stored in the item.datapoint array, and you've already pulled it into
the "y" variable.

I'm seeing a javascript error when I open your example page - line 190
has an extra set of "});". That may be all it is, and if you're going
to work with javascript, I suggest installing Firefox + Firebug... It
will make debugging 100x easier.

Cheers,

Ryley

[GillouStyle]

Dear Ryley,

Thanks for your reply.

I deleted the extra "});" but it still doesn't show anything.

In fact, you say I am on the right track, but all I have done is
simply copy and paste this:





///// Code starts here /////

" <div style="width:600px;height:auto;padding-bottom:
30px;display:block;clear:both;">
<?php echo $graphData[0]['htmlCode']; ?> // COMMENT : THIS PLOTS MY
GRAPH
</div>


<p><input id="enableTooltip" type="checkbox">Enable tooltip</p>

<script id="source" language="javascript" type="text/javascript">


function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}


var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));

if ($("#enableTooltip:checked").length > 0) {
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;

$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);

showTooltip(item.pageX, item.pageY,
item.series.label + " of " + x + " = "
+ y);
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
}
});

$("#placeholder").bind("plotclick", function (event, pos, item) {
if (item) {
$("#clickdata").text("You clicked point " + item.dataIndex
+ " in " + item.series.label + ".");
plot.highlight(item.series, item.datapoint);
}
});

</script>

///// Code ends here /////


Do you see something that would do it?

[GillouStyle]

Could anyone help? thanks.

[DDayDawg]

I was dealing with the same problem so I reprogrammed the
jquery.flot.js file. I was going to try and put this into a plugin but
I don't think I will be able to do that because it took some changes
at the point of drawing the boxes. Of course I'm new to Javascript and
JQuery so maybe I'm just not seeing how. Anyway, I made it where you
can turn on/off all the code I wrote so just replacing the file won't
show any changes.

If you want to download my version you can get it here:
http://dl.dropbox.com/u/37159/jquery.flot.js

There are actually two changes:

1. You can now set the color for the border around the boxes. I wanted
black borders to make the boxes pop more from a distance.
2. You can add data labels to bar graphs (bar only for now, it's what
I needed but if someone needs more I'm willing to program it) with the
option of the label being in the center of the bar or hovering over
the top.

In order to do this I had to add some options to the Series:

series: {
bars: {
lineColor: null, // set if bar border color is different from
the series color
dataLabels: false, // set true if you want data labels to
show
labelColor: "#000000", // default is black
labelBold: false, // set to make the label bold
labelLoc: "center" // top or center - If using "top" you
should also set the yaxis autoscaleMargin to allow room for the label

lineColor - you can change the color of the bar border lines

dataLabels - just a switch to turn the labels on and off
labelColor - set the color of the data lebels, defaults to black
labelBold - self-explanatory
labelLoc - "center" puts it in the center (up and down as well as
right and left) where "top" has it hovering above the bar

If you use a top location you probably want to adjust the yaxis
autoscaleMargin so the label doesn't push into the top of the chart.

I did some basic testing and then a whole lot of testing on my
particular project so I think it is pretty stable but no guarantees.
While I have been programming for years this is actually the first
javascript/jquery programming I have ever done. It works similar to
the tick labels. It basically builds a data box the width of the bar
and centers the text in there which should always give you a nice,
centered label. If you have any questions let me know.

[GillouStyle]

Works great!

[pcproff]

Can you post a working example of this? Please!!!