I added as a callback custom string to afterLabel in chart.js tooltip.
tooltips: {
callbacks: {
afterLabel: function (tooltipItems, data) {
return 'my nice string'
}
}
},
I am using default tooltip and if possible would like to continue so. Problem is that "afterLabel" comes at a new line and I haven't found where to define the width (or remove line break). Question is similar. How do I define width of tooltip and/or remove the line break.
How to correctly validate option value that uses Select2? I have a problem when some value is set before changing to any other. It looks correctly, but validation error is shown until I'll change value. Thank you for any help.
Try this solution.
How to make jQuery validation engine works well for select2()?
In select2.js file
Find this (Line 341)
if (this.indexOf("select2-") !== 0) {
And replace with
if (this.indexOf("select2-") !== 0 && this !== "validate[required]") {
I had the same problem. So in select2.min.js find this strokes (should be 2 strokes in script):
D(this.container,this.opts.element,this.opts.adaptContainerCssClass)
and add this code right after stroke you've found
,this.container.removeClass("validate[required]")
this should solve your problem.
add this css to your head tag.
.has-error {
border-color: #dd4b39 !important;
}
and this is how i am calling select2 for Jquery validation engine.
$("#form").validate( {
ignore: ".ignore, .select2-input",
rules: {
txtproduct: "required",
txtwarehouse: "required",
//txtdescription: "required",
txtquantity: {required:true,number:true},
txtrate: {required:true,number:true},
txtdiscounttype: "required",
txtdiscount: {required:true,number:true},
txtamount: {required:true,number:true},
},
highlight: function ( element, errorClass, validClass ) {
$(element).addClass("has-error");
if($(element).hasClass('select2-hidden-accessible'))
{
$(element).next().find("[role=combobox]").addClass('has-error');
}
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass("has-error");
if($(element).hasClass('select2-hidden-accessible'))
{
$(element).next().find("[role=combobox]").removeClass('has-error');
}
}
} );
}
Select2 library make the original selector hidden, and validation engine can not work for hidden element, so first is make the visible, then the validation engine can see it. The second is we need to make the selector element hidden for us, there are about 2 ways to do, such as set it’s opacity into “0”, or make it’s height/width as “0px”, actually we need both.
Below is the code example:
$("select").select2();
$.each($(".select2-container"), function (i, n) {
$(n).next().show().fadeTo(0, 0).height("0px").css("left", "auto"); // make the original select visible for validation engine and hidden for us
$(n).prepend($(n).next());
$(n).delay(500).queue(function () {
$(this).removeClass("validate[required]"); //remove the class name from select2 container(div), so that validation engine dose not validate it
$(this).dequeue();
});
});
Reference: http://wangweiqiang.net/how-to-make-jquery-validation-engine-works-well-for-select2/
I switched from v2 to v3 and when I use to hover over an event (marker) a tooltip would appear and it would have text that I wrote in show up.
Now that I am on v3 I don't see this text show up anymore, I only see the date.
Is this still possible?
You can use a the tooltip formatter:
tooltip: {
formatter: function() {
return "My custom Text";
}
}
Highcharts API Tooltip Formatter
I have implemented a wicked-chart which shows 4 series in the legend. Now I want to handle the series click event in legend and update some values outside the wicked highchart.
To be specific, I want to implement exactly like this jsfiddle but in java wicked-chart.
plotOptions:
{
series: {
events: {
legendItemClick: function(event) {
//Do something here
return false;
}
}
I did search all the methods of PlotOptions class but could get something similar to highcharts legendItemClick event.
My solution was not to find alternative for legendItemClick in wicket-charts as they do not have one. Instead I did this:
In your page html, give id="chart". Doing this highcharts shall fix your id to "chartVar" instead of changing it at each run.
<div wicket:id="chart" id="chart"></div>
In your javascript, define your series click using .highcharts-legend-item as below.
var onSeriesClick = function() {
var that = this;
for (var i=0;i<chartVar.series.length;i++)
{
$(".highcharts-legend-item:contains(" + chartVar.series[i].name + ")").click(function(){
// your legend click logic goes here
});
}
}
I'm using jqueryui combobox example at http://jqueryui.com/demos/autocomplete/combobox.html
I added the script seen below to catch the selected value of combobox:
<div id="selectedOpt">
</div>
<script>
$(document).ready(function() {
$("#combobox").change(function() {
var retval = $(this).val();
$("#selectedOpt").html("retval=" + retval);
});
});
</script>
However, it does not work as expected:
the div selectedOpt does not show selected value of combobox each time
the change event occurs
If "show underlying effect" is selected (pls try at url above), a standard dropdown list
appear. When trying to change value of
that dropdown list, then the div
selectedOpt is able to show value
correctly.
The goal is to have div selectedOpt display the selected option of the combobox.
Please advise and please explain why (1) does not work while (2) works.
PS: all neccessary js, css are correctly included.
Thanks for your kind attention.
SOLUTION FOUND:
http://robertmarkbramprogrammer.blogspot.com/2010/09/event-handling-with-jquery-autocomplete.html
Please change your script to match the code below:
<script>
function test()
{
var retval = $("[id *=dropdown] :selected").val();
$("#selectedOpt").html("retval=" + retval);
}
</script>
And call this script from the server side like this:
dropdown.Attributes.Add("onchange","javascript: return test();")
To show label or value of combobox in your div you have to include your function as an option. Something like this:
$( ".selector" ).autocomplete({
change: function(event, ui) {
$("#selectedOpt").html("retval=" + ui.item.value);
}
});
Use ui.item.label if you want a label instead.