• Overview
• Region GeoCharts
• Marker GeoCharts

GeoChart

Overview #

A geochart is a map of a country, a continent, or a region with areas identified in one of three ways:

• The region mode colors whole regions, such as countries, provinces, or states.
• The markers mode uses circles to designate regions that are scaled according to a value that you specify.
• The text mode labels the regions with identifiers (e.g., "Russia" or "Asia").

A geochart is rendered within the browser using SVG or VML. Note that the geochart is not scrollable or draggable, and it's a line drawing rather than a terrain map; if you want any of that, consider a map visualization instead.

Region GeoCharts #

The regions style fills entire regions (typically countries) with colors corresponding to the values that you assign.

Code:

<?php
\koolreport\widgets\google\GeoChart::create(array(
    "title"=>"World Polulation 2016",
    "dataSource"=>$this->dataStore('world_polulation_2016"),
    "mapsApiKey" => "your-google-key-map",
    "columns"=>array(
        "Country Name",
        "Value"=>array(
            "type"=>"number",
            "label"=>"Polulation 2016"
        )
    )
));

Note: You may need your own google mapsApiKey

Marker GeoCharts #

The markers style renders circles at specified locations on the geochart, with the color and size that you specify.

Try hovering over the cluttered markers around Rome, and a magnifying glass will open to show the markers in more detail. (The magnifying glass is not supported in Internet Explorer version 8 or earlier.)

Code:

\koolreport\widgets\google\GeoChart::create([
    "title"=>"World Polulation 2016",
    "dataSource"=>[
        ['City',   'Population', 'Area'],
        ['Rome',      2761477,    1285.31],
        ['Milan',     1324110,    181.76],
        ['Naples',    959574,     117.27],
        ['Turin',     907563,     130.17],
        ['Palermo',   655875,     158.9],
        ['Genoa',     607906,     243.60],
        ['Bologna',   380181,     140.7],
        ['Florence',  371282,     102.41],
        ['Fiumicino', 67370,      213.44],
        ['Anzio',     52192,      43.43],
        ['Ciampino',  38262,      11]
    ],
    'mapsApiKey'=> 'your-google-key-map',
    "options"=>[
        "region"=>'IT',
        "displayMode" => 'markers',
        "colorAxis" => ["colors"=> ['green', 'blue']]
    ]
]);

Note: You may need your own google mapsApiKey