# geochart-geojson

> Create charts very similar to the Google Charts geochart, but with GeoJSON support.

Latest version **1.5.0** (published 2017-11-30) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install geochart-geojson
pnpm add geochart-geojson
yarn add geochart-geojson
bun add geochart-geojson
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2017-11-30 |
| First published | 2017-11-10 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13 |
| Author | Rarylson Freitas |
| Maintainers | rarylson |

## Links

- npm: https://www.npmjs.com/package/geochart-geojson
- Repository: https://github.com/rarylson/geochart-geojson
- Homepage: https://github.com/rarylson/geochart-geojson#readme
- Issues: https://github.com/rarylson/geochart-geojson/issues
- npm.io page: https://npm.io/package/geochart-geojson

## Recent versions

- 1.5.0 (latest) — 2017-11-30
- 1.4.0 — 2017-11-30
- 1.3.1 — 2017-11-27
- 1.3.0 — 2017-11-16
- 1.2.0 — 2017-11-14
- 1.1.1 — 2017-11-10
- 1.1.0 — 2017-11-10
- 1.0.0 — 2017-11-10

## README

Geochart GeoJSON
================

Create charts very similar to the [Google Charts geochart](https://developers.google.com/chart/interactive/docs/gallery/geochart), but with GeoJSON support.

The Google Charts geochart is a very interesting project. However, it only generates predetermined maps.

This project makes possible to draw geocharts in custom maps with boundaries defined using GeoJSON.

The above printscreens show two examples: a Geochart GeoJSON of the Rio de Janeiro state (Brazil), and a Geochart GeoJSON of the Rio de Janeiro city (RJ, Brazil).

![Geochart GeoJSON of Rio de Janeiro state, Brazil](readme_img/rio-state-chart.png)
![Geochart GeoJSON of Rio de Janeiro city, RJ, Brazil](readme_img/rio-city-chart.png)

Requirements
------------

This project uses [Google Charts](https://developers.google.com/chart/interactive/docs/) and [Google Maps API](https://developers.google.com/maps/documentation/javascript/tutorial).

Usage
-----

Using Geochart GeoJSON is somehow similar to using [Google Charts geochart](https://developers.google.com/chart/interactive/docs/gallery/geochart). The bigger difference is that Google Charts geochart requires you to inform a region to draw the map, while Geochart GeoJSON requires you to set some Google Maps params and a GeoJSON to draw the map.

The follow example shows an HTML page that draws a Geochart GeoJSON of the Rio de Janeiro state (in Brazil).

```html
<html>
  <head>
    <meta charset="utf-8">
    <title>Geochart GeoJSON example page</title>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/rarylson/geochart-geojson/master/build/geochart-geojson.min.js"></script>

    <script type="text/javascript">
      google.charts.load("current");
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {

        // Create and populate a data table
        var data = new google.visualization.DataTable();
        data.addColumn("string", "City");
        data.addColumn("number", "Value");
        data.addRows([
          ["Rio de Janeiro", 10],
          ["Maricá", 5],
          ["São João de Meriti", 2],
          ["Niterói", 1],
          ["São Gonçalo", 1]
        ]);

        // Instantiate our Geochart GeoJSON object
        var vis = new geochart_geojson.GeoChart(document.getElementById("mydiv"));

        // Set Geochart GeoJSON options
        var options = {
          mapsOptions: {
            center: {lat: -22.15, lng: -42.9},
            zoom: 8
          },
          geoJson: "https://cdn.rawgit.com/rarylson/geochart-geojson/master/example/rio-state.geojson",
          geoJsonOptions: {
            idPropertyName: "name"
          }
        };

        // Draw our Geochart GeoJSON with the data we created locally
        vis.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id="mydiv" style="width: 900px; height: 560px;"></div>
  </body>
</html>
```

Notes
-----

This project implements the Google Chart API and tries to implement an interface similar to the Google Charts geochart component.

However, only a very few features are implemented.

---
_Source: https://npm.io/package/geochart-geojson · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
