how to customize data series label/tooltips with flot graph - label

By default the data series info/tooltips in flot graph looks like "legend_title of 2.00 = 1234567890.00" Is it possible to remove the .00 or customize to other format? Thanks

Flot doesn't really provide a "built in" tooltip but rather a way to create your own tooltips. From your question, I gather you are following the example here. If you want to customize what the tooltip says just call the showTooltip function with a different "contents".
For instance, To drop the zero's off the numbers call it as:
showTooltip(item.pageX, item.pageY,
item.series.label + " of " + x.toFixed(0) + " = " + y.toFixed(0));
But you can further format it any way you want!

Related

How to set axis label in more lines in igx-data-chart?

I need to custom my x-axis label so that it show the label in two lines. I've tried this:
let labelFormat = new IgxTimeAxisLabelFormatComponent();
labelFormat.format = "dd/MM/yyyy" + "\n" + "hh:mm:ss";
this.xAxis.labelFormats.add(labelFormat);
But the result is that it stays on a single line, like this:
.
Have you any advice?
Unfortunately, I dont think that is possible simply through the API. The label format method should be used for common formats like 'MM/dd/yy' or the ones that you are using.
BUT, if you want to change the actual appearance of the label then formatLabel should be the path to follow. While creating an example for you, I realized that the returned value is of type string, so the end result would not be suitable for you again.
public xAxis_FormatLabel(item: any) {
return item.Country + " \n" + "some other string";
}
Live demo:
https://stackblitz.com/edit/github-exckfz-bsvpqs?file=src%2Fapp%2Fdata-chart-type-stacked-column-series%2Fdata-chart-type-stacked-column-series.component.ts
Here you can find all the settings related to the Axis

How do you format text via JavaScript API within a CKEditor textbox?

Note: I am not looking to format an entire element a selection occurs in or to use the toolbar or working from within a plugin. The formatting commands will be sent via socket.io so I need a way to format selected text from outside of the CKEditor codebase (any ideas on how to make specific selections would be welcome as well, especially if there is some way to either select text without rendering that selection at the same time and/or formatting text based on start-end/length parameters such that the same result would be achieved - though this isn't an absolute requirement for me, I'd be happy being able to format just the selected text with things like font name, size, etc).
I managed to solve this with the following methods incase anyone is looking for a solution:
$('#' + Document.ID + '_contents iframe').contents()[0].execCommand('forecolor',false,'#00ff00');
$('#' + Document.ID + '_contents iframe').contents()[0].execCommand('JustifyCenter', false, null);
$('#' + Document.ID + '_contents iframe').contents()[0].execCommand('fontsize', false, 15);
$('#' + Document.ID + '_contents iframe').contents()[0].execCommand('fontname', false, names);

Hover on Jqgrid Column shows a tool-tip

I want to add a custom tooltip on jqgrid column headers.i hover over the column name and i get the tooltip(describes content related to that col)
I don't think there is any built-in way to add custom headers. If you use the headertitles option, it will just use the text as the title attribute.
You'll probably have to set them manually doing something like this:
$("th[role='columnheader']").attr("title", "some description");
You can add that code to one of the callbacks such as gridComplete.
Thanks David for your answer.
we can do one more thing as shown in the code below :
var thd = jQuery("thead:first", grid[0].grid.hDiv)[0];
jQuery("tr.ui-jqgrid-labels th:eq(" + columnnumber + ")", thd).attr("title","This column tells you about people who attended the training but missed the test");
if you want to show custome tooltip for all column you can probably add a loop from first column to last column and have the "text" in an array
var arr=["hello","bla bla","a ","b","c"];
and use this array in the loop

Jquery FullCalendar event timeslot hover method

