Need help in creating BAR CHART in angular

[akshaywani100]

using below json need to create chart in angular

{
“PlayerCareerSelectionStats”: [
{
“selectionEdition”: {
“id”: 6578,
“name”: ” 2018/2019″,
“displayName”: “Ajax”,
“abbreviation”: “AJX”,
“selectionId”: 187,
“nationalTeam”: false
},
“playerCareerCompetitionStats”: [
{
“competitionEdition”: {
“id”: 0,
“name”: “Total”,
“totalNumberOfRounds”: 0
},
“generalCareer”: {
“nrOfPlayedMatches”: 5,
“inStartingLineup”: 2,
“substitutionsIn”: 3,
“substitutionsOut”: 1,
“nrOfPlayedMinutes”: 218,
“goals”: 1,
“assists”: 1,
“yellowCards”: 0,
“redCards”: 0
}
},
{
“competitionEdition”: {
“id”: 607,
“name”: “2017/2018”,
“competition”: {
“id”: 42,
“name”: “Friendly Matches”
},
“totalNumberOfRounds”: 0,
“competitionPhases”: []
},
“generalCareer”: {
“nrOfPlayedMatches”: 1,
“inStartingLineup”: 0,
“substitutionsIn”: 1,
“substitutionsOut”: 0,
“nrOfPlayedMinutes”: 46,
“goals”: 0,
“assists”: 0,
“yellowCards”: 0,
“redCards”: 0
}
},
{
“competitionEdition”: {
“id”: 719,
“name”: “2018/2019”,
“competition”: {
“id”: 42,
“name”: “Friendly Matches”
},
“totalNumberOfRounds”: 0,
“competitionPhases”: []
},
“generalCareer”: {
“nrOfPlayedMatches”: 2,
“inStartingLineup”: 1,
“substitutionsIn”: 1,
“substitutionsOut”: 1,
“nrOfPlayedMinutes”: 71,
“goals”: 0,
“assists”: 1,
“yellowCards”: 0,
“redCards”: 0
}
},
{
“competitionEdition”: {
“id”: 730,
“name”: “2018/2019”,
“competition”: {
“id”: 62,
“name”: “Netherlands Eredivisie”
},
“totalNumberOfRounds”: 0,
“competitionPhases”: []
},
“generalCareer”: {
“nrOfPlayedMatches”: 1,
“inStartingLineup”: 0,
“substitutionsIn”: 1,
“substitutionsOut”: 0,
“nrOfPlayedMinutes”: 10,
“goals”: 0,
“assists”: 0,
“yellowCards”: 0,
“redCards”: 0
}
},
{
“competitionEdition”: {
“id”: 779,
“name”: “2018/2019”,
“competition”: {
“id”: 67,
“name”: “Netherlands KNVB Beker Cup”
},
“totalNumberOfRounds”: 0,
“competitionPhases”: []
},
“generalCareer”: {
“nrOfPlayedMatches”: 1,
“inStartingLineup”: 1,
“substitutionsIn”: 0,
“substitutionsOut”: 0,
“nrOfPlayedMinutes”: 91,
“goals”: 1,
“assists”: 0,
“yellowCards”: 0,
“redCards”: 0
}
}
]
},
{
“selectionEdition”: {
“id”: 6596,
“name”: ” 2018/2019″,
“displayName”: “Jong Ajax”,
“abbreviation”: “JAJ”,
“selectionId”: 222,
“nationalTeam”: false
},
“playerCareerCompetitionStats”: [
{
“competitionEdition”: {
“id”: 0,
“name”: “Total”,
“totalNumberOfRounds”: 0
},
“generalCareer”: {
“nrOfPlayedMatches”: 27,
“inStartingLineup”: 27,
“substitutionsIn”: 0,
“substitutionsOut”: 3,
“nrOfPlayedMinutes”: 2439,
“goals”: 2,
“assists”: 9,
“yellowCards”: 2,
“redCards”: 0
}
},
{
“competitionEdition”: {
“id”: 731,
“name”: “2018/2019”,
“competition”: {
“id”: 66,
“name”: “Netherlands Keuken Kampioen Divisie”
},
“totalNumberOfRounds”: 0,
“competitionPhases”: []
},
“generalCareer”: {
“nrOfPlayedMatches”: 27,
“inStartingLineup”: 27,
“substitutionsIn”: 0,
“substitutionsOut”: 3,
“nrOfPlayedMinutes”: 2439,
“goals”: 2,
“assists”: 9,
“yellowCards”: 2,
“redCards”: 0
}
}
]
},
{
“selectionEdition”: {
“id”: 7734,
“name”: ” 2018/2019″,
“displayName”: “Ajax U19”,
“abbreviation”: “AJX”,
“selectionId”: 465,
“nationalTeam”: false
},
“playerCareerCompetitionStats”: [
{
“competitionEdition”: {
“id”: 0,
“name”: “Total”,
“totalNumberOfRounds”: 0
},
“generalCareer”: {
“nrOfPlayedMatches”: 3,
“inStartingLineup”: 3,
“substitutionsIn”: 0,
“substitutionsOut”: 0,
“nrOfPlayedMinutes”: 281,
“goals”: 1,
“assists”: 0,
“yellowCards”: 0,
“redCards”: 0
}
},
{
“competitionEdition”: {
“id”: 797,
“name”: “2018/2019”,
“competition”: {
“id”: 117,
“name”: “UEFA Youth League”
},
“totalNumberOfRounds”: 0,
“competitionPhases”: []
},
“generalCareer”: {
“nrOfPlayedMatches”: 3,
“inStartingLineup”: 3,
“substitutionsIn”: 0,
“substitutionsOut”: 0,
“nrOfPlayedMinutes”: 281,
“goals”: 1,
“assists”: 0,
“yellowCards”: 0,
“redCards”: 0
}
}
]
},
{
“selectionEdition”: {
“id”: 8232,
“name”: ” 2019/2020″,
“displayName”: “Ajax”,
“abbreviation”: “AJX”,
“selectionId”: 187,
“nationalTeam”: false
},
“playerCareerCompetitionStats”: [
{
“competitionEdition”: {
“id”: 0,
“name”: “Total”,
“totalNumberOfRounds”: 0
},
“generalCareer”: {
“nrOfPlayedMatches”: 15,
“inStartingLineup”: 10,
“substitutionsIn”: 5,
“substitutionsOut”: 6,
“nrOfPlayedMinutes”: 925,
“goals”: 3,
“assists”: 1,
“yellowCards”: 1,
“redCards”: 0
}
},
{
“competitionEdition”: {
“id”: 862,
“name”: “2019/2020”,
“competition”: {
“id”: 28,
“name”: “Europa League”
},
“totalNumberOfRounds”: 0,
“competitionPhases”: []
},
“generalCareer”: {
“nrOfPlayedMatches”: 1,
“inStartingLineup”: 1,
“substitutionsIn”: 0,
“substitutionsOut”: 1,
“nrOfPlayedMinutes”: 76,
“goals”: 0,
“assists”: 0,
“yellowCards”: 0,
“redCards”: 0
}
},
{
“competitionEdition”: {
“id”: 810,
“name”: “2019”,
“competition”: {
“id”: 42,
“name”: “Friendly Matches”
},
“totalNumberOfRounds”: 0,
“competitionPhases”: []
},
“generalCareer”: {
“nrOfPlayedMatches”: 2,
“inStartingLineup”: 1,
“substitutionsIn”: 1,
“substitutionsOut”: 0,
“nrOfPlayedMinutes”: 114,
“goals”: 0,
“assists”: 0,
“yellowCards”: 0,
“redCards”: 0
}
},
{
“competitionEdition”: {
“id”: 926,
“name”: “2020/2021”,
“competition”: {
“id”: 42,
“name”: “Friendly Matches”
},
“totalNumberOfRounds”: 0,
“competitionPhases”: []
},
“generalCareer”: {
“nrOfPlayedMatches”: 1,
“inStartingLineup”: 1,
“substitutionsIn”: 0,
“substitutionsOut”: 1,
“nrOfPlayedMinutes”: 48,
“goals”: 0,
“assists”: 0,
“yellowCards”: 0,
“redCards”: 0
}
},
{
“competitionEdition”: {
“id”: 856,
“name”: “2019/2020”,
“competition”: {
“id”: 62,
“name”: “Netherlands Eredivisie”
},
“totalNumberOfRounds”: 0,
“competitionPhases”: []
},
“generalCareer”: {
“nrOfPlayedMatches”: 9,
“inStartingLineup”: 5,
“substitutionsIn”: 4,
“substitutionsOut”: 3,
“nrOfPlayedMinutes”: 514,
“goals”: 2,
“assists”: 1,
“yellowCards”: 1,
“redCards”: 0
}
},
{
“competitionEdition”: {
“id”: 878,
“name”: “2019/2020”,
“competition”: {
“id”: 67,
“name”: “Netherlands KNVB Beker Cup”
},
“totalNumberOfRounds”: 0,
“competitionPhases”: []
},
“generalCareer”: {
“nrOfPlayedMatches”: 2,
“inStartingLineup”: 2,
“substitutionsIn”: 0,
“substitutionsOut”: 1,
“nrOfPlayedMinutes”: 173,
“goals”: 1,
“assists”: 0,
“yellowCards”: 0,
“redCards”: 0
}
}
]
},
{
“selectionEdition”: {
“id”: 8644,
“name”: ” 2019/2020″,
“displayName”: “Jong Ajax”,
“abbreviation”: “AJX”,
“selectionId”: 222,
“nationalTeam”: false
},
“playerCareerCompetitionStats”: [
{
“competitionEdition”: {
“id”: 0,
“name”: “Total”,
“totalNumberOfRounds”: 0
},
“generalCareer”: {
“nrOfPlayedMatches”: 17,
“inStartingLineup”: 17,
“substitutionsIn”: 0,
“substitutionsOut”: 2,
“nrOfPlayedMinutes”: 1574,
“goals”: 6,
“assists”: 3,
“yellowCards”: 3,
“redCards”: 0
}
},
{
“competitionEdition”: {
“id”: 868,
“name”: “2019/2020”,
“competition”: {
“id”: 66,
“name”: “Netherlands Keuken Kampioen Divisie”
},
“totalNumberOfRounds”: 0,
“competitionPhases”: []
},
“generalCareer”: {
“nrOfPlayedMatches”: 17,
“inStartingLineup”: 17,
“substitutionsIn”: 0,
“substitutionsOut”: 2,
“nrOfPlayedMinutes”: 1574,
“goals”: 6,
“assists”: 3,
“yellowCards”: 3,
“redCards”: 0
}
}
]
},
{
“selectionEdition”: {
“id”: 12186,
“name”: ” 2020/2021″,
“displayName”: “Ajax”,
“abbreviation”: “AJX”,
“selectionId”: 187,
“nationalTeam”: false
},
“playerCareerCompetitionStats”: [
{
“competitionEdition”: {
“id”: 0,
“name”: “Total”,
“totalNumberOfRounds”: 0
},
“generalCareer”: {
“nrOfPlayedMatches”: 48,
“inStartingLineup”: 48,
“substitutionsIn”: 0,
“substitutionsOut”: 12,
“nrOfPlayedMinutes”: 4262,
“goals”: 6,
“assists”: 6,
“yellowCards”: 7,
“redCards”: 1
}
},
{
“competitionEdition”: {
“id”: 1017,
“name”: “2020/2021”,
“competition”: {
“id”: 15,
“name”: “UEFA Champions League”
},
“totalNumberOfRounds”: 0,
“competitionPhases”: []
},
“generalCareer”: {
“nrOfPlayedMatches”: 6,
“inStartingLineup”: 6,
“substitutionsIn”: 0,
“substitutionsOut”: 0,
“nrOfPlayedMinutes”: 564,
“goals”: 1,
“assists”: 0,
“yellowCards”: 2,
“redCards”: 1
}
},
{
“competitionEdition”: {
“id”: 1018,
“name”: “2020/2021”,
“competition”: {
“id”: 28,
“name”: “Europa League”
},
“totalNumberOfRounds”: 0,
“competitionPhases”: []
},
“generalCareer”: {
“nrOfPlayedMatches”: 5,
“inStartingLineup”: 5,
“substitutionsIn”: 0,
“substitutionsOut”: 1,
“nrOfPlayedMinutes”: 475,
“goals”: 0,
“assists”: 1,
“yellowCards”: 0,
“redCards”: 0
}
},
{
“competitionEdition”: {
“id”: 926,
“name”: “2020/2021”,
“competition”: {
“id”: 42,
“name”: “Friendly Matches”
},
“totalNumberOfRounds”: 0,
“competitionPhases”: []
},
“generalCareer”: {
“nrOfPlayedMatches”: 4,
“inStartingLineup”: 4,
“substitutionsIn”: 0,
“substitutionsOut”: 2,
“nrOfPlayedMinutes”: 282,
“goals”: 1,
“assists”: 0,
“yellowCards”: 0,
“redCards”: 0
}
},
{
“competitionEdition”: {
“id”: 1005,
“name”: “2020/2021”,
“competition”: {
“id”: 62,
“name”: “Netherlands Eredivisie”
},
“totalNumberOfRounds”: 0,
“competitionPhases”: []
},
“generalCareer”: {
“nrOfPlayedMatches”: 29,
“inStartingLineup”: 29,
“substitutionsIn”: 0,
“substitutionsOut”: 8,
“nrOfPlayedMinutes”: 2565,
“goals”: 3,
“assists”: 5,
“yellowCards”: 3,
“redCards”: 0
}
},
{
“competitionEdition”: {
“id”: 1056,
“name”: “2020/2021”,
“competition”: {
“id”: 67,
“name”: “Netherlands KNVB Beker Cup”
},
“totalNumberOfRounds”: 0,
“competitionPhases”: []
},
“generalCareer”: {
“nrOfPlayedMatches”: 4,
“inStartingLineup”: 4,
“substitutionsIn”: 0,
“substitutionsOut”: 1,
“nrOfPlayedMinutes”: 376,
“goals”: 1,
“assists”: 0,
“yellowCards”: 2,
“redCards”: 0
}
}
]
},
{
“selectionEdition”: {
“id”: 12723,
“name”: ” WCQ2022″,
“displayName”: “Netherlands”,
“abbreviation”: “NED”,
“selectionId”: 5,
“nationalTeam”: true
},
“playerCareerCompetitionStats”: [
{
“competitionEdition”: {
“id”: 0,
“name”: “Total”,
“totalNumberOfRounds”: 0
},
“generalCareer”: {
“nrOfPlayedMatches”: 3,
“inStartingLineup”: 0,
“substitutionsIn”: 3,
“substitutionsOut”: 0,
“nrOfPlayedMinutes”: 79,
“goals”: 0,
“assists”: 0,
“yellowCards”: 1,
“redCards”: 0
}
},
{
“competitionEdition”: {
“id”: 1112,
“name”: “2022”,
“competition”: {
“id”: 35,
“name”: “World Cup Qualifiers Europe”
},
“totalNumberOfRounds”: 0,
“competitionPhases”: []
},
“generalCareer”: {
“nrOfPlayedMatches”: 3,
“inStartingLineup”: 0,
“substitutionsIn”: 3,
“substitutionsOut”: 0,
“nrOfPlayedMinutes”: 79,
“goals”: 0,
“assists”: 0,
“yellowCards”: 1,
“redCards”: 0
}
}
]
}
]

}

[Indranil]

@akshaywani100,

To create chart from JSON data you need to loop through the JSON source and parse it to the format accepted by CanvasJS as shown in the code snippet below –

$.getJSON("https://api.npoint.io/15a2e36f801cc544c90b", function(data) {  
  $.each(data, function(key, value){
    dataPoints.push({x: data[key].x, y: parseInt(data[key].y)});
  });
  chart.render();
});

Please take a look at this documentation page for step to step instruction on rendering chart from JSON data. Also, kindly check this StackBlitz example for complete code on rendering chart from JSON data in Angular.

___________
Indranil Deo
Team CanvasJS