Considering the below data source and Listener function.
Data Source
var data = new google.visualization.DataTable(
{
cols: [{ type: 'string', label: 'Col1' },
{ type: 'number', label: 'col2' },
{ type: 'boolean', label: 'MyBoolean' }],
rows: [
{ c: [{ v: 'data1' }, { v: 1 }, {v: false}] },
{ c: [{ v: 'data2' }, { v: 2 }, {v:true}] }
]
});
Listener Function :
function ChartSelect()
{
var selectedItem = chart.getSelection()[0];
console.log(dataSource.getValue(selectedItem.row, 1));
}
I know below line will throw error
console.log(dataSource.getValue(selectedItem.row, 1));
Considering i clicked on first row, how can i read the second element of the datasource (i.e '1')?
Thank you
Got it, Its nothing more than fetching values from java script objects in object-literal-notation.
var selectedItem = chart.getSelection()[0]; // considering user clicked on first row
data["rows"][selectedItem.row]["c"][1]["v"] // will do the trick.
Related
I'm using Backgridjs to display data from json object to table. I'm currently using a formatter to format string-numbers into currency. Once I did that the sorting no longer work properly as it sorting as a string rather than number. How can I enable sorting with backgrid after formatting my column ?
Backgrid support numbers, int, date/momentjs. Couldn't find extension for currency
this is my formatter class
formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function(rawData) {
var re = /\-/;
if (rawData === "" || rawData == null) {
return "";
} else if (rawData.match(re)) {
return "-" + accounting.formatMoney(rawData.substr(1));
} else {
return accounting.formatMoney(rawData);
}
},
toRaw: function(formattedData) {
return formattedData;
}
}),
And this is my grid
var grid = new Backgrid.Grid({
collection: collection,
columns: [
{
name: "cost",
label: "Cost",
cell: "number",
formatter: currencyFormater
sortable: true
},
{
name: "type",
label: "Type",
cell: Backgrid.NumberCell,
sortable: true
}
]});
Example of data:
{ id: 1, cost: "150", type: 3 },
{ id: 2, cost: "12516.30", type: 2 },
{ id: 3, cost: "21400.85", type: 1 },
{ id: 4, cost: "146558.50", type: 1 },
{ id: 5, cost: "139982.75", type: 1 }
I ended up using sortValue to do specific sorting base on value. In my case I used parseFloat with the string value.
var grid = new Backgrid.Grid({
collection: collection,
columns: [
{
name: "cost",
label: "Cost",
cell: "number",
sortValue: function(model) {
return parseFloat(model.get("cost"));
},
formatter: currencyFormater
sortable: true
},
…
]});
I am using selectize to provide inline cell editing in slickgrid. I am able to load this component within cell. But when dropdown options container pops up and it goes beyond the slickgrid viewport, dropdown options container is getting truncated by slickgrid boundary. It should come over the grid. How can I bring the dropdown options container to the top.
var grid;
var columns = [
{ id: 'title', name: 'Title', field: 'title' },
{ id: 'duration', name: 'Duration', field: 'duration' },
{ id: '%', name: '% Complete', field: 'percentComplete' },
{ id: 'start', name: 'Start', field: 'start' },
{ id: 'finish', name: 'Finish', field: 'finish' },
{
id: 'effort-driven',
name: 'Effort Driven',
field: 'effortDriven',
editor: IEditor
},
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false,
editable: true,
autoHeight: true
};
function IEditor(args) {
var selectElement = $('<input type="text"/>');
args.container.append(selectElement[0]);
selectElement.selectize({
create: false,
maxElements: 1,
options: [
{
name: 'A',
value: 'a'
},
{
name: 'B',
value: 'b'
},
{
name: 'C',
value: 'c'
},
{
name: 'D',
value: 'd'
},
{
name: 'E',
value: 'e'
},
{
name: 'F',
value: 'f'
},
],
labelField: 'name',
valueField: 'value'
});
/*********** REQUIRED METHODS ***********/
this.destroy = function() {
// remove all data, events & dom elements created in the constructor
};
this.focus = function() {
// set the focus on the main input control (if any)
};
this.isValueChanged = function() {
// return true if the value(s) being edited by the user has/have been changed
return false;
};
this.serializeValue = function() {
return '';
};
this.loadValue = function(item) {
};
this.applyValue = function(item, state) {
};
this.validate = function() {
return { valid: false, msg: 'This field is required' };
};
}
$(function() {
var data = [];
for (var i = 0; i < 3; i++) {
data[i] = {
title: 'Task ' + i,
duration: '5 days',
percentComplete: Math.round(Math.random() * 100),
start: '01/01/2009',
finish: '01/05/2009',
effortDriven: i % 5 == 0,
};
}
grid = new Slick.Grid('#myGrid', data, columns, options);
grid.init();
});
I have added selectize drop down in Effort Driven column in this plunker
I used to use chosen as my enhanced select but I ran into exactly this problem, and it wasn't solvable due to the HTML it used.
I had to jump ship to Select2. There are examples for this here - check out 'Select2 javascript drop-down editor' and 'Select2 Multiselect javascript drop-down editor'.
Make sure your z-index is bigger than the ones SlickGrid uses. If I remember correctly SlickGrid's highest one was 11 or 12, so with a 13 you should be good to go. Also check the overflow of the cells' css classes; it might happen that your context menu is simply cut off.
I do not understand why I've got an error message, could anyone help me understand and sweat I can not do it again. I junior developer and I need your help
i have this The 'get' property does not exist on the 'any []' type.
let nodes = [];
nodes = [
{ id: 1, label: "PV Panels", color: "#3333ff" },
{ id: 2, label: "Gensets",color: "#cc00ff" },
{ id: 3, label: "Battery",color: "#ff0066" },
{ id: 4, label: "Wind Turbines",color: "#000099" }
];
net.on("selectNode", function (params) {
var selectedNode = nodes.get(params.nodes[0]);
alert("You've selected node: " + selectedNode.label);
});
With some modification the get() works.
let nodes = new vis.DataSet ([
{ id: 1, label: "PV Panels", color: "#3333ff" },
{ id: 2, label: "Gensets",color: "#cc00ff" },
{ id: 3, label: "Battery",color: "#ff0066" },
{ id: 4, label: "Wind Turbines",color: "#000099" }
]);
net.on("selectNode", function (params) {
var selectedNode = nodes.get(params.nodes[0]);
alert("You've selected node: " + selectedNode.label);
});
After this fact can you tell me how I display its information in an input.
I thought about using a getElementById.
What do you think?
The get method doesn't exist on an array. You might want to use the find method
More information can be found here: https://www.w3schools.com/jsref/jsref_find.asp
To show the result in an input field:
document.getElementById('yourInputFieldID').value = selectedNode
Assuming selectedNode variable is a string.
I have two line chart that are identical and use same data.
I have written an update code that update both the charts:
c2updateLineGraph(2,[[0, 105993],[25, 659727],[50, 648727],[75, 636627],[100, 636627]]);
function c2updateLineGraph(index,data)
{
c2chart1.series[index].setData(data, true);
c2chart1p.series[index].setData(data, true);
}
My data structure is:
var c2graphdata=[{
name: 'Current year',
data: []
},
{
name: 'Reapair v1',
data: []
},
{
name: 'Repair v2',
data: []
},
{
name: 'Replacement v1',
data: []
},
{
name: 'Replacement v2',
data: []
},
{
name: 'Facelift v1',
data: []
},
{
name: 'Facelift v2',
data: []
},
{
name: 'Reconstruction v1',
data: []
},
{
name: 'Reconstruction v2',
data: []
},
];
Issue is c2chart1 is getting updated, but not c2chart1p. Trick is if I swap the position of c2chart1 and c2chart1p, then c2chart1p get updated only.
I could replicate the issue here jsfiddle.net/hhh2zx3w Check after 8 secs only chart1 gets updated, not chart2
Reset the graph data and setting the data agin will work for you . just change
function c2updateLineGraph(index, data) {
c2chart1.series[index].setData(data, true);
c2chart1p.series[index].setData(c2graphdata, true); //reset the graph data
c2chart1p.series[index].setData(data, true);
}
Updated fiddle:
http://jsfiddle.net/hhh2zx3w/2/
Hope it helps
I am new to development, and learning angular 2 and node. Now working on a project with API integration and in the code below. I am sending all JSON data to array, I tried using JSON.stringify but did not get the desired output. And I need this kind of output:
Area = [
{ value: '3', label: 'sports' },
{ value: '4', label: 'fest' },
{ value: '5', label: 'music' }
];
My ts code is like this
var Area = [];
area=> {
console.log(departments);
area.map(function(areas) {
var array = {"value":area._id,"label":area.areaFor};
Area.push(array);
})
console.log(Area);
},
error => {
console.log(error);
});
but i am getting this output in console
label
"sports"
value
2
label
"fest"
value
3
label
"music"
value
5
You can try this, I changed area to areas inside map function.
area = [
{ value: '3', label: 'sports' },
{ value: '4', label: 'fest' },
{ value: '5', label: 'music' }
];
constructor() {
var Area = [];
Area = this.area.map(function(areas) {
return {"value":areas.value,"label":areas.label};
})
console.log(Area);
}