<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js" /></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js" /></script>
<script type="text/javascript">
	function getChartData() {
	    $.ajax({
	        url: 'https://open.assembly.go.kr/portal/openapi/ncocpgfiaoituanbr?AGE=21&BILL_NO=2106221&Type=json',
	        type: 'GET',
	        dataType: 'json',
	        success: function (result) {
	            drawBarChart(result);
	        },
	        error: function (result) {}
	    });
	}

	function drawBarChart(jsonData) {
	    var data = jsonData.ncocpgfiaoituanbr[1].row;
	
	    $('#barChart').highcharts({
	        credits: {enabled: false},
	        chart:  {type: 'column'},
	        title:  {text: data[0].BILL_NAME},
	        legend: {enabled: false},
	        xAxis:  {type: 'category'},
	        yAxis: {
	            title: {
	                text: ""
	            }
	
	        },
	        series: [{
	            name: "",
	            colorByPoint: true,
	            data: [{name: "찬성", y: data[0].YES_TCNT},
	                   {name: "반대", y: data[0].NO_TCNT},
	                   {name: "기권", y: data[0].BLANK_TCNT}
	                  ]
	               }]
	    });
	
	}
</script>

<div id="barChart" style="min-width:300px;height:400px;margin:0 auto;"></div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js" /></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js" /></script>
<script type="text/javascript">
	function getChartData() {
	    $.ajax({
	        url: 'https://open.assembly.go.kr/portal/openapi/ncocpgfiaoituanbr?AGE=21&BILL_NO=2106221&Type=json',
	        type: 'GET',
	        dataType: 'json',
	        success: function (result) {
	            drawPieChart(result);
	        },
	        error: function (result) {}
	    });
	}

	function drawPieChart(jsonData) {
	    var data = jsonData.ncocpgfiaoituanbr[1].row;
	
	    $('#pieChart').highcharts({
	        credits: {
	            enabled: false
	        },
	        chart: {
	            plotBackgroundColor: null,
	            plotBorderWidth: null,
	            plotShadow: false,
	            type: 'pie'
	        },
	        title: {
	            text: data[0].BILL_NAME
	        },
	        tooltip: {
	            pointFormat: '{series.name}: {point.percentage:.0f}%'
	        },
	        plotOptions: {
	            pie: {
	                allowPointSelect: true,
	                cursor: 'pointer',
	                dataLabels: {
	                    enabled: false
	                },
	                showInLegend: true
	            }
	        },
	        series: [{
	            name: '',
	            colorByPoint: true,
	            data: [{
	                name: '찬성',
	                y: data[0].YES_TCNT
	            }, {
	                name: '반대',
	                y: data[0].NO_TCNT
	            }, {
	                name: '기권',
	                y: data[0].BLANK_TCNT
	            }]
	        }]
	    });
	}
</script>

<div id="pieChart" style="min-width:300px;height:400px;margin:0 auto;"></div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript">
	function getChartData() {
	    $.ajax({
	        url: 'https://open.assembly.go.kr/portal/openapi/ncocpgfiaoituanbr?AGE=21&BILL_NO=2106221&Type=json',
	        type: 'GET',
	        dataType: 'json',
	        success: function (result) {
	            drawGrid(result);
	        },
	        error: function (result) {}
	    });
	}

	function drawGrid(jsonData) {
	    var data = jsonData.ncocpgfiaoituanbr[1].row;
	    if (data) {
	        var html = '';
	        $.each(data, function (i, data) {
	
	            html += '';
	            html += '	' + data.YES_TCNT + '';
	            html += '	' + data.NO_TCNT + '';
	            html += '	' + data.BLANK_TCNT + '';
	            html += '';
	
	        });
	        $('#grid').append(html);
	    }
	}
</script>

<table>
	<colgroup>
		<col width="">
	</colgroup>
	<thead>
		<tr>
			<th col="row">찬성</th>
			<th col="row">반대</th>
			<th col="row">기권</th>
		</tr>
	</thead>
	<tbody id="grid">
	</tbody>
</table>