Add record values on the javascript tab of a custom component

Hey community! Wishing everyone a happy new year!

I’m looking for a solution to add card record values to the javascript tab of a custom component. I have been unsuccessful achieving this on my own. Any help would be greatly appreciated.

Cheers!
Cam

Hey Cam!

I’d love to help with this. Can you tell me what you’re ultimately trying to achieve? You might need to use the JS on the page level with a custom helper.

If you let me know more of the end-goal I’ll see if we can come up with something.

I was trying to play around with some jsChart stuff and thought it would be cool if I could get it working. It would open a lot of possibilities when creating a dashboard. Doesn’t have to be jsChart but is the product I chose to test.

Here is the template page, ignore the class, I was trying to copy methods used in card 6 from the tadabase library :
image

Here is the Javascript tab, I know the variables are in quotes and they shouldn’t be but it’s for demonstration purposes, I have also added the proper js resources on the resource tab:
image

This obviously doesn’t work:

This is what I’m after for testing:
image

If I can get this working then the knowledge can be used to create multiple different charts etc. I realize that there is a chart component but it is limited in how you can configure it.

Understood.

I’ll take a look and see what we can do here.

I’m gonna follow your code and make a few very minor tweaks, i think it will work. But we’ll stick it all in the custom component.

Here’s the end result:

In case someone else finds this useful, I’ll start from the beginning.

  1. Add the ChartJS CDN code Custom Code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js" integrity="sha512-TW5s0IT/IppJtu76UbysrBH9Hy/5X41OTAbQuffZFU6lQ1rdcLHzpU5BzVvr/YFykoiMYZVWlr/PX1mDcfM9Qg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  1. I added all my calculations with a unique fieldname for each (total, min, max):

  2. Add the template code, but I surrounded it with a div and a class of hide since we don’t actually want to see these values:

{{#each records}}
    <div class="hide">
        <h1><div id="totalRecords">{{total}}</div></h1>
        <h1><div id="maxRecords">{{max}}</div></h1>
        <h1><div id="minRecords">{{min}}</div></h1>
    </div>
{{/each}}

<div>
  <canvas id="myChart"></canvas>
</div>
  1. Next, add this to the Javascript section of the custom component:

$( document ).ready(function() {
    var total = $( "#totalRecords" ).html(); 
    var max = $( "#maxRecords" ).html(); 
    var min = $( "#minRecords" ).html(); 
    
    new Chart(document.getElementById("myChart"), {
    type: 'bar',
    data: {
      labels: ["Total", "Max", "Min"],
      datasets: [
        {
          label: "Totals",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f"],
          data: [total,max,min]
        }
      ]
    }
    });
  
});

I got this example from here: https://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/

I’d love to see what cool stuff you come up with! :grinning:

(edit: there is a known bug that will be fixed shortly when using this in combination with the search component. )

Boom! nice work Moe! I’m excited about this!

1 Like