https://www.psr.edu/wp-content/plugins/t324-charts/js/t324-charts.js?ver=1

1function initCharts() {
2  let elExists = document.getElementsByClassName('fact-block');
3
4  if(elExists[0]) {
5
6    if(Chart) {
7      //load our localized object into a variable so we can switch this out 
8      //with another localized item if needed */
9      let charts = t324_ff;
10
11      console.log(t324_ff);
12
13      //loop through all chart elements
14      for(let i = 0; i < charts.length; i++) {
15        console.log(charts[i]);
16
17        //if there's data in this part of the object, use a pie chart
18        if(charts[i].pieChartData) {
19
20          //make this easier to write
21          let data = charts[i].pieChartData;
22
23          //set up some arrays to hold our pie chart data
24          let pieValue = [];
25          let pieLabel = [];
26          let pieColor = [];
27
28          //loop through all the data for this pie chart and push it to our arrays
29          //we do this so charts.js can digest it easier
30          for (let x = 0; x < data.length; x++) {
31            pieValue.push(data[x].fast_fact_pie_chart_number);
32            pieLabel.push(data[x].fast_fact_pie_chart_label);
33            pieColor.push(data[x].fast_fact_pie_chart_color);
34          }
35
36          //target our item generated by PHP
37          var ctx = document.getElementById(`chart-${charts[i].id}`).getContext('2d');
38          var myChart = new Chart(ctx, {
39
40            type: 'doughnut',
41            data: {
42              labels: pieLabel,
43              datasets: [{
44                data: pieValue,
45                backgroundColor: pieColor,
46              }]
47            },
48            options: {
49              legend: {
50				onClick: function(event, legendItem) {}, // or set it to null
51				onHover: function(event, legendItem) {
52					event.target.style.cursor = 'default';
53				},
54                display: true,
55                position: 'bottom',
56                align: 'start',
57                labels: {
58                  fontColor: '#FFF'
59                }
60              },
61              title: {
62                display: false,
63                position: top,
64                text: charts[i].title
65              },
66              tooltips: {
67                callbacks: {
68                  lines: function () {
69                    return '%'; // return a string that you wish to append
70                  }
71                }
72              },
73              aspectRatio: 1,
74            }
75          });
76        }
77
78        //if we're using a countUp data type
79        if(charts[i].countUpValue){
80          //check if the counting script is loaded
81          if(bounty){
82            // root is a parent of the target element
83            let observer = new IntersectionObserver(function() {
84              bounty.default({ el: '#fact-' + charts[i].id, value: charts[i].countUpValue, duration: 1000 });
85            }, { root: null, threshold: 0.3 }); //the root is the viewport and the element is 10% inside the viewport
86
87            
88            // observing a target element
89            observer.observe(document.querySelector('#fact-' + charts[i].id));
90          }
91        }
92      }
93    }
94  }
95}
96
97//fire up the charts!
98initCharts();