JSFiddle - React, Tailwind, and code Playground

by halirgb

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 json = '[{"error":0,"reports":{"AbboARHCC-228":{"4":{"participants":null,"volunteer":9},"5":{"participants":null,"volunteer":9},"6":{"participants":null,"volunteer":9}},"RimoACEQ-92":{"4":{"participants":null,"volunteer":12},"5":{"participants":null,"volunteer":6},"6":{"participants":null,"volunteer":6}}}}]';

var jsonp = $.parseJSON(json);


$('#filter').click(function(){
    var selected = $( "#select option:selected" ).val();
    if(selected == 1){
        var siteCodes = [];
        var lastYearMonth = [];
        var thisYearMonth = [];
        $.each( jsonp[0].reports, function( reportName, report ) {
            siteCodes.push(reportName);
            lastYearMonth.push(report.volunteers.month);
            thisYearMonth.push(report.volunteers.prev_year_month);
            
            console.log("code " + siteCodes);
            console.log("this year month " + thisYearMonth);
            console.log("last year month " + lastYearMonth);
            
            options.series[0].data = lastYearMonth; //2013
            options.series[1].data = thisYearMonth; //2014
            chart = new Highcharts.Chart(options);
        });
    }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!');
    }
})

var options = {
        chart: {
           renderTo: 'container',
           type: 'line',
        },
        title: {
        },
        xAxis: {
      ...