I am creating a dashboard with Google Viz and am having trouble with the select event when the data is filtered. It works fine when the page loads and nothing is filtered. However, after filtering the data, it does not select the correct row from the dataTable on 'select' events. Here is my jsfiddle and my listener:
http://jsfiddle.net/5E7zX/1/
google.visualization.events.addListener(rBubbleChart, 'select', function() {
var selection = rBubbleChart.getChart().getSelection();
var item = selection[0];
var school = data.getValue(item.row, 1);
alert('school is: ' + school);
});
When it is unfiltered, the alert box displays the school that was selected. However, when it is filtered on a school, the alert box does not display the correct school (the exception is Air Base Elem because that is the first school in the list).
Any thoughts on how to get the correct row of data once the data is filtered? Thanks.
The selection indices refer to the data as seen by the chart, which is not necessarily the same as your base DataTable, so you need to check against the data used by the chart by calling the getDataTable method to fetch the chart's data, and then referencing that when getting a value:
google.visualization.events.addListener(rBubbleChart, 'select', function() {
var selection = rBubbleChart.getChart().getSelection();
// get the data used by the chart
var dt = rBubbleChart.getDataTable();
// test selection array length, since it can be zero when a user deselects a point!
if (selection.length) {
var item = selection[0];
var school = dt.getValue(item.row, 1);
alert('school is: ' + school);
}
});
Related
In flutter I'm trying to have one of the columns of a DataTable be a DropdownButton. I would like the DataTable rows to populate from getUsers initially, then be able to edit the cell cell with a the DropdownButton based on the ratingList.
So I would like to be able to change the value of the DropdownButton cell to any of the values in the ratingList: ['Ok', 'Good', 'Great', 'Amazing']; Note I want to be able to select 'Great' or 'Amazing', these aren't one of the initial populated values.
It is essential for the data to be loaded from getUsers, as this will be grabbed from Firestore eventually. Then have the ability to change a DropdownButton cell after the data is loaded, based on the ratingList of values, which is a complete list of the ratings.
See below for example code (DropdownButton doesn't change cell value), also in DartPad.
Thanks in advance!
Just put user.rating = newValue into setState block.
Like this.
onChanged: (String newValue) {
setState(() {
//help!
user.rating = newValue;
});
},
I need to add a new record to one of the interactive grids on my page via javascript code.
I know how to get an record from the grid:
var model = ig$.interactiveGrid("getViews","grid").model;
var record = model.getRecord(rowID);
But how do I add a record? Is there a function for that?
What I am trying to do is get selected rows from one grid and insert it into the underlying table in another grid. I got my javascript code to grab the records selected in grid1 and loop through them. Now I am getting the model of the grid2 and want to insert the records from grid1 into grid2
Try to insert a new record and immediately update the values.
var widget = apex.region('staticIdOfIG').widget();
var grid = widget.interactiveGrid('getViews','grid');
var model = grid.model;
//insert new record on a model
var myNewRecordId = model.insertNewRecord();
//get the new record
var myNewRecord = model.getRecord(myNewRecordId);
//update record values
model.setValue(myNewRecord, 'NAME_OF_COLUMN1', 'value1');
model.setValue(myNewRecord, 'NAME_OF_COLUMN2', 'value2');
Example: https://apex.oracle.com/pls/apex/f?p=145797:8
*Click on button "INSERT ROW WITH VALUES"
Workspace: stackquestions
login: test
pwd: test
page: 8
I'm newbie in Ember.js framework, and I have a problem, I need a multiple selection of rows in a table. I'm using jQuery Datatables, with Ember-Data, and I need to have an ID of the selected rows, something like push to the array and I have no clue how to do this.
For multiple selection, make sure you initialize the table with the select option set to "multi":
this.$("#myDT").DataTable({
select: "multi"
});
When you want to get the list of all the rows selected, use a jQuery selector to get all the rows that have the selected class and get their data. In this example, the ID is the first column in the data, hence the [0]
var selectedRows = Ember.$('#myDT tbody tr.selected');
var selectedIDs = [];
Ember.$.each(selectedRows, function (i, element) {
selectedIDs.push(table.row(element).data()[0]);
});
You can read more about DataTables API (for things like getting row data using the row.data() method here: https://datatables.net/reference/api/
Please refer to http://emberjs.jsbin.com/volim/1/edit
The display of Categories happens with no problem. Notice how I have the index template and IndexController set up to display the Categories in a table. The user will click on a Category to display the Links that the clicked on Category has.
What I am trying to do and failing at is have the link template and the LinkController arrange the links to be displayed in a table, just the the Categories.
When I step through the LinkController code, sometimes it goes into the then callback function and sometimes it does not.
Any help would be appreciated.
You need to use pushObject when you are pushing objects into an array in Ember. It's the equivalent setter for an array. The reason the other computed property works is due to the items being pushed into the array before Ember evaluated it.
rows: function(){
var columns = 5;
var row = [];
var rows = [];
this.get('links').then(function(theLinks){
theLinks.forEach(function(l){
row.push(l);
if(row.length === columns){
rows.pushObject(row);
row = [];
}
});
if (row.length > 0) {
rows.pushObject(row);
}
});
return rows;
}.property('links')
http://emberjs.jsbin.com/qivebiho/3/edit
I am using google spreadsheet to feed to my Column chart. To get the single columns to be a different color I used sort of a hack by setting values to 0 on opposite columns in the spreadsheet for each column in the chart. This gave me the the difference in color I needed for each column in the chart. The issue I am now having is the tooltips do not work for each column and was wondering how I can implement to work correctly in my code.
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
var visualization;
function drawVisualization() {
var query = new google.visualization.Query(
'http://spreadsheets.google.com/tq?key=0AjlSK7_zXoNHdDhrU2xiaHVIQmR1WldYZm1yMTNkM3c&pub=1');
// Apply query language statement.
// Send the query with a callback function.
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
// set the 3rd column to the "tooltip" role
data.setColumnProperty(3, 'role', 'tooltip');
visualization = new google.visualization.ColumnChart(document.getElementById('visualization'));
visualization.draw(data, {legend: 'none', colors:['blue','red'],is3D:'True', isStacked:'true'});
}
google.setOnLoadCallback(drawVisualization);
Option A:
Adjust your underlying data so that you have 4 columns instead of 3, with the same values in column 2 (after the first set of data) as you have in your current column 3 (with the tooltip). Use the setColumnProperty() on the new columns 2 and 4 as tooltip.
Option B:
Copy your tooltip column 3 in Javascript to Column 2 (after the first data set) using insertColumn(), this should have the same effect as Option A. You will have to loop through to copy over the values, or otherwise add the same data via javascript.