You must be logged in to post your query.
Home › Forums › Chart Support › Need help in creating BAR CHART in angular
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 } } ] } ]
}
@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
You must be logged in to reply to this topic. Login/Register