JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<select id="select">
    <option value="0">Select something</option>
    <option value="1">Volunteers</option>
    <option value="2">Participants</option>
</select>
<button id="filter" >filter</button>
<div class="list"></div>

<div id="container"></div>

JavaScript

var json = '[{"error":0,"reports":{"AbboARHCC-228":{"volunteers":{"month":9,"prev_year_month":0},"participants":{"month":0,"prev_year_month":0}},"RimoACEQ-92":{"volunteers":{"month":6,"prev_year_month":0},"participants":{"month":0,"prev_year_month":0}}}}]';

var jsonp = $.parseJSON(json);


$('#filter').click(function(){
    var selected = $( "#select option:selected" ).val();
    if(selected == 1){
        $.each( jsonp[0].reports, function( reportName, report ) {
            var siteCodes = [];
            siteCodes.push(reportName);
            var lastYearMonth = [];
            lastYearMonth.push(report.volunteers.month);
            var thisYearMonth = [];
            thisYearMonth.push(report.volunteers.prev_year_month);
            
            console.log("code " + siteCodes);
            console.log("this year month " + thisYearMonth);
            console.log("last year month " + lastYearMonth);
            charts(siteCodes)
        });
    }else if(selected == 2){
        $.each( jsonp[0].reports, function( reportName, report ) {
            console.log( 
                reportName , 
                " - Participants: this year month - " , 
                report.participants.month , 
                "last year month:",
                report.participants.prev_year_month
            );
        });
    }else{
        alert('select something!');
    }
})

function charts(siteCodes){
            $('#container').highcharts({
                chart: {
                    type: 'bar'
                },
                title: {
                    text: 'Fruit Consumption'
                },
                xAxis: {
                    categories: ['Site code1', 'Site code2', 'Site code2']
                },
                yAxis: {
                    title: {
                        text: 'Fruit eaten'
                    }
                },
                series: [{
                    name: 'Jane',
                    data: siteCodes
                },...