Separate data of same array key and use it in same combo chart axis

See more:

Javascript

Ajax

JSON

API

chart

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:

//Ajax Block
    const xmlhttp = new XMLHttpRequest(); //exchange data with a web server
    const url ='http://localhost/tmsignage_web/faceanalysis1.json';

    //send a request to a server
    xmlhttp.open('GET',url,true);
    xmlhttp.send();

    xmlhttp.onreadystatechange = function(){
        if(this.readyState ==4 && this.status == 200){ //is ready and connection is success
            
            const datapoints=JSON.parse(this.responseText); //parse:make data becomes readable in JavaScript 
            //console.log(datapoints);
            
            const  labelDate=datapoints.ThisMonthData.Date.map( //map:loop through every item in array
                function(elem){
                    return elem.Date;
            });

            const NumberPerson=datapoints.ThisMonthData.NumberOfPerson.map( //map:loop through every item in array
                function(elem){
                    return elem.NumberOfPerson;
            });

            const signageID=datapoints.ThisMonthData.signage_id.map( //map:loop through every item in array
                function(elem){
                    return elem.signage_id;
            });