Google Map Charts - KoolReport

Hallie Gromek commented on Apr 26, 2017

Can anyone help me populate the Google Map? The data visualization examples show date and sales data. I don't know how to convert example code to MAP. Here is the example code KoolReport published.

Any help is greatly appreciated.

<?php
    use \koolreport\widgets\google\Map;
?>
<?php 
    Map::create(array(
        "dataStore"=>$this->dataStore('sales')
        "width"=>"400px",
        "height"=>"300px",
        "columns"=>array(
            "date"=>array(
                "label"=>"Date",
                "type"=>"datetime"
        	),
        	"sale_amount"=>array(
        	    "label"=>"Sale Amount",
        	    "type"=>"number",
        	    "prefix"=>"$"
        	)        	
        ),
        "options"=>array(
            "title"=>"Sale Performance"
        )
    ));
?>

Peter Williams commented on Apr 26, 2017

Hi Hallie,

This is Peter from KoolPHP.

The above sales data is not suitable for the maps. The data for map should be like population:

Country	Polulation (million)
United State	324
Canada	36
....	....

Or it will be in Latitude and Longitude. For data type and full options of google Map please visit Google Chart Map Documentation

Currently Google Map has shifted the Map package from "upcoming" to "current", so please open the \koolreport\widgets\google\Map.php, looking for "zone"=>"upcoming" and change it to "zone"=>"current".

Please let me know if you need further help.

Hallie Gromek commented on Apr 26, 2017

Hi Peter! Thank you for your help! I updated the Map Package. I still don't completely understand your solution. I know the sales would not work, but that is the example on the site.

Can you show me what the PHP code would look like if I am pulling a Name and address in from a database. Only the table is showing on the report (the map should be on top) http://sid.shankmanandassociates.com/koolreport-master/koolreport/reporting/mapreport/index.php

<?php Map::create(array(

    "dataStore"=>$this->dataStore('myreport'),
    "width"=>"100%",
    "height"=>"500px",
    "columns"=>array(
        "cust_name"=>array(
            "label"=>"Customer"
        ),
  "cust_address_1"=>array(
            "type"=>"string",
        )
    ),
    "options"=>array(
        "title"=>"Customers Mapped",
    )
));

?> `

The help is really appreciated!

Peter Williams commented on Apr 27, 2017

Well, it should be like this

<?php
    use \koolreport\widgets\google\Map;
?>
<?php 
    Map::create(array(
        "dataStore"=>$this->dataStore('world_population')
        "width"=>"400px",
        "height"=>"300px",
        "columns"=>array(
            "country",
            "population"
        ),
        "options"=>array(
            "title"=>"Wold population"
        )
    ));
?>

The country column is very important for Google Chart Map to pin location on the map, it should be correct country name.

Marty commented on Apr 27, 2017

Peter,

Can you provide an example with Map? I am interested too. We have some stores, I would like to show the location of store on a map with sales and number of visitor coming to each store? Is it possible?

Hallie Gromek commented on Apr 27, 2017

I second Marty's request! Please let me know!

KoolReport commented on Apr 29, 2017

We will make an working example

Peter Williams commented on May 1, 2017

Lastly, here comes the example: Sales By Country with Google Map Chart

Peter Williams commented on May 1, 2017

Here comes the code:

SalesByCountry.php

<?php
require_once "../../../../../koolreport/autoload.php";

use \koolreport\processes\CalculatedColumn;
use \koolreport\processes\ColumnMeta;

class SalesByCountry extends \koolreport\KoolReport
{
    public function settings()
    {
        $config = include "../../../config.php";

        return array(
            "dataSources"=>array(
                "automaker"=>$config["automaker"]
            )
        );
    }

    public function setup()
    {
        $this->src('automaker')
        ->query("
            select customers.country,sum(orderdetails.quantityOrdered*orderdetails.priceEach) as amount 
            from orders
            join orderdetails on orderdetails.orderNumber = orders.orderNumber
            join customers on customers.customerNumber = orders.customerNumber
            group by customers.country
        ")
        ->pipe(new CalculatedColumn(array(
            "tooltip"=>"'{country} : $'.number_format({amount})",
        )))
        ->pipe(new ColumnMeta(array(
            "tooltip"=>array(
                "type"=>"string",
            )
        )))
        ->pipe($this->dataStore("sales"));
    }
}

SalesByCountry.view.php

<?php
use \koolreport\widgets\koolphp\Table;
use \koolreport\widgets\google\Map;
?>
<div class="text-center">
    <h1>Sales By Country</h1>
    <h4>The report show total sales on each countries</h4>
</div>
<hr/>

<?php
Map::create(array(
    "dataStore"=>$this->dataStore("sales"),
    "columns"=>array(
        "country",
        "tooltip"
    ),
    "width"=>"100%",
    "options"=>array(
        "showTooltip"=> true,
        "showInfoWindow"=> true        
    )
));
?>

<?php
Table::create(array(
    "dataStore"=>$this->dataStore("sales"),
    "columns"=>array(
        "country"=>array(
            "label"=>"Country"
        ),
        "amount"=>array(
            "label"=>"Amount",
            "type"=>"number",
            "prefix"=>"$",
        )
    )
));
?>

index.php

<?php 
require_once "SalesByCountry.php";
$report = new SalesByCountry;
$report->run();
?>

<!DOCTYPE >
<html>
    <head>
        <title>Sales By Country</title>
        <link rel="stylesheet" href="../../../assets/bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" href="../../../assets/bootstrap/css/bootstrap.theme.min.css" />
        <link rel="stylesheet" href="../../../assets/css/example.css" />
        <script async defer src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAP_API_KEY&callback=initMap"
  type="text/javascript"></script>
    </head>
    <body>      
        <div class="container box-container">
            <?php $report->render();?>
        </div>
    </body>
</html>

Notice: In the index.php, you need to put the GOOGLE_MAP_API_KEY, you need to acquire a key from Get API Key.

Hope that helps.

Hallie Gromek commented on May 3, 2017

I can't get the map to generate, I don't see it in the example either?

Peter Williams commented on May 3, 2017

The google map is loaded slowly :( Give it time, it will show.

Peter Williams commented on May 3, 2017

I changed to use GeoChart, the loading seems better: SalesByCountry with GeoChart

Marty commented on May 4, 2017

Thanks Peter! It works!

KoolReport's Forum

Google Map Charts #3

Build Your Excellent Data Report