JSFiddle - React, Tailwind, and code Playground

by gricha2380

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<form role="form" class="categories">
              <div class="menu-holder">
                <select class="country">
                  <option>Select Country</option>
                  <option>mike</option>
                </select>
              </div>
            </form>
<div id="chart"></div>

JavaScript

var chart = c3.generate({
    data: {
    url: 'https://gregor.demo.socrata.com/resource/p6s5-cf5g.csv?$select=1984,2015&country_name=Grenada',
        columns: [
//            ['data1', 30, 200, 100, 400, 150, 250],
  //          ['data2', 130, 100, 140, 200, 150, 50]
 
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
        }
        // or
        //width: 100 // this makes bar width 100px
    }
});

/*
setTimeout(function () {
    chart.load({
        columns: [
            ['data3', 130, -150, 200, 300, -200, 100]
        ]
    });
}, 1000);
*/

// country search
d3.select('.categories').selectAll('.country').on('change', function() {
  var x = d3.select('.categories').selectAll('.country').node().value;
  console.log("value is "+x);
  //var ids = x.map(function(category) {
    //return category.id;
  //});
  updateGraphTwo(x);
});


// gregor update function 
function updateGraphTwo(selectedIds) {
console.log("data is still "+selectedIds);
  chart.load({
        columns: [
            [selectedIds, 111, 111, 111, 111, 111, 100]
        ]
    });
    
}