I'd like to create a Resource Gantt with AnyGantt, currently, when mouse pointer move to the task, it show the resource name and starttime/endtime. I would like to show task name and starttime/endtime.(with following data, I would like to show "task1", not "Equipment#1")
Anyone can help?
Thanks!
[ {"id": 13, "name": "Equipment#1", "periods": [{"id": "task1", "end": 1494099000000, "fill": "green", "start": 1494055800000}]}]
First of all, period's ID is required field and must be unique for gantt chart live edit purposes. You can set any custom field in your raw data like this:
var rawdata = [{
id: 13,
name: "Equipment#1",
periods: [
{
id: "task1",
start: Date.UTC(2017, 4, 6),
end: Date.UTC(2017, 4, 7),
periodCustomName: "Task 1" //This value will be used in tooltip's title.
}
]
}];
Since the data is ready, you have to set custom title format for timeline's tooltip:
//Getting gantt chart's timeline to work with its tooltip.
var timeline = chart.getTimeline();
//Gettnig timeline's tooltip.
var tlTooltip = timeline.tooltip();
//Setting tooltip title format function to access your custom raw data field.
tlTooltip.titleFormat(function() {
//If period is hovered.
if (this.period) {
//Return periodCustomName-field if specified.
return this.period.periodCustomName || this.getData('name');
}
//Else return name of data item ("Equipment#1")
return this.getData('name');
});
Related
Is there a way to implement new milestones via data feed from database? I checked the example below but couldn't figure out
https://www.amcharts.com/kbase/time-line-chart-date-based-milestones/
I use "dataLoader" to feed the values into graphs I can just create a new column in my table for the milestones question is how to update it?
The milestones in that example are guides, so they don't normally get updated in any process that modifies the chart's dataProvider. You can use the complete callback to create/update your chart guides:
AmCharts.makeChart("chartdiv", {
// ...
dataLoader: {
url: "...",
complete: function(chart) {
//add/modify guide objects through chart.valueAxes[0].guides or
//directly to the chart object through chart.guides
chart.valueAxes[0].guides = [{
"value": new Date(2016, 2, 5),
"label": "MILESTONE #1",
"position": "top",
"fontSize": 15,
"tickLength": 15
},
// .. etc
];
chart.validateData(); //redraw chart
}
},
// ...
});
I have two databases with similar data (organized differently) and I've created a view for each one returning the same response. I have notice that the time response of the query is different even returning the same response, one being 3182ms, other being 217ms approximately, having queried 5 times.
I query both using:
curl -x GET ...db1/_design/query1/view/q1?group=true and
curl -x GET ...db2/_design/query1/view/q1?group=true.
I have checked the data sizes of the design documents using curl -x GET ...db1/_design/query1/_info. The design data size of the first is 146073878 bites and the second is 3739596 bites.
I thought both should have the same size, because they return the same view, and i havent used any filters, both views beeing equal.
Somebody can explain me why the same view created by different databases have different sizes?
My data is organized using two differents roots, but the same data, changing only the root:
Customer data in the root:
{
"c_customer_sk": 65836,
"c_first_name": "Frank",
"c_last_name": "White",
"store_sales": [
{
"ss_sales_price": 20.24,
"ss_ext_sales_price": 1012,
"ss_coupon_amt": 0,
"date": [
{
"d_month_seq": 1187,
"d_year": 1998
}
],
"item": [
{
"i_item_sk": 10454,
"i_item_id": "AAAAAAAAGNICAAAA",
"i_item_desc": "Results highlight as patterns; so right years show. Sometimes suitable lips move with the critics. English, old mothers ought to lift now perhaps future managers. Active, single ch",
"i_current_price": 2.88,
"i_class": "romance",
"i_category_id": 9,
"i_category": "Books"
}
]
},
{
"ss_sales_price": 225,
"ss_ext_sales_price": 1023,
"ss_coupon_amt": 0,...
View function for customer in the root:
function(doc)
{
for each (store_sales in doc.store_sales) {
var s=store_sales.ss_ext_sales_price;
if(s==null){s=0}
for each (item in store_sales.item){
var item_id=item.i_item_id;
var item_desc=item.i_item_desc;
var category=item.i_category;
var class=item.i_class;
var price=item.i_current_price;}
if(category=="Music" || category=="Home" || category=="Sports"){
for each (date in store_sales.date){
var g=date.d_month_seq;}
if (g>=1200 && g<=1211){
emit({item_id:item_id,item_desc:item_desc, category:category, class:class, current_price:price},s);
}
}}}
reduce:_sum
Example of answer:
key:
{"item_id": "AAAAAAAAAAAEAAAA", "item_desc": "Rates expect probably necessary events. Circumstan", "category": "Sports", "class": "optics", "current_price": 3.99}
Value:
106079.49999999999
Item data in the root:
{
"i_item_sk": 10454,
"i_item_id": "AAAAAAAAGNICAAAA",
"i_item_desc": "Results highlight as patterns; so right years show. Sometimes suitable lips move with the critics. English, old mothers ought to lift now perhaps future managers. Active, single ch",
"i_current_price": 2.88,
"i_class": "romance",
"i_category_id": 9,
"i_category": "Books",
"store_sales": [
{
"ss_sales_price": 20.24,
"ss_ext_sales_price": 1012,
"ss_coupon_amt": 0,
"date": [
{
"d_month_seq": 1187,
"d_year": 1998
}
],
"customer": [
{
"c_customer_sk": 65836,
"c_first_name": "Frank",
"c_last_name": "White",
}
]
},
{
"ss_sales_price": 225,
"ss_ext_sales_price": 1023,
"ss_coupon_amt": 0,...
View for item on root:
function(doc)
{
var item_id=doc.i_item_id;
var item_desc=doc.i_item_desc;
var category=doc.i_category;
var class=doc.i_class;
var price=doc.i_current_price;
if(category=="Music" || category=="Home" || category=="Sports"){
for each (store_sales in doc.store_sales) {
var s=store_sales.ss_ext_sales_price;
if(s==null){s=0}
for each (date in store_sales.date){
var g=date.d_month_seq;}
if (g>=1200 && g<=1211){
emit({item_id:item_id,item_desc:item_desc, category:category, class:class, current_price:price},s);
}
}}}
reduce:_sum
Returning the same answer.
I have made the cleanup and compaction of the designs and the time response of the database which the itens data are in the root is much faster, and the sizes of the data size is smaller too, but I dont know why.
Can someone explain me?
could it be a difference of database compaction? When you replicate an existing databases to an empty one, only the last revision of each documents are sent to the new one, making it potentially way lighter. The same applies to views
I have a data source, which gets built from a JSON data string, containing a field called Fruit:
[{
... /other entries
fruit: [{
name: 1
}, {
name: 2
}, {
name: 3
}]
}]
I'm using this field in a KGrid, and would like to do a comma seperated list of links, from the names:
1, 2, 3
Currently, I'm hooking into the dataBound function, and build this up individually for the fruit field, is there an easier way to do this with, let's say, a template? I tried to look up information about something similar in the docs, but couldn't find anything pertaining to splitting arrays?
I wouldn't transform the data at the data source. That job is the responsibility of the UI component. Instead move your logic to the column template function of your grid. [ API reference ]
$('#grid').kendoGrid({
columns: [ {
field: 'fruit',
template: function(dataItem) {
var html = [];
for (var i = 0; i < dataItem.length; i++) {
html.push('' + dataItem[i].name + '');
}
return html.join(', ');
}
}],
dataSource: data
});
When loading a dgrid from a dojo store, is there a way to specify a column to be sorted by default.
Say I have 2 columns, Name and Email, I want the name column sorted by default when the grid is first loaded. What I want is the equivalent of the user clicking on the 'Name' header (complete with the sort arrow indicating the sort direction).
Thanks,
John
You can do something like this :
var mygrid = new OnDemandGrid({
store : someStore,
queryOptions: {
sort: [{ attribute: "name" }]
}
// rest of your grid properties
}, "someNode");
dgrid 1.1.0 - set initial/default sort order
var TrackableRest = declare([Rest, SimpleQuery, Trackable]);
var store = new TrackableRest({target: apiUrl, useRangeHeaders: true, idProperty: 'id'});
var grid = new (declare([OnDemandGrid, Selection, Editor]))({
collection: store,
sort: [{"property":"name", "descending": false}],
className: "dgrid-autoheight",
columns: {
id: {
label: core.id
},
category_text: {
label: asset.category
},
name: {
label: asset.model,
},
Modifying an element using set of a KendoUI grid removes the selection.
If a have a KendoUI DataSource defined as:
var dataSource = new kendo.data.DataSource({
data : [
{ "id": 1, "item": "item1", "value": "foo" },
{ "id": 2, "item": "item2", "value": "foo" },
{ "id": 3, "item": "item3", "value": "foo" },
{ "id": 4, "item": "item4", "value": "foo" }
],
pageSize: 5
});
and the grid as:
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
columns : [
{ field: "item", title: "Item" },
{ field: "value", title: "Value" }
],
selectable: "row"
}).data("kendoGrid");
If I click in a row (select it) and then update the model using the following code:
dataSource.data()[0].set("value", "bar");
The selection gets lost.
Sample code in JSFiddle here
Instructions:
Select any row.
Click the button for changing the value of the first row.
Is there any way of preserving selection when updating a local DataSource?
This is expected behavior when a change event of the dataSource occurs the Grid reacts and it is redrawn. You can silently update the field like this:
dataSource.data()[0].value = "bar";
However this will not trigger the change event and the Grid wont be updated either.
To preserve the selection of the Grid between 'refreshes' you can use the approach covered in this code library article. You can store them in a cookie or in the memory, it is up to you.
Regards
I was able to find solution for a very similar problem. I tried to select next row after modifying selected row, but updating data item cleared selection.
The trick was to save data-uid of the element to be selected. After update, I simply select element by uid.
var selected = grid.select();
var next = selected.next();
var nextUid = next.data("uid");
var dataItem = grid.dataItem(selected);
if (dataItem) {
dataItem.set("value", dataItem.get("value") - 1);
if (next.length)
grid.select($("#grid").find("*[data-uid='" + nextUid + "']"));
}
You can try it here.