Graph Christmas Tree

The Graph Christmas Tree—A Slightly Spooky Christmas Story It all started with a seemingly normal customer request: “We need an endpoint that we can pass parameters to and that returns an image with a graph.” Sounds simple enough, right? Behind this request, however, lay the ultimate horror scenario: server-side image generation. As we all know, servers only have that black box with green text (see the Matrix movie series)—not exactly ideal for graphical tasks. Instead of the simple solution of drawing the graphs by hand and scanning them each time, I wanted to take a slightly more technically challenging approach. First stop: the search for an open-source package. I ended up with chartjs-to-image. At first, everything worked perfectly. Too perfectly. Until I briefly lost my internet connection, and lo and behold: no more images 🥲 A quick look at the source code made it clear: The package simply calls the QuickChart API in the background. That’s no good because:

• Rate limiting (aka, getting hit with hefty fees if you want more)
• If QuickChart is down, we’re down too :(
• Double latency (Client ↔︎ our server ↔︎ QuickChart) So, Plan B: Generate images on the server ourselves. After some Googling, hair-pulling, and tears 🥲, I had a plan: Install ChartJS and polyfill the Canvas API with node-canvas. “Well, it’ll work out,” I thought as I ran the command bun install canvas. Oh wait, did you notice that 🤨? Exactly—we use Bun, a very fast JS runtime. Unfortunately, since Bun is still fairly new, it has a tendency to run into compatibility issues from time to time. With my luck, it turned out that node-canvas specifically didn’t work with Bun yet. At least not node-canvas v2. Oh well, guess I’ll just have to install the beta version… Build error -,- So off I went to find the right GitHub issue that tells you how it all works and which system packages you need. But now, finally, the final working version. Install Node-Canvas… Start the backend… Aaaand… Well, no. Of course, you still have to get everything working together properly: point ChartJS to the Canvas API, set up configurations so ChartJS doesn’t start crying because there’s no browser in sight, handle rounded corners, curves, data, calculations, the Docker image, and much more. After several “final” iterations, including a funny Christmas tree graph, we finally did it: We got the right images back! Just quickly create the API documentation with Swagger, add a sample image, and we’re finally done 🥹. But I’ve had enough of image generation for the next few years 🥲 At least I already have a Christmas tree for December 24—even if it is just a graph 😄 What are your experiences with image generation? Have you struggled with this too? Or do you just grab a brush and draw the graphs by hand? 🎨 Let me know 😄 #Development #WebTechnology #Christmas #Coding More links: https://www.linkedin.com/posts/max-braun-98b747202_development-christmas-coding-activity-7274360662418481152-kCVY?utm_source=share&utm_medium=member_desktop