I have FullCalendar up and running and it is very nice. My question here is how best to go about implementing timeslot hover functionality. It would be very nice if the user could have a visual cue for any given timeslot they are hovering over.
I found the following link http://code.google.com/p/fullcalendar/issues/detail?id=269 that gives a solution that adds a new structure in agenda cell row in order to provide access to individual cells. However, it is indicated that this solution will cause FullCalendar to become sluggish.
Before I start looking into the FullCalendar code, I thought I would ask if anyone else has any ideas or a solution.
My thoughts about approaching this are as follows:
Add placeholder events to each timeslot. The user would not see these events but these invisible events could be used to allow "hover" marking. My concern here is that adding the extra events would cause FullCalander to become sluggish. Also, the drag and drop functionality could be impacted.
FullCalender can determine what timeslot the user clicked in. Would it be possible to use the code that gets the timeslot clicked on in order to provide a reference for hover highlighting?
Other?
I am considering option 2 as a place to start. However, if anyone has another idea for a workable solution, I would be glad to hear it.
If I come up with a solution, I will post it here.
Thanks,
Jim
Here is a link to the FullCalendar site: http://fullcalendar.io/
I have found it very nice to work with.
The following code did the trick for me.
$('.ui-widget-content').hover(function(){
if(!$(this).html()){
for(i=0;i<7;i++){
$(this).append('<td class="temp_cell" style="border: 0px; width:'+(Number($('.fc-day').width())+2)+'px"></td>');
}
$(this).children('td').each(function(){
$(this).hover(function(){
$(this).css({'background-color': '#ffef8f', 'cursor': 'pointer'});
},function(){
$(this).prop('style').removeProperty( 'background-color' );
});
});
}
},function(){
$(this).children('.temp_cell').remove();
});
Make sure to add it after the code that instantiates the calendar and, it should work AS IS if the defaultView property of the JQuery calendar is 'AgendaWeekly'.
Cheers,
M
I had the same problem since it's sometimes hard to see which timeslot you're actually clicking on. To fix this I wrote a line to alter fullcalendar.js. Not the ideal solution, but it's a quick fix.
This is the line:
"<input type='hidden' class='timeslot-value' value='" + formatDate(d, opt('axisFormat')) +"'>" +
And placed it inside (around code line 3080):
"<th class='fc-agenda-axis " + headerClass + "'>" +
((!slotNormal || !minutes) ? formatDate(d, opt('axisFormat')) : ' ') +
"</th>" +
"<td class='" + contentClass + "'>" +
"<input type='hidden' class='timeslot-value' value='" + formatDate(d, opt('axisFormat')) +"'>" +
"<div style='position:relative'> </div>" +
"</td>" +
Now you can just place a tooltip hover on all fc-slots that have the .ui-widget-content class (the <td> you see above in the code). And get the hidden input value to display in that tooltip.
If jQuery, you can use the live event and get the corresponding first child and grab its value.
If extJS
Ext.onReady(function(){
Ext.QuickTips.init();
var tip = Ext.create('Ext.tip.ToolTip', {
target: 'your-calendar-id',
width: 140,
minHeight: 30,
delegate: '.ui-widget-content',
autoHide: false,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tip) {
tip.update('<dl><dt style="font-weight: 600;"><?php echo $this->translate('Start time')?>: </dt><dd>' + Ext.get(this.triggerElement).first().getValue() + '</dd></dl>');
}
}
});
});
I realize this isn't actually an answer but a comment on a previous answer but I've yet to reach the reputation to comment on answers.
W.R.T to the answer by #user4243287 one extra step I had to take was to put this logic in the 'viewRender' option when initializing my calendar in order to make sure that this continued to work when moving between weeks.

jqgrid: How to format master/detail grids?

I have a jqgrid with a subgrid.
I am attempting to apply different colors to master and detail grids. I have two rules: the first one is to alternate odd and pair colors and the other one is to apply specific CSS to the row, based on values of a specific field.
Both master & details grid, contains the following gridComplete functions, where obviously childnodes index varies cause tables contains different fields:
gridComplete: function () {
var _rows = $(".jqgrow");
for (var i = 0; i < _rows.length; i++) {
_rows[i].attributes["class"].value += " " + _rows[i].childNodes[4].textContent;
_rows[i].attributes["class"].value += " " + _rows[i].childNodes[4].innerText;
}
applyZebra("jqTicketgrid");
}
applyZebra function provides to alternate odd/pair colours and has already been tested on another grid which not contains a subgrid.
For the record, I found above solutions in other solved questions of this forum, and both works with "simple" jqgrids (not master/detail).
PROBLEM
The master grid is formatted only when I click to expand the detail rows, while detail subgrid never alternate colours, neither apply format based on cell contents...
Where I am wrong? Pheraps I must intercept another event which is not gridComplete? Otherwise with grid&subgrids it's impossible to use _rows[x] & childNodes[y] attributes?
Please ask for clarifications, if needed, thx.
Thanks in advance!
I suppose the error in your code is that you use $(".jqgrow") instead of $(".jqgrow", this) where this inside of gridComplete will be either DOM element of the <table> of the grid or the subgid (I suppose you use grid as subgrid).
Additionally I would not recommend you to use you current code at all. It's much more effective and simple to to use cellattr. The rawObject parameter allow you access all other cells of the current row. In the answer you will find an example of implementation.

Resources