Menu
I'm trying to produce a line chart using Flot, but I want the data labels to show up on the chart - meaning, I want the value of each point to appear next to that point. I feel like this should be an option, but can't find it in the API. Am I just missing something, or does someone know a workaround?
Thanks in advance.
460
Floating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's placeholder attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating.
The raw data format is an array of points: [ [x1, y1], [x2, y2], ... ] E.g. Note that to simplify the internal logic in Flot both the x and y values must be numbers (even if specifying time series, see below for how to do this).
You can install a callback function at various points in the process, the function then gets access to the internal data structures in Flot. Set data: parsing data specification, calculating colors, copying raw data points into internal format, normalizing them, finding max/min for axis auto-scaling
In addition to the public methods, the Plot object also has some hooks that can be used to modify the plotting process. You can install a callback function at various points in the process, the function then gets access to the internal data structures in Flot. Here’s an overview of the phases Flot goes through:
Here is how I added the feature, including a pleasant animation effect:
var p = $.plot(...); $.each(p.getData()[0].data, function(i, el){ var o = p.pointOffset({x: el[0], y: el[1]}); $('<div class="data-point-label">' + el[1] + '</div>').css( { position: 'absolute', left: o.left + 4, top: o.top - 43, display: 'none' }).appendTo(p.getPlaceholder()).fadeIn('slow'); }); You can move the position and display css to a stylesheet.
84
The feature you want is requested here in the Flot Google group. It doesn't look like it was ever implemented (there's nothing in the API about putting any labels inside the chart itself). I think that the answer to your question is that No, it's not possible at this time to show values next to certain points on lines inside the graph.
Ole Larson, head developer on Flot, mentioned that showing labels inside the chart is different than anything else on FLot and that they would have to think about how to extend the API / plot parameters to do it.
That said, you might want to go post a question on the Flot forum or make a suggestion on the bug-tracker for the new feature. Ole Larson is actually really good at getting back to all the questions, bugs, and suggestions himself.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
