Click here to Skip to main content
15,399,959 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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;
            });
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900