How do I get the information about the selected node in the Google Charts Org Chart widget? - charts

I have a chart rendered via the Google Charts Org Chart API. How do I get the data about the selected node when a user clicks on a node. I understand it to the point where I make the "getSelection" call to output selection information to the Javascript console:
console.log(chart.getSelection());
When I look in the Chrome Javascript console, I can see the object (see below), but it doesn't show any attributes of the node in the chart. It only shows row and column. Is there another call to get the actual attributes of the node (like the name, etc)?

You should call chart.getSelection(), not this., because in your function this refers to window, and thus you call window.getSelection() that returns an unrelated object.
Here is the complete example how to get chart selection:
Google Charts. Interacting With the Chart
The correct code from the link above, where chart and data refer to global variables:
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var selectedValue = data.getValue(selectedItem.row, 0);
console.log('The user selected ' + selectedValue);
}

This works for me.
chart is the instance of your chart and data is the container of your data (a google DataTable instance), composed in the page or fetched via ajax.
Once you get the current selection object with chart.getSelection() you are able to query your dataset with the current row position data.getValue(row, col), to obtain the corresponding record.
showCurrentDetailCard() is a custom function that i use to display the details of the current node.
google.visualization.events.addListener(chart, 'select', selectHandler);
function selectHandler() {
var selection = chart.getSelection();
if (selection.length > 0) {
var c = selection[0];
showCurrentDetailCard(data.getValue(c.row, 0));
}
}
Hope this helps.

Related

Update Popup data in Mapbox GL JS

I'm making a fleet tracker with Mapbox GL JS, it gets the data from a GeoJson and inserts in the map, as the Add live realtime data, I've also integrated the Mapbox store locator example, by now I can update in realtime the sidebar and the points on the map. A modification that I would like to make is not display only one single popup, but a popup for every icon located there. I would like to know how to update this popups, because in the way I'm making it's creating a new popup every movement of the object, but is not closing the previous one. Here is the function that I'm using for the popups
function createPopUp(currentFeature, data) {
var popUps = document.getElementsByClassName('mapboxgl-popup');
//if (popUps[0]) popUps[0].remove();
// mapboxgl.Popup.remove();
if (map.getZoom() > 9) {
var popup = new mapboxgl.Popup({closeOnClick: false})
.setLngLat(currentFeature.geometry.coordinates)
.setHTML('<h3> Aeronave: '+ currentFeature.properties.dev_id + '</h3>' +
'<h4> Curso: ' + currentFeature.properties.curso + 'ยบ<br> Altitude: ' + currentFeature.properties.alt + ' ft<br> Sinal: ' + currentFeature.properties.rssi +'</h4>')
.addTo(map)
.setMaxWidth("fit-content(10px)");
} else{if (popUps[0]) popUps[0].remove()};
}
If I uncomment the popUps[0] line it will only allow 1 popup to be displayed, I've also tried to change dynamically the number between the [] by the number of active tracked devices, it reduced the popup number, but it still repeat some popups of one ID. Also I've tried to change the class name via the .addClasName but it didn't worked.
Thanks
Without seeing how you're calling the createPopUp method in the context of your application, it is difficult to diagnose exactly what is going wrong. I'm not sure why a new popup is being created each time the map moves, so it sounds like you might be calling this method within the Map#on('move') event. That being said, I'm assuming that you're iterating over all of your features and calling the createPopUp method for each in order to initialize all of the popups.
Rather than using an array of DOM nodes generated with var popUps = document.getElementsByClassName('mapboxgl-popup');, I'd recommend specifying a unique and reproducible class name for each feature's popup element when initialized. It looks like each of your features has a dev_id property, so you could do something like:
var popup = new mapboxgl.Popup({closeOnClick: false, className: `mapbox-gl-popup-${dev_id}`})
If you need to change the popup for a particular feature in the future, you can create a helper function to retrieve the relevant DOM node:
function retrievePopUp(feature) {
return document.getElementsByClassName(`mapboxgl-popup-${feature.properties.dev_id}`);
}

Get all series from a chart with Google Apps Script

I have a sheet with 30 charts and I'm trying to iterate over all of them updating the colors of the background and the series.
Even though I could do it blindly, I'd rather be able to look at all the series in a chart first so that I could add extra logic based on the number of series, if it is already using one of my custom colors, title, etc. The problem is that I couldn't find a way to get the series from a chart.
Given that I can modify the series with setOptions I thought something like sheet.getCharts()[0].getOptions().get('series') would work, but it returns Access to class "(class)" is prohibited. when I try to log it.
Any advice on how to get an object where I can read information about the series in a chart?
its like hashmap (key/value) when you set option put key and value and when you get it try to use json to get the oject value too
function myfunction() {
var sheet = SpreadsheetApp.getActiveSheet();
var len = sheet.getCharts().length;
for(var i=0;i<len;i++){
var bg=sheet.getCharts()[i].getOptions().get('backgroundColor.fill');
var s=sheet.getCharts()[i].getOptions().get('series.0.color');
}
}

How to retrieve the rows which are selected in the list report page of smart templates

