# Bubble chart overlay for maps

**URL:** <https://the.fmsoup.org/t/bubble-chart-overlay-for-maps/3891>\
**Category:** Questions\
**Tags:** filemaker\
**Created:** [January 5, 2024, 7:03pm UTC](https://the.fmsoup.org/t/bubble-chart-overlay-for-maps/3891 "2024-01-05T19:03:08Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![traut](https://avatars.discourse-cdn.com/v4/letter/t/f475e1/32.png) [@traut](https://the.fmsoup.org/u/traut)\
**Post date:** [January 5, 2024, 7:03pm UTC](https://the.fmsoup.org/t/bubble-chart-overlay-for-maps/3891/1 "2024-01-05T19:03:08Z")

</div>

Is it possible to create a bubble chart overlay for a map with FMP?

I'm new to FMP20, SVG and web viewer - do you know an example whether and how that can be done?

![bubble_map](https://canada1.discourse-cdn.com/flex030/uploads/fmsoup/original/2X/a/adb3c0524244920fa897f2a19616639abcb1c987.png)

---

<div class="post-metadata">

**Author:** ![traut](https://avatars.discourse-cdn.com/v4/letter/t/f475e1/32.png) [@traut](https://the.fmsoup.org/u/traut)\
**Post date:** [January 5, 2024, 7:10pm UTC](https://the.fmsoup.org/t/bubble-chart-overlay-for-maps/3891/2 "2024-01-05T19:10:07Z")

</div>

I had used .fp3 graphics for that purpose before, where I had a background map created dot by dot from border coordinates and data sets which placed ASCII Circles into large text fields. That had worked up to FMP7, while from then on a monospaced character would have a different width for blanks and other characters, even in font size 1, making dot character graphics unusable from then on.

That's a graphic from FMP7:  
 ![Codier-Anbieter](https://canada1.discourse-cdn.com/flex030/uploads/fmsoup/original/2X/4/490377f7158da22c92cff9fcc66353d0423b7c3c.png)

This simple approach did not permit fill-by-color-operations and was absolutely static, with very limited scaling options.

---

<div class="post-metadata">

**Author:** ![Malcolm](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/malcolm/32/196_2.png) [@Malcolm](https://the.fmsoup.org/u/Malcolm)\
**Post date:** [January 5, 2024, 8:20pm UTC](https://the.fmsoup.org/t/bubble-chart-overlay-for-maps/3891/3 "2024-01-05T20:20:00Z")

</div>

The webviewer is going to be the best way to enable that. You'll have your choice of charting libraries. I should be clear, javascript/web based charting libraries. Your business needs may restrict your choices, but your starting point is searching for charting libraries on the web.

You can also make them interactive, passing commands back from the web viewer to filemaker scripts and _vice versa._

If you treat this as a web project initially, get it working in a web page. Once you are happy with that, you can ask specific questions to get it functioning in FMP using the web viewer. A lot of libraries work without change, some need a little tweak.

---

<div class="post-metadata">

**Author:** ![traut](https://avatars.discourse-cdn.com/v4/letter/t/f475e1/32.png) [@traut](https://the.fmsoup.org/u/traut)\
**Post date:** [January 5, 2024, 9:48pm UTC](https://the.fmsoup.org/t/bubble-chart-overlay-for-maps/3891/4 "2024-01-05T21:48:53Z")

</div>

I don't understand that comcept yet. Of course I can include any external web page for that purpose - but then I don't want, I don't need FMP.

But how can I do a SVG overlay for that web view?

---

<div class="post-metadata">

**Author:** ![planteg](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/planteg/32/627_2.png) [@planteg](https://the.fmsoup.org/u/planteg)\
**Post date:** [January 5, 2024, 10:09pm UTC](https://the.fmsoup.org/t/bubble-chart-overlay-for-maps/3891/5 "2024-01-05T22:09:07Z")

</div>

> [@traut](#):
>
> I don't understand that comcept yet. Of course I can include any external web page for that purpose - but then I don't want, I don't need FMP.

What do you mean by **but then I don't want, I don't need FMP**?

In a Web viewer you can display contents that is HTML not coming from a Web site but stored in a variable. And since you may add JavaScript, you get a very potent way of adding to the UI. Compared to creating new FileMaker objects which takes much time, using standard Web techniques is the fast lane. You want collapsible lists, do that in the Web viewer.

Read about the Web viewer on Claris Website and Internet. You don't need to understand everything in the beginning, just grab what you can do with that object. It's very powerful.

---

<div class="post-metadata">

**Author:** ![traut](https://avatars.discourse-cdn.com/v4/letter/t/f475e1/32.png) [@traut](https://the.fmsoup.org/u/traut)\
**Post date:** [January 5, 2024, 10:28pm UTC](https://the.fmsoup.org/t/bubble-chart-overlay-for-maps/3891/6 "2024-01-05T22:28:07Z")

</div>

Ah, thanks - I thought I'd need another website to build that data for me.

But the websites I know show the image as a finished graphics and don't tell me how it was done. So an example with a graphics overlay is what I look for.

---

<div class="post-metadata">

**Author:** ![Kirk](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/kirk/32/2197_2.png) [@Kirk](https://the.fmsoup.org/u/Kirk)\
**Post date:** [January 5, 2024, 10:40pm UTC](https://the.fmsoup.org/t/bubble-chart-overlay-for-maps/3891/7 "2024-01-05T22:40:21Z")

</div>

Not that any of these javascript bundles match your needs, but they can give you an overview of some of the things that are possible. CarafeFM makes it pretty easy going.

> **[Carafe: Your Free, Open-source JavaScript + FileMaker Tool](https://carafe.fm)**
>
> Carafe is a free open platform that facilitates creating and deploying JavaScript components in FileMaker. Start enhancing FileMaker with JavaScript now.

You can do almost any data visualization you can think of with Tableau, which integrates well with FileMaker. Not done it, and people tell me it can be a performance hog if not done right, but just shows an additional range of options. (and Tableau can be pricey quickyl)

> **[Visualize FileMaker Data in Tableau | Codence | Business](https://www.codence.com/resources/blog/business/visualize-your-filemaker-data-in-tableau)**
>
> Visualize your FileMaker data in Tableau and get important questions answered in a matter of minutes to help grow and improve your business.

---

<div class="post-metadata">

**Author:** ![Malcolm](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/malcolm/32/196_2.png) [@Malcolm](https://the.fmsoup.org/u/Malcolm)\
**Post date:** [January 6, 2024, 2:05am UTC](https://the.fmsoup.org/t/bubble-chart-overlay-for-maps/3891/8 "2024-01-06T02:05:01Z")

</div>

Look at [https://d3js.org/](https://d3js.org/) or any of the many modules that do similar things.

---

<div class="post-metadata">

**Author:** ![traut](https://avatars.discourse-cdn.com/v4/letter/t/f475e1/32.png) [@traut](https://the.fmsoup.org/u/traut)\
**Post date:** [January 6, 2024, 9:49am UTC](https://the.fmsoup.org/t/bubble-chart-overlay-for-maps/3891/9 "2024-01-06T09:49:33Z")

</div>

Thanks!
