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 :
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:
This obviously doesn’t work:
This is what I’m after for testing:
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.
<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>
I added all my calculations with a unique fieldname for each (total, min, max):
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>
$( 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! 
(edit: there is a known bug that will be fixed shortly when using this in combination with the search component. )
I copied the code, and it worked great for a chart.
Now I want to change the bar chart to a horizontal bar chart…
I only changed the type to “horizontalbar”, but unfortunately, it does not show.
Is the horizontal bar a new JS type or is TB not capable of reading it?
{{#each records}}
<div class="hide">
<h1><div id="overwaardeberekend">{{field_4022}}</div></h1>
<h1><div id="box1">{{field_3673}}</div></h1>
<h1><div id="box12r">{{field_3673}}</div></h1>
<h1><div id="box31">{{field_3924}}</div></h1>
<h1><div id="box32">{{field_4022}}</div></h1>
</div>
{{/each}}
<div>
<canvas id="myChart"></canvas>
</div>
and the JS:
new Chart(document.getElementById("myChart"), {
type: 'horizontalBar',
data: {
labels: ["XXX", "XXXX", "XXXX","XXXX"],
datasets: [
{
label: "XXXXr",
backgroundColor: ["#030060", "#030060","#030060","#030060"],
data: [box1,box3,0,0]
},{
label: "XXXXX",
backgroundColor: ["#3CD458", "#3CD458","#3CD458","#3CD458"],
data: [box1,BOX2,0,0]
},{
label: "XXXXX",
backgroundColor: ["#EAB10B","#EAB10B","#EAB10B","#EAB10B"],
data: [0,0,xx,0]
},{
label: "XXXX",
backgroundColor: ["#9EA5B4", "#9EA5B4","#9EA5B4","#9EA5B4"],
data: [0,0,0,xx]
}
]
}
});
});
I think latest library doesn’t support horizontalBar chart.
if you still want to use horizontalBar chart use this JS file
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
When adding th code to the footer, the graphs don’t show on the custom component…
I think it has to do with the addition of the integrity hash and the no referrer link. But I can’t find where I can generate this to support the CDN code you shared with the latest charts.
The source file which only works is this (and above mentioned):
ty!-- Chart.JS component -->
<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>
<!-- End Chart.JS component component -->