This is the List Report type of Smart Template application
Here I have selected 2nd and 5th row, I also have a button named Send Requests in the section part which is highlighted. If I click this button it calls a javascript controller function which is defined in the extensions of the application. In this js function how can I retrieve the selected rows that are selected?
I have enabled the checkboxes in this page by mentioning this code
"settings": { "gridTable": false, "multiSelect": true } in the manifest.json
As it was recommended by this link https://sapui5.netweaver.ondemand.com/#docs/guide/116b5d82e8c545e2a56e1b51b8b0a9bd.html
I want to know how can I retrieve the rows which got selected?
There is an API that you can use for your use case. It is described here: https://sapui5.netweaver.ondemand.com/#docs/guide/bd2994b69ef542998becbc69ab093f7e.html
Basically, you just need to call the getSelectedContexts method. Unfortunately you will not be able to really get the items themselves, only the binding contexts (which point to the data entities which are selected). Excerpt from the documentation:
After you have defined a view extension, you can access and modify the
properties of all UI elements defined within these extensions (for
example, change the visibility). However, you cannot access any UI
elements that are not defined within your view extensions.
In this type of table there is way.
var myTable=sap.ui.getCore().byId("your table id");
get all rows:
var myTableRows=myTable.getRows();
now get selected Indices
var selectedIndeices=myTable.getSelectedIndices(); //this will give you array of indeices.
now run loop on indeices array. And get particular row item;
// get binding path
var bindingpath=myTableRows[2].getBindingContext().sPath; // this will return eg:"/ProductCollection/2"
// now get Binding object of that particular row.
var myData=myTableRows[2].getModel().getObject(bindingpath); // this will return binding object at that perticular row.
// once your loop is over in the end you will have all object of selected row. then do whatever you want to do.
If you use smart template create an extension.
This is the standard event befor the table is rebinding:
onBeforeRebindTableExtension: function (oEvent) {
this._table = oEvent.getSource().getTable();
}
In your action function (or where you want) call the table and get the context :
this._table.getSelectedContexts();

How to reference dynamically added element after DOM loaded without a need to act on any events?

I know there is .on and .live (deprecated) available from JQuery, but those assume you want to attach event handlers to one ore more events of the dynamically added element which I don't. I just need to reference it so I can access some of the attributes of it.
And to be more specific, there are multiple dynamic elements like this all with class="cluster" set and each with a different value for the: title attribute, top attribute, and left attribute.
None of these jquery options work:
var allClusters = $('.cluster');
var allClusters2 = $('#map').children('.cluster');
var allClusters3 = $('#map').find('.cluster');
Again, I don't want to attach any event handlers so .on doesn't seem like the right solution even if I were to hijack it, add a bogus event, a doNothing handler, and then just reference my attributes.
There's got to be a better solution. Any ideas?
UPDATE:
I mis-stated the title as I meant to say that the elements were dynamically added to the DOM, but not through JQuery. Title updated.
I figured it out. The elements weren't showing up because the DOM hadn't been updated yet.
I'm working with Google Maps and MarkerClustererPlus to give some more context, and when I add the map markers using markerclustererplus, they weren't available in the javascript code following the add.
Adding a google maps event listener to my google map fixed the problem:
google.maps.event.addListener(myMarkerClusterer, 'clusteringend', function () {
// access newly added DOM elements here
});
Once I add that listener, all the above JQuery selectors and/or methods work just fine:
var allClusters = $('.cluster');
var allClusters3 = $('#map').find('.cluster');
Although this one didn't, but that's because it only finds direct decendants of parent:
var allClusters2 = $('#map').children('.cluster');
Do what you need to do in the ajax callback:
$.ajax(...).done(function (html) {
//append here
allClusters = $('.cluster');
});
If you want them to be separate, you can always bind handlers after the fact, or use $.when:
jqxhr = $.ajax(...).done(function (html) { /* append html */ });
jqxhr.done(function () { allClusters = $('.cluster') });
$.when(jqxhr).done(function () { /* you get it */ });
If these are being appended without ajax changes, then just move the cluster-finding code to wherever the DOM changes take place.
If that's not an option, then I guess you would just have to check on an interval.

Sencha touch charts 2: Dynamically create chart and load series from the store?

I want to create a scatter chart dynamically and load the series by fetching the data from the store. Is there any method to do that? I did the following:
var myChart = Ext.create('Ext.chart.Chart',{
id:'myChart',
renderTo:'myPanel',
axes:[], // blank because i need to add axes from store
series:[] // blank because i need to add series from store
:
:
});
for(conditions){
myChart.config.axes[0].fields.push(record[cnt].data.fieldName);
var series = {
type:'scatter',
axis:['right', 'bottom'],
xField:'myXfield',
yField:record[cnt].data.yfieldVal
}
myChart.config.series.push(series);
}//for loop ends
myChart.redraw();
Iam not able to see the chart with the plots that are dynamically added.
Any help will be appriciated!
Thanks!
I realized how to address the issue. I declared Global variables for the store name and other related fields. I created the get and set methods. These are defined in app.js file. I was able to set the values dynamically to these global variables using set methods and use the assigned values using the get methods. I hope someone will be able to use this technique if required.