2

I have the following array which is generated using for loop.

{x:320, y:420, count:360}, 
{x:340, y:440, count:370},
{x:380, y:480, count:390},  
{x:400, y:500, count:400}, 
{x:420, y:520, count:410}, 
{x:440, y:540, count:420}, 
{x:460, y:560, count:430},  
{x:480, y:580, count:440}, 
{x:500, y:600, count:450},  
{x:520, y:620, count:460}, 
{x:540, y:640, count:470}, 
{x:560, y:660, count:480}, 
{x:580, y:680, count:30}

I am using this to create a heatmap using the addon from following url: http://www.patrick-wied.at/static/heatmapjs/examples.html

I need to pass the above array as a javascript object to heatmap.js file in the following format. How can I achieve this? How can I convert my array into JavaScript object?

data: {
[
{x:320, y:420, count:360}, 
{x:340, y:440, count:370},
{x:380, y:480, count:390},  
{x:400, y:500, count:400}, 
{x:420, y:520, count:410}, 
{x:440, y:540, count:420}, 
{x:460, y:560, count:430},  
{x:480, y:580, count:440}, 
{x:500, y:600, count:450} 
]

};

I am calling this functin 

 setDataSet: function(obj, internal)
Improve this question
4
  • 1
    An array IS an object. typeof [] === "object" and [] instanceof Object are both true. Commented Feb 6, 2013 at 10:07
  • yes but when I do following it throws an error data: [heatmap_data[1]] Commented Feb 6, 2013 at 10:10
  • I need to pass those array into this function: setDataSet: function(obj, internal) Commented Feb 6, 2013 at 10:14
  • 1
    are you sure your code is correct? no key for the array in data object? Commented Feb 6, 2013 at 10:21

2 Answers 2

Reset to default
1 
data: {
[
{x:320, y:420, count:360}, 
{x:340, y:440, count:370},
{x:380, y:480, count:390},  
{x:400, y:500, count:400}, 
{x:420, y:520, count:410}, 
{x:440, y:540, count:420}, 
{x:460, y:560, count:430},  
{x:480, y:580, count:440}, 
{x:500, y:600, count:450} 
]};

isn't valid. You're missing a key for the array:

{data: {points:[
{x:320, y:420, count:360}, 
{x:340, y:440, count:370},
{x:380, y:480, count:390},  
{x:400, y:500, count:400}, 
{x:420, y:520, count:410}, 
{x:440, y:540, count:420}, 
{x:460, y:560, count:430},  
{x:480, y:580, count:440}, 
{x:500, y:600, count:450} 
]}};

You could do it like this:

var points = [
{x:320, y:420, count:360}, 
{x:340, y:440, count:370},
{x:380, y:480, count:390},  
{x:400, y:500, count:400}, 
{x:420, y:520, count:410}, 
{x:440, y:540, count:420}, 
{x:460, y:560, count:430},  
{x:480, y:580, count:440}, 
{x:500, y:600, count:450},  
{x:520, y:620, count:460}, 
{x:540, y:640, count:470}, 
{x:560, y:660, count:480}, 
{x:580, y:680, count:30} 
];

var data = {'points':points};

or

var data = {'data':{'points':points}};

if you need data inside to get a correct data object.

Improve this answer
0

A/ I believe that you are using the addon to display the heatmap on a google map, therefore your array should contain lat/long values and not plain numbers.

B/ if it is an array, it is something defined as:

var arr = [ {x:320, y:420, count:360}, 
{x:340, y:440, count:370},
{x:380, y:480, count:390},  
{x:400, y:500, count:400}, 
{x:420, y:520, count:410}, 
{x:440, y:540, count:420}, 
{x:460, y:560, count:430},  
{x:480, y:580, count:440}, 
{x:500, y:600, count:450},  
{x:520, y:620, count:460}, 
{x:540, y:640, count:470}, 
{x:560, y:660, count:480}, 
{x:580, y:680, count:30} ];

Node the [ & ] to denote an array. Each of the {} element is one object in the array !

C/ The data passed to heatmap should be of the sort:

var heatMapData ={
    max: 480,
    data: arr
};

where arr has a highest count of 480 (number of occurrences at that coordinate) in all its elements (from the source-code of heatmap: the max occurrence - the heatmaps radial gradient alpha transition is based on it)

