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.