As a script kiddo, I was always fascinated by graphical rendering on computers, and how a billion numbers in a list can turn into a visual story - after a few hours of processing. I ended up doing the job of my 11yo kid dreams: tell computers to work for me, and for my customers, and where better than in MongoDB, the database company? Nowadays, nobody wants to wait for hours to get dashboards and charts, or be forced to use programming or third-party software: MongoDB Charts is now GA, allowing for blazing fast data visualisation directly out of MongoDB databases. Every user now has the power to produce storytelling dashboards in a few clicks from any kind of MongoDB data, even the most complex data structures, without having to learn the query language. Amongst all Charts cool features, there is ONE new feature that is a game changer: Geospatial charts In this session, we will review how MongoDB Charts and ATLAS help you render your data into valuable graphics and maps, and I may even share some secrets on the future of this awesome product!

1. Guillaume Meister, Principal Solutions Architect Southern EMEA
Get the Best of Geo Data with MongoDB Atlas and MongoDB
Charts
@mongodb

3. Agenda
If you missed the previous session
Demos!
Charting Capabilities
Geospatial charts
External Embedding
How to get Charts
Feature Roadmap

4. If you missed this
morning’s session

5. Aggregations +
Custom Code
3rd Party ETL and Visualization
Tools
MongoDB BI Connector +
3rd Party Visualization Tools
MongoDB
Charts
Developers want fine-
grained control
Need to combine data from
multiple sources
Already using existing
relational BI tools
Need fast and simple
visualizations directly from
MongoDB
Options for Data Analytics with MongoDB
Consider When...

6. Which Charts is for you?
Charts on MongoDB Atlas
Visualise data only from MongoDB
Atlas
Don’t want to manage servers or
software
Immediately get access to the
latest Charts features
Charts On-Prem
Visualise data from MongoDB
Community Server, Enterprise
Server or Atlas
Keep all data within your private
network
Control the infrastructure hosting
Charts

7. Charts features
Common chart types
Aggregation functions
Filtering
Binning
Sorting
Change chart colours
Change axis and data labels
Change axis scales
Change number and date
formats
Type handling
Polymorphic collections
Nested documents
Array reductions
Capabilities Customization Document support

8. Demo
Setup Charts in Atlas

9. {
"_id": ObjectId("59a5bd85a745d2c185711a78"),
"id": "box-kitchen-san-francisco",
"name": "Box Kitchen",
"image_url": "https://s3-
media4.fl.yelpcdn.com/bphoto/oebEFX_KJm5rNzGqeyJobg/o.j
pg",
"is_closed": false,
"url": "https://www.yelp.com/biz/box-kitchen-san-
francisco?adjust_creative=zEWBdj_LHCHcT-
9DmV0Bnw&utm_campaign=yelp_api_v3&utm_medium=api_v3_bus
iness_search&utm_source=zEWBdj_LHCHcT-9DmV0Bnw",
"review_count": 515,
"categories": [
{
"alias": "burgers",
"title": "Burgers"
},
{
"alias": "waffles",
"title": "Waffles"
}
],
"rating": 4.5,
Sample dataset – Yelp businesses
"transactions": [ ],
"price": "$",
"location": {
"address1": "431 Natoma St",
"address2": null,
"address3": "",
"city": "San Francisco",
"zip_code": "94103",
"country": "US",
"state": "CA",
"display_address": [
"431 Natoma St",
"San Francisco, CA 94103"
],
"type": "Point",
"coordinates": [
-122.40636505138,
37.7811510761365
]
},
"phone": "+14155807170",
"display_phone": "(415) 580-7170",
"distance": 1340.331737904
}