Working example code:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Demo heatmap</title>
        <meta name="description" content="DEmo heatmap" />
        <meta name="author" content="noyb" />
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="css/site.css" type="text/css" media="screen" charset="utf-8" />
        <style>

        </style>
        <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
        <script src="http//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>
            window.jQuery || document.write('<script src="jquery-1.6.2.min.js"><\/script>')
        </script>

        <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="heatmap.js"></script>
        <script type="text/javascript" src="heatmap-gmaps.js"></script>
        <style>
            #heatmapArea{
                width: 800px;
                height: 600px;
                margin: 10px auto;
            }
        </style>

    </head>
    <body>
        <div id="heatmapArea"> map </div>

        <script>
            $(document).ready(function() {
                // standard gmaps initialization
                var myLatlng = new google.maps.LatLng(48.3333, 16.35);
                // define map properties
                var myOptions = {
                    zoom: 3,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    disableDefaultUI: false,
                    scrollwheel: true,
                    draggable: true,
                    navigationControl: true,
                    mapTypeControl: false,
                    scaleControl: true,
                    disableDoubleClickZoom: false
                };
                // we'll use the heatmapArea
                var map = new google.maps.Map($("#heatmapArea")[0], myOptions);

                // let's create a heatmap-overlay
                // with heatmap config properties
                var heatmap = new HeatmapOverlay(map, {
                    "radius": 20,
                    "visible": true,
                    "opacity": 70
                });

                // here is our dataset
                var dat = [{lat: 33.5363, lng:-117.044, count: 1},{lat: 33.5608, lng:-117.24, count: 1},{lat: 38, lng:-97, count: 1},{lat: 38.9358, lng:-77.1621, count: 1},{lat: 38, lng:-97, count: 2},{lat: 54, lng:-2, count: 1},{lat: 51.5167, lng:-0.7, count: 2},{lat: 51.5167, lng:-0.7, count: 6},{lat: 60.3911, lng:5.3247, count: 1},{lat: 50.8333, lng:12.9167, count: 9},{lat: 50.8333, lng:12.9167, count: 1},{lat: 52.0833, lng:4.3, count: 3},{lat: 52.0833, lng:4.3, count: 1},{lat: 51.8, lng:4.4667, count: 16},{lat: 51.8, lng:4.4667, count: 9},{lat: 51.8, lng:4.4667, count: 2},{lat: 51.1, lng:6.95, count: 1},{lat: 13.75, lng:100.517, count: 1},{lat: 18.975, lng:72.8258, count: 1},{lat: 2.5, lng:112.5, count: 2},{lat: 25.0389, lng:102.718, count: 1},{lat: -27.6167, lng:152.733, count: 1},{lat: -33.7667, lng:150.833, count: 1},{lat: -33.8833, lng:151.217, count: 2},{lat: 9.4333, lng:99.9667, count: 1},{lat: 33.7, lng:73.1667, count: 1},{lat: 33.7, lng:73.1667, count: 2},{lat: 22.3333, lng:114.2, count: 1},{lat: 37.4382, lng:-84.051, count: 1},{lat: 34.6667, lng:135.5, count: 1},{lat: 37.9167, lng:139.05, count: 1},{lat: 36.3214, lng:127.42, count: 1},{lat: -33.8, lng:151.283, count: 2},{lat: -33.8667, lng:151.225, count: 1},{lat: -37.65, lng:144.933, count: 2},{lat: -37.7333, lng:145.267, count: 1},{lat: -34.95, lng:138.6, count: 1},{lat: -27.5, lng:153.017, count: 1},{lat: -27.5833, lng:152.867, count: 3},{lat: -35.2833, lng:138.55, count: 1},{lat: 13.4443, lng:144.786, count: 2},{lat: -37.8833, lng:145.167, count: 1},{lat: -37.86, lng:144.972, count: 1},{lat: -27.5, lng:153.05, count: 1},{lat: 35.685, lng:139.751, count: 2},{lat: -34.4333, lng:150.883, count: 2},{lat: 14.0167, lng:100.733, count: 2},{lat: 13.75, lng:100.517, count: 5},{lat: -31.9333, lng:115.833, count: 1},{lat: -33.8167, lng:151.167, count: 1},{lat: -37.9667, lng:145.117, count: 1},{lat: -37.8333, lng:145.033, count: 1},{lat: -37.6417, lng:176.186, count: 2},{lat: -37.6861, lng:176.167, count: 1},{lat: -41.2167, lng:174.917, count: 1},{lat: 39.0521, lng:-77.015, count: 3},{lat: 24.8667, lng:67.05, count: 1},{lat: 24.9869, lng:121.306, count: 1},{lat: 53.2, lng:-105.75, count: 4},{lat: 44.65, lng:-63.6, count: 1},{lat: 53.9667, lng:-1.0833, count: 1},{lat: 40.7, lng:14.9833, count: 1},{lat: 37.5331, lng:-122.247, count: 1},{lat: 39.6597, lng:-86.8663, count: 2},{lat: 33.0247, lng:-83.2296, count: 1},{lat: 34.2038, lng:-80.9955, count: 1},{lat: 28.0087, lng:-82.7454, count: 1},{lat: 44.6741, lng:-93.4103, count: 1},{lat: 31.4507, lng:-97.1909, count: 1},{lat: 45.61, lng:-73.84, count: 1},{lat: 49.25, lng:-122.95, count: 1},{lat: 49.9, lng:-119.483, count: 2},{lat: 32.7825, lng:-96.8207, count: 6},{lat: 32.7825, lng:-96.8207, count: 7},{lat: 32.7825, lng:-96.8207, count: 4},{lat: 32.7825, lng:-96.8207, count: 41},{lat: 32.7825, lng:-96.8207, count: 11},{lat: 32.7825, lng:-96.8207, count: 3},{lat: 32.7825, lng:-96.8207, count: 10},{lat: 32.7825, lng:-96.8207, count: 5},{lat: 32.7825, lng:-96.8207, count: 14},{lat: 41.4201, lng:-75.6485, count: 4},{lat: 31.1999, lng:-92.3508, count: 1},{lat: 41.9874, lng:-91.6838, count: 1},{lat: 30.1955, lng:-85.6377, count: 1},{lat: 42.4266, lng:-92.358, count: 1},{lat: 41.6559, lng:-91.5228, count: 1},{lat: 33.9269, lng:-117.861, count: 3},{lat: 41.8825, lng:-87.6441, count: 6},{lat: 42.3998, lng:-88.8271, count: 1},{lat: 33.1464, lng:-97.0902, count: 1},{lat: 47.2432, lng:-93.5119, count: 1},{lat: 41.6472, lng:-93.46, count: 1},{lat: 36.1213, lng:-76.6414, count: 1},{lat: 41.649, lng:-93.6275, count: 1},{lat: 44.8547, lng:-93.7854, count: 1},{lat: 43.6833, lng:-79.7667, count: 1},{lat: 40.6955, lng:-89.4293, count: 1},{lat: 37.6211, lng:-77.6515, count: 1},{lat: 37.6273, lng:-77.5437, count: 3},{lat: 33.9457, lng:-118.039, count: 1},{lat: 33.8408, lng:-118.079, count: 1},{lat: 40.3933, lng:-74.7855, count: 1},{lat: 40.9233, lng:-73.9984, count: 1},{lat: 39.0735, lng:-76.5654, count: 1},{lat: 40.5966, lng:-74.0775, count: 1},{lat: 40.2944, lng:-73.9932, count: 2},{lat: 38.9827, lng:-77.004, count: 1},{lat: 38.3633, lng:-81.8089, count: 1},{lat: 36.0755, lng:-79.0741, count: 1},{lat: 51.0833, lng:-114.083, count: 2},{lat: 49.1364, lng:-122.821, count: 1},{lat: 39.425, lng:-84.4982, count: 3},{lat: 38.7915, lng:-82.9217, count: 1},{lat: 39.0131, lng:-84.2049, count: 1},{lat: 29.7523, lng:-95.367, count: 7},{lat: 29.7523, lng:-95.367, count: 4},{lat: 41.5171, lng:-71.2789, count: 1},{lat: 29.7523, lng:-95.367, count: 2},{lat: 32.8148, lng:-96.8705, count: 1},{lat: 45.5, lng:-73.5833, count: 1},{lat: 40.7529, lng:-73.9761, count: 6},{lat: 33.6534, lng:-112.246, count: 1},{lat: 40.7421, lng:-74.0018, count: 1},{lat: 38.3928, lng:-121.368, count: 1},{lat: 32.7825, lng:-96.8207, count: 1},{lat: 39.7968, lng:-76.993, count: 2},{lat: 40.5607, lng:-111.724, count: 1},{lat: 41.2863, lng:-75.8953, count: 1},{lat: 26.3484, lng:-80.2187, count: 1},{lat: 32.711, lng:-117.053, count: 2},{lat: 32.5814, lng:-83.6286, count: 3},{lat: 35.0508, lng:-80.8186, count: 3},{lat: 35.0508, lng:-80.8186, count: 1},{lat: -22.2667, lng:166.45, count: 5},{lat: 50.1167, lng:8.6833, count: 1},{lat: 51.9167, lng:4.5, count: 2},{lat: 54, lng:-2, count: 6},{lat: 52.25, lng:21, count: 1},{lat: 49.1, lng:10.75, count: 3},{lat: 51.65, lng:6.1833, count: 1},{lat: 1.3667, lng:103.8, count: 1},{lat: 29.4889, lng:-98.3987, count: 11},{lat: 29.3884, lng:-98.5311, count: 1},{lat: 41.8825, lng:-87.6441, count: 2},{lat: 41.8825, lng:-87.6441, count: 1},{lat: 33.9203, lng:-84.618, count: 4},{lat: 40.1242, lng:-82.3828, count: 1},{lat: 40.1241, lng:-82.3828, count: 1},{lat: 43.0434, lng:-87.8945, count: 1},{lat: 43.7371, lng:-74.3419, count: 1},{lat: 42.3626, lng:-71.0843, count: 1},{lat: 4.6, lng:-74.0833, count: 1},{lat: 19.7, lng:-101.117, count: 1},{lat: 25.6667, lng:-100.317, count: 1},{lat: 53.8167, lng:10.3833, count: 1},{lat: 50.8667, lng:6.8667, count: 3},{lat: 55.7167, lng:12.45, count: 2},{lat: 44.4333, lng:26.1, count: 4},{lat: 50.1167, lng:8.6833, count: 2},{lat: 52.5, lng:5.75, count: 4},{lat: 48.8833, lng:8.7, count: 1},{lat: 17.05, lng:-96.7167, count: 3},{lat: 23, lng:-102, count: 1},{lat: 20.6167, lng:-105.25, count: 1},{lat: 23, lng:-102, count: 2},{lat: 20.6667, lng:-103.333, count: 1},{lat: 21.1167, lng:-101.667, count: 1},{lat: 17.9833, lng:-92.9167, count: 1},{lat: 20.9667, lng:-89.6167, count: 2},{lat: 21.1667, lng:-86.8333, count: 1},{lat: 17.9833, lng:-94.5167, count: 1},{lat: 18.6, lng:-98.85, count: 1},{lat: 16.75, lng:-93.1167, count: 1},{lat: 19.4342, lng:-99.1386, count: 1},{lat: -10, lng:-55, count: 1},{lat: -22.9, lng:-43.2333, count: 1},{lat: 15.7833, lng:-86.8, count: 1},{lat: 10.4667, lng:-64.1667, count: 1},{lat: 7.1297, lng:-73.1258, count: 1},{lat: 4, lng:-72, count: 2},{lat: 4, lng:-72, count: 1},{lat: 6.8, lng:-58.1667, count: 1},{lat: 0, lng:0, count: 1},{lat: 48.15, lng:11.5833, count: 2},{lat: 45.8, lng:16, count: 15},{lat: 59.9167, lng:10.75, count: 1},{lat: 51.5002, lng:-0.1262, count: 1},{lat: 55, lng:73.4, count: 1},{lat: 52.5, lng:5.75, count: 1},{lat: 52.2, lng:0.1167, count: 1},{lat: 48.8833, lng:8.3333, count: 1},{lat: -33.9167, lng:18.4167, count: 1},{lat: 40.9157, lng:-81.133, count: 2},{lat: 43.8667, lng:-79.4333, count: 1},{lat: 54, lng:-2, count: 2},{lat: 39, lng:22, count: 1},{lat: 54, lng:-2, count: 11},{lat: 54, lng:-2, count: 4},{lat: 54, lng:-2, count: 3},{lat: 9.0833, lng:-79.3833, count: 2},{lat: 21.5, lng:-104.9, count: 1},{lat: 19.5333, lng:-96.9167, count: 1},{lat: 32.5333, lng:-117.017, count: 1},{lat: 19.4342, lng:-99.1386, count: 3},{lat: 18.15, lng:-94.4167, count: 1},{lat: 20.7167, lng:-103.4, count: 1},{lat: 23.2167, lng:-106.417, count: 2},{lat: 10.9639, lng:-74.7964, count: 1},{lat: 24.8667, lng:67.05, count: 2},{lat: 1.2931, lng:103.856, count: 1},{lat: -41, lng:174, count: 1},{lat: 13.75, lng:100.517, count: 2},{lat: 13.75, lng:100.517, count: 46}];
                // important: a datapoint now contains lat, lng and count property!
                var testData={
                        max: 46,
                        data: dat
                };

                // now we can set the data
                google.maps.event.addListenerOnce(map, "idle", function(){
                    // this is important, because if you set the data set too early, the latlng/pixel projection doesn't work
                    heatmap.setDataSet(testData);
                });
            });
        </script>
    </body>
</html>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.