Am using AngularJS UI-Grid. Have a constant grid with 6 columns and 4 rows. In this grid i have a specific requirement where only one cell is a date picker, one cell is a dropdown, and few cells are number only. I know that for the entire column this can be applied. Is there a way to apply this for a particular cells individually?
Any sample would be of great help.
Thanks in advance.
one option is to use a template that decides what kind of cell its going to be in relation to some row-entity-property.
I created a Plunkr showcasing such a scenario.
The setup consists of a cellTemplate:
cellTemplate: "<button ng-if=\"!row.entity.datepicker\" ng-click=\"grid.appScope.delete(row)\">DELETE ROW</button><input type=\"date\" ng-if=\"row.entity.datepicker\">"
And for this example I created a datepicker:true/false property in my row-data.
for(var i = 0; i < 3; i++) {
editor.mySeasons.push({myDate: new Date(new Date().getTime() + Math.random().toFixed(12) * 100000000000), datepicker: false});
}
editor.mySeasons.push({myDate: new Date(new Date().getTime() + Math.random().toFixed(12) * 100000000000), datepicker: true});
Hope that helps.
Related
I have a datetime chart to show daily data within 3 years in a series,
I set the x-Axis formatter to display month of a year in the general view
Screen Capture of General View
I set the 'zoomtype' to 'x', when it zoom to daily level,
the x-axis still show the month base on the formatter I set before
Screen Capture zoomto daily level
How can I change my x-axis formatter when detect zoom action?
formatter: function () { // Single digit month
var mth = Highcharts.dateFormat('%b', this.value).replace(/^[0]+/g, " ");
var year = Highcharts.dateFormat('%Y', this.value);
if (mth == 'Jan')
return mth + '<br>' + year;
else
return mth;
},
Some Method I have tried, but failed :
1) Make 3 different x-axis stand for 'day', 'month' and 'year', add/remove those axis when different zoom level is detected
2) use chart.update() in selection event
3) use chart.redraw() in selection event
Thanks!!
update
Thanks Pawel, I have tried below syntax inside the xAxis Formatter, but seems cannot return the getExtremes correctly,
please kindly advice, thanks!!
var extreme = this.getExtremes();
var extreme = this.xAxis[0].getExtremes();
I am attempting to create a bar graph that when independent sliders are moved they change two bar graph svg heights at the same time and they are stacked, they are different colors show it shows two separate values in the same graph, basically showing growth vs the current. I am using jquery-ui and D3.js. Currently it only moves the one svg elements instead of both at the same time, Id like them both to move at the same time.
HTML
<div id="slider" class="slider">
<label for="amount">Age</label>
<input type="text" id="amount1" style="border:0; font-weight:bold;">
</div>
<div id="slider1" class="slider">
<label for="amount2">Retirement Age</label>
<input type="text" id="amount2" style="border:0; font-weight:bold;">
</div>
JS
//initialize sliders
jQuery(document).ready(function($) {
$("#slider").slider({
max: 100
});
$("#slider").slider({
min: 18
});
$("#slider1").slider({
max: 100
});
$("#slider1").slider({
min: 18
});
//slider actions
$("#slider, #slider1").slider({
value: 10,
animate: "fast" ,
slide: function (event, ui) {
//capture the value of the specified slider
var selection = $("#slider").slider("value");
var selection1 = $("#slider1").slider("value");
//fill the input box with the slider value
$( "#amount1" ).val( selection );
$( "#amount2" ).val( selection1 );
//set width and height, actually I'm a little confused what this is for
var w = 200;
var h = 200;
//data arrays for svgs
var dataset = [];
var dataset1 = [];
//fill the data arrays with slider values
dataset.push(selection);
dataset.push(selection1 + selection);
//draw rectangle on the page
var rectangle = svg.selectAll("rect")
.classed("collapse", true)
.data(dataset);
**
THIS IS WHERE IT CONFUSES ME
**
//I draw the second rectangle here, however I choose the same svg element,
//Im not sure what other way to get it to appear in the same space but
//I am sure this is what is causing my issues
var rectangle1 = svg.selectAll("rect")
.classed("collapse", true)
.data(dataset1);
//not sure what this does
rectangle.enter().append("rect");
rectangle1.enter().append("rect");
rectangle.attr("width", 200).transition().attr("fill", "#A02222").attr("height", function (d) { console.log('d is ' + d);
return d;
}).attr("x", function (d) {
return 40; //I dont know why I return 40?
}).attr("y", function (d) {
return 40; //Same here dont know why I return 40?
});
rectangle1.attr("width", 200).transition().attr("height", function (d) { console.log('d is ' + d);
return d;
}).attr("x", function (d) {
return 40; //I dont know why I return 40?
}).attr("y", function (d) {
return 40; //Same here dont know why I return 40?
});
}
// slider actions ends here
});
//Create SVG element
var svg = d3.select(".svgContain").append("svg").attr("width", 125).attr("height", 300);
});
For starters, you may want to follow this tutorial: http://bl.ocks.org/mbostock/3886208
The "return 40;" that you are wondering about are actually what will specify the position and dimensions of the rect's you're appending to the svg. Those shouldn't just be 40, they should be bound to values in the data set, or based on the index of the bar's series in the set of series or something more meaningful than 40.
There is a stacked bar chart data processor that will take a set of series and spit out a new set of series coordinate definitions that make it easier to calculate how rect's will stack in svg coordinate space: https://github.com/mbostock/d3/wiki/Stack-Layout
Then, there's the more general issue of how to deal with these "nested" data sets where you have series, and in the series there are values and you don't want to have to manually track and select individual series. There are several ways to handle this sort of situation. If you know you will only ever have two series, and you really want fine-grained control over each independently, you could assign the top level object an id and then start the data join for each of the plots by selecting that top level object by id... eg:
var container1 = d3.select("#myContainer1);
container1.selectAll("rect").data(myData1).append("rect");
var container2 = d3.select("#myContainer2);
container2.selectAll("rect").data(myData2).append("rect");
If you do something like that, the first select basically sets the context of the subsequent selects. So, only the rects inside of the "#myContainer1" or "#myContainer2" will get selected by each "selectAll" based on which context you're in.
The other approach is to use nested selections. Nested selections are a little more complicated to wrap your head around, but 90% of the time, this is the approach I use. With nested selections, you would restructure your data slightly and then apply nested selects/joins to bind each series to a dom element and then the values of each series to subelements of each of the series dom elements.
First, read this: http://bost.ocks.org/mike/nest/
and then try making your data something more like this:
data = [
{ key: "series1", values: [...]},
{ key: "series2", values: [...]}
];
Then, you will want to do a nested selection where you start with a selection of the "data" array and bind it to whatever svg or html element you have that wraps each of the two series.
var series = d3.select("svg").selectAll("g.series")
.data(data, function(d){return d.key; });
series.enter().append("g").attr("class", "series");
At this point, d3 will have added a "g" element to your svg element for each series and bound the series object (including the key and values array) to the appended elements. Next, you can make a nested selection to add series-specific elements to the g element... ie:
var rect = series.selectAll("rect").data(function(d) { return d.values });
rect.enter().append("rect");
Note that we used a function in our ".data(...)" call. That's because the values we want passed to the join actually depend on which specific series is being processed by D3.
Now, you'd have a rect added to the g element for each value in each series. Since you used d3 to do the data binding and you used the key function in the first select (".data(data, function(d){return d.key;}"), future selects done in the same nested/keyed manner will update the right g and rect elements.
Here's a Fiddle that demonstrates the concept:
http://jsfiddle.net/reblace/bWp8L/2/
A key takeaway is that you can update the data (including adding additional series) and the whole thing will redraw correctly according to the new nested join.
I have highchart like this.
How can I display the legend (Firefox,IE,chrome...) text in next row if the text is too long? Image describing my problem is
P.S. I am not familiar with jQuery.
Expecting a solution
You will need to make use of a labelFormatter
labelFormatter: function()
{
var legendName = this.name;
var match = legendName.match(/.{1,10}/g);
return match.toString().replace(/\,/g,"<br/>");
}
I have made an edit to the fiddle and you can find it Here. It pushes the legend item text to next line after every 10 characters. Guess this is what you needed.Hope this helps.
Is it possible to add the title(tooltip) attribute to a listbox ot twincolselect in Vaadin?
I've tried to use setItemCaptionPropertyId() along with setItemCaptionMode() but in vain.
At the end when Vaadin renders the page, the resultant html has only the value attribute to the select component and no title attribute is present.
Update - my question should have been re-phrased to say - I need tooltip on each individual item (individual row) within a listbox or twinselect.
Here is an example for Nativeselect component
// Create the selection component
final NativeSelect mynativeselect= new NativeSelect("myLabel");
// Add some items
for (int i = 0; i < 25; ++i) {
mynativeselect.addItem(i);
}
//set tooltip
mynativeselect.setDescription("My tooltip");
I want to use jquery fullcalendar but I want to hide certain hours.
I want to show the calendar from 8.00am->11.00am and from 16:00pm->19:00pm
So the hours between 11:00am and 16:00pm must be 'hidden'.
I don't see an option to do this :
How can I force this ?
thx in advance
Kristof
You don't want to modify fullcalendar source because you want to be up to date with official branch.
Then the only way is to hide appropriate rows (hours) after fullcalendar initialization with javascript:
//hide rows with unused hours. Class names can be found in html source of
//rendered fullcalendar (fc-slotxx)
for(var i=0; i<gapshours.length; i++)
{
var gapclass = '.' + gapsclasses[i];
$(gapclass).hide()
}
//display hours for clipped borders
for(var i=0; i<sethourhours.length; i++)
{
var hourclass = '.' + sethourclasses[i] + ' th'
$(hourclass).text(sethourhours[i]);
}
After that you must remember of clipping and moving events' periods just for view purposes.
It would be very helpful to see your code; here's my best guess.
In your fullCalendar initialization code, I would use an event generating function (see event generating function)
events: function(start,end,callback){
//get your data from wherever you're getting it
var events = some_ajax_method(start, end);
//filter it down to the times you want to show
events = $.map(events, function(event){
if (event meets time criteria)
return event
else
return null;
});
callback(events);
}