0

Using tc-angular-chartjs I’m able to get pie chart to function, but haven’t been able to figure out how to sum the label values to display correctly. Also, I’m able to get bar chart to work using their example, but not with external data via ajax call.

Note: I’m new to both angularjs and javascript so i maybe missing something simple here, but I’ve been trying to figure this out for days with no luck.

Pie Chart Example: I’m using a factory and restangular to get the external data and that works.

PROBLEM #1

To calculate the element values I’ve tried several references I’ve found, but with no luck trying to incorporate into chart. This is one of the references i’ve tried. most of them are variances of this that i’ve seen: occurrence of array elements

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>

Bar Chart only works using example on their site.

PROBLEM #2 - I'll investigate this one further

Trying below I get: 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);   
});
Community
  • 1
  • 1
georgeb1
  • 37
  • 4
  • Where is "incident" coming from? `service` is already passed into the function for each `services` iteration. Wouldn't it just be `service.name.length`? – daleyjem Jul 03 '15 at 21:01
  • The bar chart length error is misleading. It occurs regardless if I use .length or hard code a number. Also, my main problem is sum the elements for value field, so probably disregard the bar chart issue for now. I'll review that once i can at least get pie chart to function accurately. – georgeb1 Jul 03 '15 at 21:28
  • Use Chrome Dev tools, and put breakpoints in your JS to see what equals what. If you're new to JS, it'll open up a whole new world for seeing where things are going wrong. – daleyjem Jul 03 '15 at 21:34
  • @daleyjem ill give that a try regarding the bar chart issue. – georgeb1 Jul 03 '15 at 21:41

3 Answers3

1

I don't have enough rep to add a comment, so i'm putting it in an answer

What is the value of the variable incident ? Does it come from an async service, is it hardcoded, or is it from a synchronous calculation?

I'd print out the value of incident before the loop so you can get an idea of what's in there before the loop.

Also, what is the structure of service inside the forEach? Did you possible mean to use it in the loop as incident[service].name?

JesseDahl
  • 137
  • 3
  • 7
  • "Incident" is coming from the initial results of the factory call using restangular. I've been trying to limit scope of data to make it easier to troubleshoot. The "Data ouput Example" above is basically what I'm working with right now. – georgeb1 Jul 03 '15 at 21:45
0

If I understand what you're trying to do, this is what you need to do instead: 

incident[service].name.length

I might have misinterpreted your question however. If so let me know.

Chrillewoodz
  • 27,055
  • 21
  • 92
  • 175
  • If you're referring to the bar chart problem. I get that same "TypeError: Cannot read property 'length' of undefined" even if I replace data: incident.service.name.length to data: 28 or any other random number. – georgeb1 Jul 03 '15 at 21:04
  • @georgeb1 How can you get a 'length of undefined' error if you're using a set value? Or do something else happens if you do? – Chrillewoodz Jul 03 '15 at 21:05
0

You probably don't have the data yet before you start processing. So if you are using ajax to retrieve, make sure data is present before you start forEach loop.

z.a.
  • 2,549
  • 3
  • 12
  • 16
  • I'm getting the data using restangular call and that works. The Data Output Example is what I'm working with. I just changed the names of the lable data to generic service1, 2 etc. In that example there are 2 service1 labels, so the value for service1 should be 2. I need to calculate the sum of each of those labels and put in value field. That is my first problem. The bar chart is second problem. Maybe I should have left the bar chart issue out. – georgeb1 Jul 03 '15 at 21:20
  • can u see where the length undefined comes from, which attribute? that will be helpful. – z.a. Jul 03 '15 at 21:27
  • I tried to add screen shot of error in chrome but dont have enough points to post image. The errors dont tell me where - they all reference chart.js and angularjs – georgeb1 Jul 03 '15 at 21:39
  • well, seems like it can only be this line, data: incident.service.name.length. you can make it like this and try, data: angular.isDefined(incident.service.name) ? incident.service.name.length : null if you still get undefined error, try to go lower in the chain, like incident.service or incident – z.a. Jul 03 '15 at 21:51