markmarkoh / datamaps

Customizable SVG map visualizations for the web in a single Javascript file using D3.js
http://datamaps.github.io
MIT License
3.78k stars 1.01k forks source link

How PHP sends data to datamaps? #99

Closed alangularte closed 10 years ago

alangularte commented 10 years ago

Hi all!

How can I send data to datamaps from PHP?

I have this:

$.ajax({
        type: "POST",
        url: "data/search.php",
        dataType:'JSON',
        data: {action: 'test'},
        success: function(response){
            map = new Datamap({
                element: document.getElementById("map"),
                projection: 'mercator',
                fills: {
                    defaultFill: "#CCC",
                    countryColor: "#fa0fa0"
                },
                data: response,
                geographyConfig: {
                    //popupTemplate: function(geo, data) {
                        //return ['<div class="hoverinfo"><strong>',
                                //'Number of things in ' + geo.properties.name,
                                //': ' + data.numberOfThings,
                                //'</strong></div>'].join('');
                    //}
                },
            });
        },
        complete: function(response){
            console.log("COMPLETE");
        },
        error: function(response){
            console.log("ERROR: " + response.responseText);
        }
    });

PHP is sending:

<?php

$data = Array(); $data["USA"]["fillKey"] = "#fa0fa0"; $data["USA"]["numberOfThings"] = "12";

$json = json_encode($data);

echo $json; ?>

But it's not working.

alangularte commented 10 years ago

I solved it changinfg the way I call PHP file:

map = new Datamap({ element: document.getElementById("map"), projection: 'mercator', fills: { defaultFill: "#CCC", countryColor: "#fa0fa0" }, dataUrl: 'data/search.php', dataType: 'json', data: {} });

markmarkoh commented 10 years ago

Cool! Does it all work with the dataUrl?

alangularte commented 10 years ago

Yes, just perfect!

My PHP sample:

$data = Array(); $data["USA"]["fillKey"] = "#fa0fa0"; $data["USA"]["numberOfThings"] = "12";

$data["ARG"]["fillKey"] = "#fa0fa0"; $data["ARG"]["numberOfThings"] = "12";

$json = json_encode($data);

echo $json;

I just created an Array and converted it to JSON, sending it back to my JS script by ECHO.

alangularte commented 10 years ago

JS sample:

function updateMap(year){

//Delete actual map
$("#map").empty();

map = new Datamap({
    element: document.getElementById("map"),
    projection: 'mercator',
    fills: {
        defaultFill: "#CCC",
        countryColor: "#fa0fa0"
    },
    dataUrl: 'data/search.php?year='+year,
    dataType: 'json',
    data: {},
    geographyConfig: {
        popupTemplate: function(geo, data) {
            return ['<div class="hoverinfo"><strong>',
                    'Total of concerts in ' + geo.properties.name,
                    ': ' + data.numberOfThings,
                    '<a href="":</strong></div>'].join('');
        }
    },
});     

}