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

[mii]

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

[Anton · Accepted solution]

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

[nickdeckerdevs1]

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!

[Jaycee_Lewis]

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