AmCharts(v3) 라이브러리와 jQuery Ajax를 연동하여 동적으로 차트(학력·연령·업종·기업 데이터 등)를 생성하는 예제 코드입니다. 데이터 개수에 따라 차트 높이를 동적으로 조절하는 로직이 포함되어 있습니다.
1. AmCharts 동적 바 차트(Bar Chart) 랜더링
function draw_half_chart(){
$.ajax({
type: 'post',
url: '<?=site_url("usr/Calc/get_halfcharts")?>',
data: {
date_from: $('#date_from').val(),
date_to: $('#date_to').val()
},
beforeSend: function() {
showLoadingProgress();
},
success: function(data) {
hideLoadingProgress();
var charts_data = JSON.parse(data);
// 1. 학력별 차트 (School Chart)
$("#div_school_chart_half").html('' +
'<div class="col-md-12 charts_half" style="background: #eff2d9">' +
'<div class="charts_half" id="school_chart_half"></div>\n' +
'</div>');
var chart_height = charts_data['school_halfcharts_data'].length * 50;
if(chart_height < 100) chart_height = 250;
$('#school_chart_half').attr("style", "height:" + chart_height + "px");
$(function() {
AmCharts.makeChart("school_chart_half", {
"type": "serial",
"theme": "light",
"dataProvider": charts_data['school_halfcharts_data'],
"startDuration": 1,
"graphs": [{
"balloonText": "<span style='font-size:13px;'>[[gender]]: <b>[[value]] 명</b></span>",
"title": "",
"type": "column",
"fillAlphas": 0.8,
"valueField": "value",
"colorField": "color"
}],
"rotate": true,
"categoryField": "gender",
"categoryAxis": {
"gridPosition": "start"
}
});
});
// 2. 연령별 차트 (Age Chart)
$("#div_age_chart_half").html('' +
'<div class="col-md-12 charts_half" style="background: #eff2d9">' +
'<div id="age_chart_half"></div>\n' +
'</div>');
chart_height = charts_data['age_halfcharts_data'].length * 50;
if(chart_height < 100) chart_height = 250;
$('#age_chart_half').attr("style", "height:" + chart_height + "px");
$(function() {
AmCharts.makeChart("age_chart_half", {
"type": "serial",
"theme": "light",
"dataProvider": charts_data['age_halfcharts_data'],
"startDuration": 1,
"graphs": [{
"balloonText": "<span style='font-size:13px;'>[[gender]]: <b>[[value]] 명</b></span>",
"title": "",
"type": "column",
"fillAlphas": 0.8,
"valueField": "value",
"colorField": "color"
}],
"rotate": true,
"categoryField": "gender",
"categoryAxis": {
"gridPosition": "start"
}
});
});
// 3. 업종별 차트 (Industry Chart)
$("#div_industry_chart_half").html('' +
'<div class="col-md-12 charts_half" style="background: #eff2d9">' +
'<div id="industry_chart_half"></div>\n' +
'</div>');
chart_height = charts_data['industry_halfcharts_data'].length * 50;
if(chart_height < 100) chart_height = 250;
$('#industry_chart_half').attr("style", "height:" + chart_height + "px");
$(function() {
AmCharts.makeChart("industry_chart_half", {
"type": "serial",
"theme": "light",
"dataProvider": charts_data['industry_halfcharts_data'],
"startDuration": 1,
"graphs": [{
"balloonText": "<span style='font-size:13px;'>[[gender]]: <b>[[value]] 명</b></span>",
"title": "",
"type": "column",
"fillAlphas": 0.8,
"valueField": "value",
"colorField": "color"
}],
"rotate": true,
"categoryField": "gender",
"categoryAxis": {
"gridPosition": "start"
}
});
});
// 4. 기업별 차트 (Enterprise Chart)
$("#div_enterprise_chart_half").html('' +
'<div class="col-md-12 charts_half" style="background: #eff2d9">' +
'<div id="enterprise_chart_half"></div>\n' +
'</div>');
chart_height = charts_data['enterprise_halfcharts_data'] ? charts_data['enterprise_halfcharts_data'].length * 50 : 250;
if(chart_height < 100) chart_height = 250;
$('#enterprise_chart_half').attr("style", "height:" + chart_height + "px");
$(function() {
AmCharts.makeChart("enterprise_chart_half", {
"type": "serial",
"theme": "light",
"dataProvider": charts_data['enterprise_halfcharts_data'],
"startDuration": 1,
"graphs": [{
"balloonText": "<span style='font-size:13px;'>[[gender]]: <b>[[value]] 명</b></span>",
"title": "",
"type": "column",
"fillAlphas": 0.8,
"valueField": "value",
"colorField": "color"
}],
"rotate": true,
"categoryField": "gender",
"categoryAxis": {
"gridPosition": "start"
}
});
});
}
});
}