cleroux / flot.barlabels Goto Github PK
View Code? Open in Web Editor NEWFlot Bar Labels plugin adds value labels to bar charts.
License: MIT License
Flot Bar Labels plugin adds value labels to bar charts.
License: MIT License
Hello,
Is it possible to rotate the label 90° ?
I tried to rotate de context, as following, before/after the call to addText but it does not work.
The angle parameter is not used by Flot so it cannot work neither.
barLabels.context.rotate(270 * Math.PI / 180);
barLabels.addText(layer, px, py, text, series.labels.font, angle, width, halign, valign); (Line 146)
Thanks for any idea !
Really like what you've done here but I believe you might have a bug with Stacked Bar charts. The labels do show up, but they fail to account for the base offset for each stacked bar. Do you by any chance have a solution for this?
Hello,
When I am using ordered bars (to have multiple categories side by side), all label are "Nan".
Because the series.data[i][2] can be empty and so "b" variable is undefined.
var b = series.data[i].length > 2 ? series.data[i][2] : 0; (line 59)
Could you add a check to prevent this crash please ?
(Something like for example): var b = series.data[i].length > 2 && series.data[i][2] ? series.data[i][2] : 0; )
Thank you for your help !
Hello Cédric,
When resizing the screen, the labels disappear. (And the same issue replicated when the graph drawn multiples times...)
The cause seems to be that when deleting the labels from Dom (see below), the cache inside of Canvas class still keeping them, becomes invalid then.
$(placeholder).find(".flot-bar-labels > .flot-bar-label").remove();
Could you so remove them from the cache when delelting from Dom, please ?
For example, something as following:
var layer = "flot-bar-labels";
if (barLabels == null) {
barLabels = new Canvas("flot-bar-labels", placeholder);
}
else {
barLabels.removeText(layer);
barLabels.render();
}
$(placeholder).find(".flot-bar-labels > .flot-bar-label").remove();
as removeText() will only make the texts inactive, render() method will remove actually from the cache.
I have tested this fix.
Possible alternative not tested: in the current version of Flot, Canvas.clearCache() method could remove everything (without specifing the layer). My Flot version too old and this method not existing, so I could not check whether this method could also fix.
Thank you !
Hi, I'm facing issues while resizing the chart.
The position of the labels remain the same while resizing the chart.This makes the labels to be displayed at incorrect positions.
Any fix available??
Hi,
Could you tell me whether it is possible to show the label outside but at the bottom of the bar and not at the top as now ?
I have tried to add this option as following (naming bottom_outside position) but it is not working when y is positive.
else if (pos == positions.bottom_outside) {
if (y >= 0) {
valign = "top";
py = series.yaxis.p2c(b) + plot.getPlotOffset().bottom;
} else {
valign = "bottom";
py = series.yaxis.p2c(b) + series.labels.padding;
}
Thank you for your help
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.