When using tc-angular-chartjs, I have successfully implemented a pie chart but am struggling to sum the label values for proper display. Additionally, while I can create a bar chart using their example, I encounter issues when trying to use external data fetched via an AJAX call.
Disclaimer: I am new to both AngularJS and JavaScript, so there might be a simple solution that I am overlooking. I have been attempting to resolve these issues for days without success.
Pie Chart Example: I am fetching external data using a factory and Restangular, which is functioning correctly.
Issue #1
I have tried various methods to calculate the element values, including references found online, but have not been able to incorporate them into the chart successfully. One of the approaches I tried involves counting occurrences of array elements as described in this discussion.
Code snippet for Chart:
services.forEach(function(service) {
data.push({
'value': incident.service.name.length, // Need to calculate sum of each 'label: service' element. [Used .length to get test value]
'color': colors.getRandom(), // This works, but need colors to be same for ea. service name
'highlight': 'brown',
'label': incident.service.name
});
$scope.data = data;
//console.log($scope.data);
});
Data Output Example:
Array[65]
0: Object
color: "orange"
highlight: "brown"
label: "Service1"
value: 36
__proto__: Object
1: Object
color: "navy"
highlight: "brown"
label: "Service1"
value: 40
__proto__: Object
2: Object
color: "green"
highlight: "brown"
label: "Service2"
value: 40
3: Object
color: "blue"
highlight: "brown"
label: "Service3"
value: 20
etc ..
HTML:
<div class="chart" ng-controller="chartController" style="margin-top:20px;">
<canvas tc-chartjs-pie chart-options="options" chart-data="data" auto-legend></canvas>
</div>
The bar chart only functions with the provided example on their website.
Issue #2 - To be further investigated
Upon trying the following code, I receive the error message: TypeError: Cannot read property 'length' of undefined
Code snippet:
// Chart.js Data
services.forEach(function(service) {
data.push({
label: incident.service.name,
fillColor: 'rgba(220,220,220,0.5)',
strokeColor: 'rgba(220,220,220,0.8)',
highlightFill: 'rgba(220,220,220,0.75)',
highlightStroke: 'rgba(220,220,220,1)',
data: incident.service.name.length
});
$scope.data = data;
//console.log($scope.data);
});