topic Formula Math, Trigonometric Functions (Sine, Cosine and Tangent) in CMS Development

Formula Math, Trigonometric Functions (Sine, Cosine and Tangent)

mii — Tue, 06 May 2025 10:11:27 GMT

I like SVG,

you can build nice frontend Artworks with it. But to effectively create and calculate circle graphs; trigonometry is required. Java and JavaScript have it in the math library. But it's missing in HubL.

Example: I have a pie chart (circle) and I want to arrange individual pie slices (segments) radially outward from the center at equal angles around the center. To Calculate the angles you need: Sine, Cosine and/or Tangent.

Thanks for upvotes!

In addition to this:
https://knowledge.hubspot.com/workflows/custom-formula-functions

Re: Formula Math, Trigonometric Functions (Sine, Cosine and Tangent)

Jaycee_Lewis — Tue, 06 May 2025 13:52:22 GMT

Hey @mii 👋 This is a fantastic suggestion. Can you please repost it over in the Ideas Forum? That way it will get in front of the right eyes. — Jaycee

Re: Formula Math, Trigonometric Functions (Sine, Cosine and Tangent)

nickdeckerdevs1 — Tue, 06 May 2025 15:39:02 GMT

I'd suggest adding a element on the page using hubl/in the module, and then use javascript to create that svg.

Also, there are plenty of libraries out there that do this type of work as well. Like @Jaycee_Lewis noted, posting this in the ideas is somethign you could do, but this is solvable with javsacript!

Re: Formula Math, Trigonometric Functions (Sine, Cosine and Tangent)

Anton — Thu, 08 May 2025 07:07:07 GMT

Hey @mii,

great idea!

What I've done a few times:

Implementing chart.js and modifing it via HubL.

A simple example for the module.html:

<div> <canvas id="myChart"></canvas> </div> {% require_js %} <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> const ctx = document.getElementById('myChart'); new Chart(ctx, { type: 'pie', data = { labels: [ {% for data in module.pie_data %} {{ data.label }}{% unless loop.last %},{% endunless %} {% endfor %} ], datasets: [{ data: [ {% for data in module.pie_data %} {{ data.amount }}{% unless loop.last %},{% endunless %} {% endfor %}], backgroundColor: [ {% for data in module.pie_data %} {{ data.color }}{% unless loop.last %},{% endunless %} {% endfor %} ], hoverOffset: {{ module.styles.pie_settings.offset }} }] }; }); </script> {% end_require_js %}

hope this helps

best,

Anton