how can I display data point on bar in barchart?
I don't want to use datatip or tooltip which will highlight data points only when they are moused over.
I want to display the data point always on the bar.
is there any right way to get it?
thanks.
I want exactly like this
following is my code
<p:barChart id="barChartId" value="#{myBean.myModel}"
orientation="horizontal"
stacked="true" extender="ext" animate="true" shadow="false" />
<h:outputScript>
function ext() {
this.cfg.highlighter = {
useAxesFormatters: false,
tooltipAxes: 'x'
};
this.cfg.legend = {
show: true,
location: 'ne',
placement: 'outside'
};
this.cfg.seriesDefaults = {
pointLabels : { show: true },
};
}
</h:outputScript>
here, highlighter and legend are working fine but point labels are not displaying on bar
Not sure if it will work...
Use the extender of the <p:barChart , like this:
<p:barChart value="#{myBean.myModel}" widgetVar="myBarChart" extender="my_ext"/>
<script type="text/javascript">
function my_ext() {
this.cfg.seriesDefaults = {
renderer:$.jqplot.BarRenderer,
pointLabels: {show: true}
};
this.cfg.stackSeries: true;
}
</script>
or this
<script type="text/javascript">
function my_ext() {
this.cfg.seriesDefaults = {
pointLabels: {show: true}
};
this.cfg.stackSeries: true;
}
</script>
Also take a look at the jqplot examples : Bar charts
Just in case someone doesn't crawl through the comments of the marked answer, as I didn't do in the first place.
The problem basically is not the configuration of the pointLabelselement, but rather that primefaces (as of 4.0) in its original state does not ship with the needed plugin of jqPlot included.
Therefore actually the solution is to make the needed plugin jqplot.pointLabels.min.js available. From a ticket in the bug tracker (http://code.google.com/p/primefaces/issues/detail?id=5378) I extracted, that primefaces uses jqPlot version 1.0.8.
download jqplot 1.0.8 from https://bitbucket.org/cleonello/jqplot/downloads/
add the plugin to your project (e.g. src/main/webapp/resources/jqplot-plugins)
add the plugin as script to your page (<h:outputScript library="jqplot-plugins" name="jqplot.pointLabels.min.js" />)
Related
I build an autocomplete function with jQuery and it's working fine but now I want to design the suggestion box which appears if you type in something. I also want to make some changes like how many results should be displayed.
$(function() {
$("#search_input").autocomplete({
source: "request",
select: function (event, ui) { //item selected
AutoCompleteSelectHandler(event, ui)
},
minLength: 3,
});
});
function AutoCompleteSelectHandler(event, ui)
{
var selectedObj = ui.item;
}
This is my jQuery function
This is how the suggestion box looks like.
How can I design it ? I also want to adjust the amount of results which I get displayed.
I was able to adjust the amount of results which I get displayed by filtering them in my python script.
I'm creating charts with the new ChartJS lib on Primefaces, but I could not find a way to add the value as label on the bar chart or line chart.
Looking on the internet, I've found a JS plugin called chartjs-plugin-datalabels! that does what I need.
How could I use this plugin on my Java Primefaces application?
Try this...
Add the script to your XHTML page:
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0"></script>
In your Java model for your chart set the Extender feature on.
chartModel.setExtender("chartExtender");
In your XHTML add this JavaScript code function to match when you set in #2 Java bean.
function chartExtender() {
var options = {
plugins: [ChartDataLabels],
options: {
plugins: {
// Change options for ALL labels of THIS CHART
datalabels: {
color: '#36A2EB'
}
}
},
data: {
datasets: [{
// Change options only for labels of THIS DATASET
datalabels: {
color: '#FFCE56'
}
}]
}
};
//merge all options into the main chart options
$.extend(true, this.cfg.config, options);
};
This was all based on their configuration guide https://chartjs-plugin-datalabels.netlify.com/guide/getting-started.html#configuration But this should at least get the plugin going.
Here is the code I am using on my page,
<li>Sound</li>
(in a menu which appears on all pages)
<a id="Sound"><a>
(on the page where i want to link to)
I have tried adding content to the tags with an id. But only in chrome the browser will not scroll down to the tag. These anchors work in IE&FF
Any ideas?
Turns out this was a bug in certain versions of chrome, posting workaround for anyone who needs it! :)
$(document).ready(function () {
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (window.location.hash && isChrome) {
setTimeout(function () {
var hash = window.location.hash;
window.location.hash = "";
window.location.hash = hash;
}, 300);
}
});
The workaround posted didn't work for me, however after days of searching this finally worked like a charm so I figured it was worth sharing:
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
If you somehow ended up here like me when finding out the anchor link to a SPA site doesn't work from an external site. Yep, the browser is just working too fast to load the skeleton of the page. And it couldn't find your anchor when it loads the page.
To work around this, just add in the lifecycle of your SPA (useEffect in React and mounted in Vue) some lines to check the url hash and do the scrolling yourself.
example using React
useEffect(()=> {
if(document.location.hash === '#some-anchor') {
setTimeout(()=> {
document
.querySelector("#some-anchor")
.scrollIntoView({ behavior: "smooth", block: "start" })
}, 300)
}
}, [])
I was having this problem as well (same page navigation using links) and the solution was very easy (though frustrating to figure out). I hope this helps - also I checked IE, Firefox, and Chrome and it worked across the board (as of 05-22-2019).
Your link should looks like this:
Word as link you want people to click
and your anchor should look like this:
<a name="#anchorname">Spot you want to appear at top of page once link is clicked</a>
Try using :
For menu page
<li>Sound</li>
in a menu which appears on all pages
<a id="#Sound"><a>
This works well in the all versions of Chrome!
I have tested it on my browser.
This answer is for someone who encountered same problem, but scripts didn't work. Try to remove loading='lazy' and decoding='async' from all images on the page or set width and height attributes to them.
It worked like a charm for me.
Here is my version of #Jake_ answer for Chrome / angular not scrolling to a correct anchor on initial page load up using ui-router (the original answer would throw my code into 'Transition superseeded' exceptions):
angular.module('myapp').run(function($transitions, $state, $document, $timeout) {
var finishHook = $transitions.onSuccess({}, function() { // Wait for the complete routing path to settle
$document.ready(function() { // On DOM ready - check whether we have an anchor and Chrome
var hash;
var params;
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
finishHook(); // Deregister the hook; the problem happens only on initial load
if ('#' in $state.params && isChrome) {
hash = $state.params['#']; // Save the anchor
params = _.omit($state.params, ['id', '#']);
$timeout(function() {
// Transition to the no-anchor state
$state.go('.', params, { reload: false, notify: false, location: 'replace' });
$timeout(function() {
// Transition back to anchor again
$state.go('.', _.assign($state.params, { '#': hash }), { reload: false, notify: false, location: 'replace' });
}, 0);
}, 0);
}
});
}, {invokeLimit: 1});
});
Not sure if this helps at all or not, but I realized my anchors in IE were working but not in Firefox or Chrome. I ended up adding ## to my anchors and this solved the issue.
example:
a href="##policy">Purpose and Policy Statement
instead of :
a href="#policy">Purpose and Policy Statement
<html>
<body>
<li>
Sound
</li>
<a id="Sound" href="www.google.com">I AM CALLED</a>
</body>
</html>
use this as your code it will call the anchor tag with id value sound
Simply change the call on your link to external.
I want to do autocomplete for textarea using entered values from browser. It is working for Textbox but not working Text area.
Normal textbox indeed get autocomplete behaviour for free.
As far as i know, you can get similar behaviour for textarea (even better, with all history) with installing lazarus plugin in your web browser.
Once installed, you will get a small cross icon on the top right corner. Clicking it will popup previous entries.
I usually don't like to install third party plugin in my web browser but this can save a lot of time and frustration when accidentally loosing all the text we already type.
First you need to include jquery UI then use the example code
HTML
<div class="ui-widget">
<label for="tags">Tags:</label>
<textarea id="tags" size="30"></textarea>
</div>
JS
$(function () {
$("document").ready(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"];
$("#tags").on("keydown", function () {
var newY = $(this).textareaHelper('caretPos').top + (parseInt($(this).css('font-size'), 10) * 1.5);
var newX = $(this).textareaHelper('caretPos').left;
var posString = "left+" + newX + "px top+" + newY + "px";
$(this).autocomplete("option", "position", {
my: "left top",
at: posString
});
});
$("#tags ").autocomplete({
source: availableTags
});
});
});
You Need to use external plugin
Scripts and CSS
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
HTML
<textarea id="demo"></textarea>
Script
<script>
$(function() {
//Get the Data from a JSON or Hidden Feild
var availableTags = ["jQuery.com", "jQueryUI.com", "jQueryMobile.com", "jQueryScript.net", "jQuery", "Free jQuery Plugins"]; // array of autocomplete words
var minWordLength = 2;
function split(val) {
return val.split(' ');
}
function extractLast(term) {
return split(term).pop();
}
$("#demo") // jQuery Selector
// don't navigate away from the field on tab when selecting an item
.bind("keydown", function(event) {
if (event.keyCode === $.ui.keyCode.TAB && $(this).data("ui-autocomplete").menu.active) {
event.preventDefault();
}
}).autocomplete({
minLength: minWordLength,
source: function(request, response) {
// delegate back to autocomplete, but extract the last term
var term = extractLast(request.term);
if(term.length >= minWordLength){
response($.ui.autocomplete.filter( availableTags, term ));
}
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(" ");
return false;
}
});
});
</script>
DEMO LINK
ANOTHER PLUGIN TEXTEXTJS
Browsers do not currently support autocompletion for a textarea. The autocomplete attribute is formally allowed for textarea in HTML5 and it has the default value of on, but this value just means that browsers are allowed to use autocompletion. They do not actually use it for textareas, apparently because it would seldom be useful and could actually be confusing. It is much more probably that a user wants to reuse his address information, entered in single-line text input fields, than some longish text he has entered in, say, a feedback form of some site and now some other site happens to have a comments textarea with the same name.
Thus, all you can do is to set up some autocomplete functionality of your own. (This is what other answers suggest in various ways.) This means that you need to store user input somehow (which is what browsers do for their own autocompletion operations too), e.g. in cookies or in localStorage. This generally means that the functionality works inside a site, on pages using the same technique to implement it, but not across sites.
I would like to implement a swipe gesture to replace the current Next/Prev-buttons in my web app. I figure I'll use either jQuery Mobile, QuoJS or Hammer.js to recognize the swipe gestures.
But how can I go about implementing the swipe animation (similar to this) to go with the gestures?
I'm not flipping between images as in the example, but html sections mapping onto Backbone Model Views.
This finally "solved" it. I'm using jQuery-UI with a slide effect, but it's not looking as good as I had hoped, I want it to look more like on iOS using Obj-C. But it will have to do.
var handleSwipeEvents = function() {
$(function() {
$('#myId').on('swipeleft', swipeHandler);
$('#myId').on('swiperight', swipeHandler);
function swipeHandler(event) {
function slideEffect(swipeLeft, duration) {
var slideOutOptions = {"direction" : swipeLeft ? "left": "right", "mode" : "hide"};
$('#myId').effect("slide", slideOutOptions, duration, function() { // slide out old data
var slideInOptions = {"direction" : swipeLeft ? "right" : "left", "mode" : "show"};
$('#myId').effect("slide", slideInOptions, duration); // slide in new data
// Alter contents of element
});
}
var swipeLeft = (event.type === "swipeleft");
slideEffect(swipeLeft, 300);
}
});
};
I have a feeling one can achieve better results using CSS3 and transition, but I haven't succeeded with that.