Datatable + Google Map Clusters.. How to access DT data in drawCallback?

BigDataWarehouse

I'm trying to show my table data that contains (longitude and latitude coordinates) on a google map.
I have tested with static JSON data and was successful.

I have figured out that I can use drawCallback to only show data in the table on the google map

However when I try access 'res.data.forEach(function (o, i)' I get a Uncaught TypeError: Cannot read property 'data' of undefined error

res.data.forEach(function (o, i) {
                        o.hoverData = o.lat + " : " + o.lng;
                        o.dataset = [{ bar: 'boop' }, { foo: 'baz' }]
                        o.clickData = "You've clicked on this locaton:<br />" + o.lat + " : " + o.lng;
                        o.labelStyle = { background: 'salmon' }
                    });

here is the full code:

https://jsbin.com/rafehul/edit?html,js,output

Thank you for your help!

kthorngren

Doesn't look like you have the callback parameters for the d3.json() method correct.

                    d3.json(data, function (error, res) {
                        //debugger
                        res.data.forEach(function (o, i) {

Looking at the docs it has this:

It passes parsed data object as a parameter to callback function.

Looks like the callback has only one parameter. This is a d3 issue not a Datatables issue.

Kevin

BigDataWarehouse

thanks for answer, i'll keep looking for a solution

kthorngren

Do something like this too see what data is passed into the callback:

d3.json( data, function( d3Data ) {
    console.log( d3Data );
});

Kevin

BigDataWarehouse

Kindly see the screenshot of the callback of

d3.json( data, function( d3Data ) {
console.log( d3Data );
});

BigDataWarehouse

in the test I did earlier this was the json format:

{
"number_returned": 7539,
"data": {
"result_list": [

  {
    "lat": 39.498234,
    "lng": -121.54583,
    "id": 8116299
  },
  {
    "lat": 39.446293,
    "lng": -123.783508,
    "id": 9691790
  },
  {
    "lat": 39.295099,
    "lng": -123.342165,
    "id": 8096470
  },
  {
    "lat": 39.527885,
    "lng": -121.56486,
    "id": 10272631
  },
  {
    "lat": 40.34541,
    "lng": -121.597225,
    "id": 10158976
  },
  {
    "lat": 39.847395,
    "lng": -121.592679,
    "id": 10160553
  }
]
}

}

kthorngren

You have drawCallback: function (data,settings) {. The only parameter provided to drawCallback is settings. So you will need something like this:

drawCallback: function () {
....
    google.maps.event.addListenerOnce(map, 'idle', function () { 
        var data = table.rows().data();

        // Get data with d3 JSON call. You can obviously use whatever you please to grab your data.
        d3.json(data, function ( d3Data ) {
            console.log( d3Data );
        });

This uses rows().data() to get the full table data. The selector-modifier parameter can be used to control the data retrieved.

Kevin

BigDataWarehouse

this worked without a problem

kthorngren

Sorry I was trying to help you with the d3.json() function. Thought you had the wrong number of parameters.

You can use ajax.json() to get the JSON response from the ajax option.

Kevin

BigDataWarehouse

no worries Kevin, I just needed to get the JSON response from the ajax option THANKS!