Drawing a bar chart by passing values from a json array through angularjs

Question

I have a JSON array as follows

{
      "id": "00000005",
      "Name": "Test5",
      "hours": 7.5,
      "day": 1
    },
    {
      "id": "00000005",
      "Name": "Test5",
      "hours": 2,
      "day": 2
    },
    {
      "id": "00000005",
      "Name": "Test5",
      "hours": 3,
      "day": 3
    },
    {
      "id": "00000005",
      "Name": "Test5",
      "hours": 3,
      "day": 4
    },
    {
      "id": "00000004",
      "Name": "Test4",
      "hours": 1,
      "day": 1
    },
    {
     "id": "00000004",
      "Name": "Test4",
      "hours": 4,
      "day": 2
    },
 {
      "id": "00000004",
      "Name": "Test4",
      "hours": 4,
      "day": 3
    },
    {
      "id": "00000003",
      "Name": "Test3",
      "hours": 7.5,
      "day": 1
    },
    {
     "id": "00000003",
      "Name": "Test3",
      "hours": 6,
      "day": 2
    },
{
      "id": "00000003",
      "Name": "Test3",
      "hours": 4,
      "day": 3
    },
    {
     "id": "00000003",
      "Name": "Test3",
      "hours": 5,
      "day": 4
    }

By using the above json array I want to draw a bar chart grouped by id and day. That is I need to the graph to be drawn for id 00000005,00000004,00000003 in day 1 and id 00000005,00000004,00000003 in day 2 and id 00000005,00000004,00000003 in day 3 and id 00000005,00000004,00000003 in day 4. I know the basic code for drawing a bar chart using angular-chart.js and chart.js. But I can't understand how should I pass my array values to $scope.labels and $scope.data.

Basic code for bar chart

angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
  $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  $scope.series = ['Series A', 'Series B'];

  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
})

UPDATE

I managed to group the array according to the day and following is the arranged array

"data": {
    "1": [
     {
          "id": "00000005",
          "Name": "Test5",
          "hours": 7.5,
          "day": 1
        },
{
          "id": "00000004",
          "Name": "Test4",
          "hours": 1,
          "day": 1
        },
{
          "id": "00000003",
          "Name": "Test3",
          "hours": 7.5,
          "day": 1
        }
    ],
    "2": [
     {
          "id": "00000005",
          "Name": "Test5",
          "hours": 2,
          "day": 2
        },
{
         "id": "00000004",
          "Name": "Test4",
          "hours": 4,
          "day": 2
        },
{
         "id": "00000003",
          "Name": "Test3",
          "hours": 6,
          "day": 2
        }
    ],
    "3": [
   {
          "id": "00000005",
          "Name": "Test5",
          "hours": 3,
          "day": 3
        },
{
          "id": "00000004",
          "Name": "Test4",
          "hours": 4,
          "day": 3
        },
{
          "id": "00000003",
          "Name": "Test3",
          "hours": 4,
          "day": 3
        },
    ],
"4": [
   {
          "id": "00000005",
          "Name": "Test5",
          "hours": 3,
          "day": 4
        },
{
          "id": "00000003",
          "Name": "Test3",
          "hours": 5,
          "day": 4
        }
    ]
 }
}

Now how can I assign these values to $scope.data and $scope.labels ?

score 0 · Accepted Answer · answered Jul 11 '19 at 16:12

If you take a run at the basic code, applied to your data, do you want something like this (if I were reporting on this data):

angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
    $scope.labels = ['00000005', '00000004', '00000003'];
    $scope.series = ['Day 1', 'Day 2', 'Day 3', 'Day 4'];

    $scope.data = [
        [7.5, 1, 7.5],
        [2, 4, 6],
        [3, 4, 4],
        [3, ?, 5],
    ];
})

Note entirely sure how you want to handle missing data, you'll have to play around with a combination of 0 or undefined within the chart. If you have issues splitting the data in this way, or this isn't what you're looking for, will need more details.

https://plnkr.co/edit/ouHu5R0UbbkxyDfUerru?p=preview

Drawing a bar chart by passing values from a json array through angularjs

1 Answers1