CODEWITHSUNDEEP
arraysangulartypescriptapihighcharts
reginald bollosa
reginald bollosa

Reputation: 55

Angular 11 - How to import array data into highcharts

I'm using angular 11, typescript

I have this array structure that I want to import in highcharts, but I don't know how to. I'm using api response to get the data and every time a user take a new quiz it adds another set of quiz_title, passed and failed.

 "message": "Remarks successfuly shown",
    "error": false,
    "error code": 200,
    "line": "line215215",
    "quizRemarks": [
        {
            "Quiz_Title": "Acts and Regulation",
            "Passed": "24",
            "Failed": "6"
        },
        {
            "Quiz_Title": "Breakdowns and Accidents",
            "Passed": "7",
            "Failed": "3"
        },
        {
            "Quiz_Title": "Coupling and Uncoupling Semi-Trailers",
            "Passed": "2",
            "Failed": "8"
        },
        {
            "Quiz_Title": "Defensive Driving",
            "Passed": "2",
            "Failed": "37"
        },
        {
            "Quiz_Title": "Driver Health and Safety",
            "Passed": "7",
            "Failed": "1"
        },
        {
            "Quiz_Title": "General Knowledge",
            "Passed": "4",
            "Failed": "14"
        }
    ]
}

Upvotes: 1

Views: 90

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

Is this an output that you want to achieve?

const chartData = dataFromServer.map(data => ({
  name: data["Quiz_Title"],
  data: [{
      name: 'Passed',
      y: parseInt(data["Passed"])
    },
    {
      name: 'Failed',
      y: parseInt(data["Failed"])
    }
  ]
}));

https://jsfiddle.net/BlackLabel/dz1wheut/

Upvotes: 1

Related Questions