load json

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://gopeter.de/misc/c3/c3.js"></script>
<link rel="stylesheet" href="http://gopeter.de/misc/c3/c3.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<select id="SelectPeriod" >
<option value="3">Last 3 months</option>
<option value="6">Last 6 months</option>
<option value="9">Last 9 months</option>
<option value="12">Last 12 months</option>
</select>

<div id="chart"></div>

JavaScript

var calculation = [["Actual value","Targeted value"]],
result = [[100, 190],[115,190],[250, 190],[23,190],[190, 190],[170,190],[100, 190],[115,190],[250, 190],[23,190],[190, 190],[170,190],[100, 190],[115,190],[250, 190],[23,190],[190, 190],[170,190],[100, 190],[115,190],[250, 190],[23,190],[190, 190],[170,190]];	

calculation = calculation.concat(result.sort(function (a, b) {  }));
var chart = c3.generate({
bindto: '#chart',
data: {
rows: calculation.slice(0, 3 + 1),
type: 'bar',
}
});

$("#SelectPeriod").change(function (evt) {
var chartSelection = $("#SelectPeriod").val();
var chart = c3.generate({
data: {
rows: calculation.slice(0, parseInt(chartSelection) + 1),
    type:'bar'
}
});
});