JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<button id="filter">filter</button>
<div id="container"></div>

JavaScript

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}}}}';


$('#filter').click(function(){
    var jsonp = $.parseJSON(json);
    var siteCodes = [];
    var months = [];
    var volunteers = [];
    $.each( jsonp.reports, function( sitecode, reportGroup ) {
          //console.log(sitecode);
          siteCodes.push(sitecode);
          //var count = $(report).lenght();
           $.each( reportGroup, function( month, value ) {
               //console.log("month:" + month);
               //console.log("volunteers:" + value.volunteer);
               months.push(month);
               volunteers.push(value.volunteer);
           });
    });
    
    options.xAxis.categories = siteCodes;
    options.series[0].data = volunteers;
    options.series[0].data = volunteers;
    chart = new Highcharts.Chart(options);
});

// 12-2 = 10

var options = {
        chart: {
           renderTo: 'container',
           type: 'bar',
        },
        title: {
        },
        xAxis: {
            categories: ["crap","crap"]
        },
        yAxis: {
        },
        series: [{
            name: 'jan',
            data: [2,6,9]
       },{
            name: 'feb',
            data: [6,4,1]
       }]
     };

// { name: 'month', data:[1,2,3] }


//series: [{
           // data: [{
                //name: 'Point 1',
               // color: '#00FF00',
              //  y: 1
             //}, {
               //name: 'Point 2',
              //  color: '#FF00FF',
             //    y: 5
            //  }]
           //}]