Adding Charts in Infowindows- CartoDB

The GIS analyst in many organizations usually find that their activities in the office centre around information management and presentation. Some of the complex issues in GIS only come up during the occasional three to five years project. Everyday tasks that involve using geodata to estimate or explain trends to decision makers are far more commonplace in the office.
One of the best ways of summarizing and presenting spreadsheet data is by using charts and graphs. In this post, we will prepare data into charts and display them inside the feature info window of a webmap in CartoDB.

Things to note
- The charts and graphs were prepared in Microsoft Excel 2013 environment and then saved as png images.
- The charts were then hosted online and their URLs copied out.
-The charts are viewed as images within the infowindow of features on a map in CartoDB.

Click the Link here to download a sample data for practice-ChartSample
(Kindly attribute this data to www.mapsnigeriainitiative.wordpress.com)
Chart preparation steps

• Save the data as a table or spreadsheet format and Open with Spreadsheet software (be sure that the software has the capability to create charts).
• Create the chart or charts and store on PC or host online.
• Add a fresh column on the spreadsheet.
• Insert the link address of the image into HTML image tags .
• Put this into the fresh column and save the data sheet.

Sign into CartoDB account and open an empty map. Add layer. For the demo, we added a point feature layer in CSV format to the base map.


Click on Data VIEW to inspect the attribute table of the layer. A field named ‘url’ contains the HTML codes for the links to the URL of the images (see cursor finger position on the screenshot below).


We double click on one of the values in the ‘url’  field to adjust the image height and width.


Go back to MAP VIEW and click on the infowindow icon (see red box)


In the infowindow settings, we activate the pt no (represent the Pt number) and the url fields. (see red box)


Click on a Point feature and confirm the chart is embedded in the infowindow.
See screenshot below.


Another point is clicked and a corresponding chart opens up in the infowindow.


Thank you for following the blog.

Merging datasets in CartoDb using toggle control

Datasets or Layers in CartoDB can be merged by similar columns (attribute fields) or by Spatial relationship.

Click this link and download Sample geodata - Grazing Spots, West Africa 

Login into CartoDB. Click on New map and CONNECT DATASET. Download the sample geodata- a Point feature shapefile and a polygon feature shapefile.
Click on DATA FILE and scroll down to UPLOAD FROM FILE. Start with the polygon feature layer.
Once Upload is complete, the layer should appear in MAPVIEW or DATAVIEW. If it appears in DATAVIEW, click the MAPVIEW.
See our example screenshot below.


Click on the + button where the cursor finger is positioned in the screenshot to add the point feature layer.
See screenshot of our demo of the CartoDb MAPVIEW showing the two layers.


Our goal is to spatially join or merge the Points and the Polygon layers into a single layer as we want to merge the points according to the polygons which they fall within or intersect.
Select DATAVIEW to display the attribute table and Click on merge dataset icon (red boxed area in the screenshot below).


Click on Spatial Join since we are merging by the spatial intersection (meaning the topology relationship between the Points and Polygons) and not column.


On the next page we select the datasets to merge. Since the polygon layer is our principal target, the source point feature layer is chosen from the drop down list as shown on the screenshot below.


Select COUNT (red boxed on screenshot below) and click MERGE DATASETS.


A new layer is created from the merge. Open the DATAVIEW and notice the red boxed column where the intersect_count is listed. This list the number of points within each polygon.


To visualize this properly on the map, click on MAPVIEW.
Click on the Map Layer Wizard icon and choose SIMPLE option. Go to Label Text option and choose intersect_count column to label the layer with.


Results are shown on the screenshot below. Each polygon are now labeled with the number of points that intersect it.


Thank you for following our demonstration.