I'm learning to create combo bar(double bar) chart using JSON data API and AJAX. For my y-axis, I plan to use NumberOfPerson of each signage_id(1001 and 1002) in each date , x-axis will be date. I will only use ThisMonthData in JSON file to create chart.
Is there any hints that I can try if I want to separate data in signage_id into 2 chart bars and return their NumberOfPerson in each day?
This is my JSON data:
{"ThisMonthData":[
{"signage_id":1001,"NumberOfPerson":4,"Date":"2021-November-1st"},
{"signage_id":1002,"NumberOfPerson":7,"Date":"2021-November-2nd"},
{"signage_id":1001,"NumberOfPerson":43,"Date":"2021-November-2nd"},
{"signage_id":1002,"NumberOfPerson":1,"Date":"2021-November-3rd"},
{"signage_id":1002,"NumberOfPerson":2,"Date":"2021-November-4th"},
{"signage_id":1001,"NumberOfPerson":105,"Date":"2021-November-9th"},
{"signage_id":1002,"NumberOfPerson":31,"Date":"2021-November-9th"},
{"signage_id":1001,"NumberOfPerson":72,"Date":"2021-November-10th"},
{"signage_id":1001,"NumberOfPerson":151,"Date":"2021-November-11th"}],
"LastMonthData":[{
"signage_id":1000,"NumberOfPerson":7,"Date":"2021-September-2nd"},
{"signage_id":1000,"NumberOfPerson":40,"Date":"2021-September-5th"},
{"signage_id":1000,"NumberOfPerson":26,"Date":"2021-September-6th"},
{"signage_id":1000,"NumberOfPerson":16,"Date":"2021-September-8th"},
{"signage_id":1000,"NumberOfPerson":16,"Date":"2021-September-12th"},
{"signage_id":1000,"NumberOfPerson":156,"Date":"2021-September-13th"},
{"signage_id":1003,"NumberOfPerson":66,"Date":"2021-September-13th"},
{"signage_id":1003,"NumberOfPerson":77,"Date":"2021-September-14th"},
{"signage_id":1003,"NumberOfPerson":4,"Date":"2021-September-16th"},
{"signage_id":1003,"NumberOfPerson":19,"Date":"2021-September-17th"},
{"signage_id":1003,"NumberOfPerson":5,"Date":"2021-September-19th"},
{"signage_id":1001,"NumberOfPerson":15,"Date":"2021-September-27th"},
{"signage_id":1001,"NumberOfPerson":10,"Date":"2021-September-29th"}],
"success":true,"message":""}
What I have tried:
This is part of codes that I tried before, but it does not work:
const xmlhttp = new XMLHttpRequest();
const url ='http://localhost/tmsignage_web/faceanalysis1.json';
xmlhttp.open('GET',url,true);
xmlhttp.send();
xmlhttp.onreadystatechange = function(){
if(this.readyState ==4 && this.status == 200){
const datapoints=JSON.parse(this.responseText);
const labelDate=datapoints.ThisMonthData.Date.map(
function(elem){
return elem.Date;
});
const NumberPerson=datapoints.ThisMonthData.NumberOfPerson.map(
function(elem){
return elem.NumberOfPerson;
});
const signageID=datapoints.ThisMonthData.signage_id.map(
function(elem){
return elem.signage_id;
});