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

Get started with KoolReport

KoolReport will help you to construct good php data report by gathering your data from multiple sources, transforming them into valuable insights, and finally visualizing them in stunning charts and graphs.