10. {
"_id": ObjectId("56fda36a0a162d0f051f2c6d"),
"Built": 2015,
"Name": "MSC Zoe",
"Length overall (m)": 395.4,
"Beam (m)": 59,
"Maximum TEU": 19224,
"GT": 193000,
"Owner": "MSC",
"Country": "Switzerland",
"route": {
"origin": { "Name": "Tianjin", "Country": "China"},
"destination": {"Name": "Shanghai", "Country":
"China“}
},
"location": {
"type": "Point",
"coordinates": [
129.15693498213182,
18.108558232731916
]
},
"EAT": ISODate("2016-05-16T10:00:00Z")
}
Sample dataset – Ships and containers
{
"_id": ObjectId("5719290546728347c6fbdc4c"),
"container_id": "00000001",
"type": "40",
"cargo": "Whales",
"Tons": 38,
"location": {
"type": "Point",
"coordinates": [
129.15297142372992,
18.108451503053704
]
},
"shipName": "MSC Zoe"
}

11. Geospatial data and map charts
GeoJSON and location data
Choropleth map
Scatter map
Heat map
Tile servers

12. {
"coordinates": {
"latitude": 37.77696388,
"longitude": -122.4238
}
}
or
{
"type" : "Point",
"coordinates" : [37.77696388, -122.4238]
}
Geolocation coordinates
{
"offices": [
{
"description": "Headquarters",
"address1": "4900 Hopyard Rd.",
"zip_code": "94588",
"city": "Pleasanton",
"state_code": "CA",
"country_code": "USA",
"latitude": 37.692934,
"longitude": -121.904945
}
],…
}
GeoJSON encoding or simple lat/lon values
array
City,
state,
country

13. Scatter maps
Scatter maps represent data
based on lat/lon coordinates
Circles size and colors depend on
data fields and aggregations

14. Heat maps
Heat maps represent data based on
lat/lon coordinates
Heat spots color and size are based
on field aggregated values in the
geographical radius

15. Choro…what ?
Choropleth maps use text info and mapping
files for filling geo zones:
- Countries
- Regions
- States
- Etc.

16. Tile server
MongoDB Charts uses a default
cloud based tile server
When running Charts on-prem,
you can select a custom local or
a remote tile server by changing
the Charts Docker compose file
Variables :
CHARTS_TILE_SERVER:
https://tiles.example.com/{z}/{x}/{y}.png
CHARTS_TILE_ATTRIBUTION = "© [Example tile
provider](https://tiles.example.com/copyright)“
Charts will substitute the `{x} {y} {z}`
parameters with the coordinates and zoom
levels to load the tiles
See https://wiki.openstreetmap.org/wiki/Tile_servers

17. Demo
Geospatial charts

18. Embedding your Geo charts in a web app
Activate embedding
Secured vs non secured (digital signature)
How to embed using iFrame
Refreshing chart

19. Demo
Embedding geo Charts
in your web app

20. How to get Charts ?

21. Getting MongoDB Charts on Atlas
Sign in/up for Atlas: https://cloud.mongodb.com
Create a Project (or use an existing one)
Create a Cluster (or use an existing one)
Add users to your Project
Activate Charts in the project
Note: each Charts instance can only see Atlas clusters in the same project

22. Installing Charts on-prem
Deploying Charts is ultra easy:
Download the Charts Compose file from MongoDB download center
Create a Docker Secret containing the URI for your MongoDB instance
Deploy Charts using docker stack deploy
Create your first Charts user
That’s it, now you can access Charts from a web browser
docker stack deploy

23. Feature Roadmap
Planned features include:
Dashboard filtering
Calculated fields
Interactive dashboards
Data Preparation
… Tell us what else you want to see!
The development, release, and timing of any
features or functionality described for our products
remains at our sole discretion. This information is
merely intended to outline our general product
direction and it should not be relied on in making a
purchasing decision nor is this a commitment,
promise or legal obligation to deliver any material,
code, or functionality.

24. Questions, Feedback, Requests, Bugs?
Find me and the whole Charts team at MongoDB World
Contact me later
§ guillaume@mongodb.com
Send us a message or feature suggestion from any page in the
Charts app

25. Thank you !