Utilize Google Charts Table Chart to extract data from an object-literal notation data source

Here's a look at the 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));
            }

The following line is expected to throw an error:

console.log(dataSource.getValue(selectedItem.row, 1));

If I click on the first row, how can I retrieve the value of the second element in the data source (i.e. '1')?

Thank you

Answer №1

Aha, I understand now. It's simply about retrieving values from JavaScript objects using object literal notation.

let chosenItem = display.getData()[0]; // assuming the user selected the first option
info["list"][chosenItem.list]["c"][3]["value"]  // that should work like magic.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Difficulty in implementing Handlebars handler for dropdown onchange event

Currently, I am implementing Express alongside Handlebars for the front-end of my project. My aim is to trigger an event and read the value of the selected option in the dropdown within 'home.handlebars' when it changes, through 'index.js&ap ...

Inject environment variable into SCSS file while using webpack

I'm new to webpack and I need help with reading a specific value, which is the env variable from the webpack.config.js file, in a sass file. This will allow me to have different CSS styles based on the environment. For example: If the env is set to ...

Tips for managing the State with AppContext()---Need help figuring out how to handle

Why does setting the state userHasAuthenticated to true in the login function result in isAuthenticated being logged as false (staying the same in App.js as well)? Also, when trying to use it in the Home Component, it still shows false. //-------------- ...

Build a brand new root component in Vue JS

I am facing a challenge with destroying and re-creating the root application component. Below is my template structure: <div id="app"> {{ num }} </div> Here is the code I have implemented: if (app) { app.$destroy(); } else { ...

Employing Isotope/jQuery for organizing posts on Tumblr in columns with the ability to infinitely scroll

Alright so, here we have the classic dilemma where scripts are running before images load. And to make matters more complicated, on Tumblr, there's no way to access image dimensions before they're loaded into the DOM... $('#thumbnails&apos ...

Converting a timestamp from PHP in JSON format to date and time using JavaScript

Within the JSON file, there is a timestamp associated with each user login. An example of this timestamp is: timestamp: "1541404800" What steps should be taken to convert this timestamp into date and time format? ...

Issue encountered when sending information to asmx web service via ajax and displaying the result on an HTML page with a javascript function

I have developed an ASMX web service that looks like this: [ScriptService] public class CurrencyData : System.Web.Services.WebService { [WebMethod] public string DisplayCurrency(double amount, string sign ,string style) { swi ...

Automatically rehydrate an instance using Angular and JavaScript

REVISION Special thanks to Shaun Scovill for providing an elegant solution using lodash // Creating an instance and injecting server object - within the ChartService implementation below var chart = new Chart(serverChartObject); // Replacing ...

default selection in AngularJS select box determined by database ID

Here is the scenario: ... <select ng-model="customer" ng-options="c.name for c in customers"> <option value="">-- choose customer --</option> </select> .... In my controller: $scope.customers = [ {"id":4,"name":"aaaa", ...

Extracting precise information from a JSON file using Angular's $http.get

I am struggling with extracting a specific user from a JSON file containing a user list and displaying it on an Angular index page. Despite extensive research, I have been unable to find a satisfactory solution. The user list must remain in a JSON file ins ...

What could be causing my Vue application to not launch after executing `npm run serve`?

These past 24 hours have been a struggle for me. I recently embarked on the journey of learning Javascript, and my choice of JS framework was Vue JS. However, when I run npm run serve, my Vue JS app bombards me with numerous errors that seem to make no se ...

Creating an input field within a basic jQuery dialog box is not possible

Can anyone assist me in adding an input box to my dialog box? I am working with jquery-ui.js. Here is the code I currently have: $(document).on("click",".savebtn",function(). { var id = $(this).attr("id"); $.dialog({ ...

Issue with Vuetify v-alert not appearing after updating reactive property

I am trying to set up a conditional rendering for a v-alert if the login response code is 401 Unauthorized. Here is how I have defined the alert: <v-alert v-if="this.show" type="error">Invalid email and/or password.</v-alert> Within the data ...

Ways to identify if a resize event was caused by the soft keyboard in a mobile browser

Many have debated the soft keyboard, but I am still searching for a suitable solution to my issue. I currently have a resize function like: $(window).resize(function() { ///do stuff }); My goal is to execute the 'stuff' in that function on ...

What is the best way to navigate between different areas of an image using html and javascript?

I am currently in the process of learning how to develop mobile applications, and I am still in the early stages. Although this question is not directly related to mobile development, it pertains more to html/css/js. My goal is to create a simple game wh ...

The Google map is not showing up on the screen despite having entered the API Key

Trying to showcase a Google map on my website. Check out the code below:- <script> function initializeMap() { var coords = {lat: -25.363, lng: 131.044}; var mapObj = new google.maps.Map(document.getElementById('mapz') ...

How to calculate the difference in months between two dates using JavaScript

Is there a way to calculate the number of months between two dates taking into account specific conditions, such as when the dates are not exact and may have different day counts? Here is an example using the moment library: var date1 = moment('202 ...

A guide on retrieving the upload status of a file using an AJAX post request

Is there a way to retrieve the status of uploaded files when the user cancels the process while uploading multiple files using an ajax call? This is how I am currently making the ajax request to upload files: var request = $.ajax({ url: 'file ...

What is the best way to group a Pie Chart by a string field in a .csv file using dc.js, d3.js, and crossfilter.js in a Node environment?

I've successfully set up several Dimensions and groups, but I'm encountering an issue with a Pie Chart that needs to be grouped based on domain names like bing.com. Each domain name is parsed consistently to xxxx.xxx format and the data is clean. ...

Top strategy for monitoring a user's advancement in reading different text segments

If you are familiar with zyBooks, I am looking to implement a similar feature where users can track the sections they have read and mark them as completed with a button. However, I am struggling conceptually with determining how best to structure my mongo ...