I am using JqueryUI-resizable for one table. The table structure is getting generated by some external plugin, which gives table header and table body in different divs..
To make the columns resiable I am using:
$(".table-header .table th:eq(2)" ).resizable({
minWidth: 70,
alsoResize: ".table-container .table td:eq(2)"
});
This works fine. The issue is now the table column number is going to be dynamic.. there can be 'n' numbers of columns. How can i get this in for loop?
var colCount=$(".table-container .table-bordered th").size();
for (i = 2; i < colCount; i++) {
$(".table-header .table th:eq("+i+")" ).resizable({
minWidth: 70,
alsoResize: ".table-container .table td:eq("+i+")"
});
}
i am not getting how to do that, can anybody please help?
I would suggest using .each() like so:
$(".table-container .table-bordered th").each(function(i, el){
if(i > 1){
$(el).resizable({
minWidth: 70,
alsoResize: ".table-container .table td:eq(" + i + ")"
});
}
});
Related
I'm trying to create something similar to the image below. Where each column has a heading with it.
I know that chart.renderer.text can be used to create & place custom text on chart. However, I'm unable to find a way to fetch the column/node coordinates data(x,y) which would help me place them.
Also is there a programmatic way to do this task. For example, a function that fetches all the columns coordinates and populates all the headings from an existing list.
To summarize:
How to fetch a columns (x,y) Coordinates?
How to dynamically place headings for all columns from a list?
Image
You can get the required coordinates and place the headers in render event, for example:
events: {
render: function() {
var chart = this,
series = chart.series[0],
columns = series.nodeColumns,
isFirst,
isLast,
xPos;
if (!series.customHeaders) {
series.customHeaders = [];
}
columns.forEach(function(column, i) {
xPos = column[0].nodeX + chart.plotLeft;
isFirst = i === 0;
isLast = i === columns.length - 1;
if (!series.customHeaders[i]) {
series.customHeaders.push(
chart.renderer.text(
headers[i],
xPos,
80
).attr({
translateX: isFirst ? 0 : (
isLast ?
series.options.nodeWidth :
series.options.nodeWidth / 2
),
align: isFirst ? 'left' : (
isLast ? 'right' : 'center'
)
}).add()
)
} else {
series.customHeaders[i].attr({
x: xPos
});
}
});
}
}
Live demo: https://jsfiddle.net/BlackLabel/6Lvdufbp/
API Reference:
https://api.highcharts.com/highcharts/chart.events.render
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
Can you please take a look at This Demo and let me know how I can add some custom data from an array to tooltip in highchart?
var extras = ["Values More Than 1000", "Values More Than 2000", "Values More Than 3000", "Values More Than 4000", "Values More Than 5000"];
As you can see the array length is equal to the column numbers so the extras[0] with go with tooltip for column 1
some thing like
You can customize the tooltip with the formatter option.
tooltip: {
formatter: function () {
var index = this.series.points.indexOf(this.point);
return extras[index] + ': ' + this.y;
},
style: {
width: 250,
fontSize: '15px'
}
}
Here's a jsFiddle:
http://jsfiddle.net/opgp10mj/3/
I am using FLOT to display graphs.
To display tootip i am using https://github.com/krzysu/flot.tooltip.
Now I want to customize content of tooltip so I am using callback to set content of tooltip.
Code snippet:
tooltip: true,
tooltipOpts: {
content: function(label, xval, yval, flotItem){
var xAxis = plot.getXAxes();
return xval;
},
defaultTheme: false
}
But its giving me error
caught TypeError: Object function (label, xval, yval, flotItem){
var xAxis = plot.getXAxes();
return xval;
} has no method 'replace'
Could any one help me ?
Thanks in advance.
The documentation states that:
If you require even more control over how the tooltip is generated you can pass a callback function(label, xval, yval, flotItem) that must return a string with the format described.
xval is the numeric x axis value where the tooltip is located. It is not a string. The replace method it is failing on is the standard string.replace:
> "".replace
function replace() { [native code] }
I'm not using the flot tooltip. There is easier way to show tooltip and customize it. Check out this fiddler:
http://jsfiddle.net/Margo/yKG7X/5/
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
$("#tooltip").remove();
var x = item.datapoint[0],
y = item.datapoint[1];
showTooltip(item.pageX, item.pageY, x + " / " + y );
}
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200).fadeOut(6000);
}
Hope it helps :)
I've gotten examples of this working in highcharts, but I am having trouble getting this to work in highstocks. I am trying to get my tooltip to show some extra information about the point provided in the series but it seems like the values I put in my series data hash aren't being saved properly. The X and Y fields are being set ok since I can see the graph coming out correctly, but my other "fruit" and "name" fields are reporting null in the tooltip.
Here is an example of my series data:
{
name: 'food1',
fruit: 'apple',
x: Date.UTC(2010, 0, 1),
y: 216.4
},
{
name: 'food2',
fruit: 'banana',
x: Date.UTC(2010, 0, 4),
y: 116.4
}
And here is my loop inside my tooltip formatter:
$.each(this.points, function(i, point) {
s += '<br/>Name is = '+ point.name;
s += '<br/>y is = '+point.y;
s += '<br/>Fruit is = ' +point.fruit;
});
The tooltip will show:
Name is: undefined
y is: 216.4
Fruit is: undefined
And I want it to show:
Name is: food1
y is: 216.4
Fruit is: apple
Here is the jsfiddle link:
http://jsfiddle.net/hYtUj/5/
you are accessing the attributes in a wrong way
it dhould be like this
$.each(this.points, function(i, point) {
s += '<br/>Name is = '+ point.point.name;
s += '<br/>y is = '+point.y;
s += '<br/>Fruit is = ' +point.point.fruit;
});
updated your fiddle here
I hope this will help you
I am trying to show or hide a button based on the contents of a particular database field. I have the field defined as 'text', as the field may contain something like 1-1 or 1-20 or 0. If the field (arref1) is not equal to 0 then I want to show my button. Otherwise hide the button. Here is what I have so far but it dosen't work:
var resultRule = db.execute('SELECT arref1 FROM genrules WHERE title="'+client+'"');
if (resultRule!='0') {
var appliedRule1 = Ti.UI.createButton({
title:' Applied Rule ' + rows.fieldByName('arref1') + '',
bottom:120,
left: 80,
width: 'auto',
height:40,
borderRadius:5,
textAlign: 'center',
color:'#FFFFFF',
backgroundColor:'#7b4336',
backgroundSelectedColor:'#cc9933',
backgroundImage: 'NONE',
font:{fontSize:'20dp'}
});
win.add(appliedRule1);
appliedRule1.addEventListener('click',function(e)
{
var win = Ti.UI.createWindow({
url: 'appliedruledetail.js',
title:' Applied Rule' + rows.fieldByName('arref1') + ''
});
var client = '' + rows.fieldByName('genrule') + '' ;
win.client = client;
Ti.UI.currentTab.open(win);
}
);
} else{};
db.execute returns a Titanium.DB.ResultSet (which is an object) not a string.
Here is how you use a result set:
// Get the row with execute, returns a resultSet
var row = db.execute('SELECT * FROM genrules WHERE title="'+client+'"');
// Make sure its a valid row
if (row.isValidRow()){
// Now get the field from the current row
if(row.fieldByName('arref1') != '0') {
// Add your button here
}
}
row.close(); // Close the result set since were done with it
I heavily borrowed from this example in the documentation