# Self made charts in FileMaker

**URL:** <https://the.fmsoup.org/t/self-made-charts-in-filemaker/4925>\
**Category:** MBS Plugins\
**Tags:** plugin, chart\
**Created:** [June 30, 2025, 6:55am UTC](https://the.fmsoup.org/t/self-made-charts-in-filemaker/4925 "2025-06-30T06:55:14Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![MonkeybreadSoftware](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/monkeybreadsoftware/32/361_2.png) [@MonkeybreadSoftware](https://the.fmsoup.org/u/MonkeybreadSoftware)\
**Post date:** [June 30, 2025, 6:55am UTC](https://the.fmsoup.org/t/self-made-charts-in-filemaker/4925/1 "2025-06-30T06:55:14Z")

</div>

Recently we had the idea that we could draw charts ourselves with the [GraphicsMagick](https://www.mbsplugins.eu/component_GraphicsMagick.shtml) functions. It's more a fun project, but I was able to draw a simple bar chart with a few drawing commands. We use a few filled rectangles to draw bars and calculate them on the fly in the while loop.

![](https://www.mbsplugins.de/image/CalculatedChart.png)

`Let ( [`

We start here with a few values. You could of course pass them as parameters in a custom function. But for the example we just pass some example data:

```auto
  cities = List ( "Hamburg" ; "Berlin" ; "Munich" ; "Cologne" ) ;
  values = List ( 1800000 ; 3700000 ; 1500000 ; 1100000 ) ;

```

And we define a color palette to pick the colors for each bar:

```auto
colors = List ( "#4e79a7" ; "#f28e2b" ; "#e15759" ; "#76b7b2" ; "#59a14f" ) ;

```

We create an image with a given width, height and white as background color.

```auto
  img = MBS( "GMImage.New"; "600x400"; "white" ) ;

```

We need to find the maximum value for scaling the bars. Usually you would make a loop over the list, but here we just call Max() function and pass all values:

```auto
  maxValue = Max ( 1800000 ; 3700000 ; 1500000 ; 1100000 ) ;

```

Using black stroking color, we draw the axes with simple lines:

```auto
  r = MBS( "GMImage.SetStrokeColor"; img; "black" ) ;
  r = MBS( "GMImage.DrawLine"; img; 50; 350; 550; 350 ) ; // X-axis
  r = MBS( "GMImage.DrawLine"; img; 50; 50; 50; 350 ) ; // Y-axis

```

Now we define the sizes for the bars, the size for the spacing and where to start for the x-coordinate. These values could be made parameters to just defined as needed in the calculation like we do here:s

```auto
  barWidth = 80 ;
  spacing = 30 ;
  baseX = 70 ;

```

Next we have a while loop embedded to loop over the values. In the loop we pick the city name, the value and the color from the lists. For the colors we use Mod() already to pick the next color if you have more values than colors and reuse them. Then we calculate the bar position and size and draw the rectangles. Below that we draw the text with the name of the city.

```auto
  count = ValueCount ( cities ) ;
  colorCount = ValueCount ( colors ) ;
  r = While (
      [i = 1] ; i ≤ count ;
      [
         city = GetValue ( cities ; i ) ;
         val = GetValue ( values ; i ) ;
         color = GetValue ( colors ; Mod ( i - 1 ; colorCount ) + 1 ) ;
 
         height = (val / maxValue) * 300 ;
         x1 = baseX + (i - 1) * (barWidth + spacing) ;
         x2 = x1 + barWidth ;
         y1 = 350 - height ;
         y2 = 350 ;
 
         r = MBS( "GMImage.SetFillColor"; img; color ) ;
         r = MBS( "GMImage.DrawRectangle"; img; x1; y1; x2; y2 ) ;
         r = MBS( "GMImage.SetFontPointsize"; img; 16 );
            
         geometry = barWidth & "x20+" & x1 & "+360" ;
         r = MBS( "GMImage.Annotate"; img; city; geometry; 5 ) ; // 5 = CenterGravity
 
         i = i + 1
      ] ; r
  )

```

Finally we encode the image as PNG and return with the result variable.

```auto
  result = MBS( "GMImage.WriteToPNGContainer"; img; "test.png" );
  r = MBS("GMImage.Free"; img)
] ; result )

```

Please try and see what you can build.