Changing Charts

<div class="input-group input-group-lg">
<label for="cts" class="sr-only"><i class='fa fa-signal'></i> Chart Type</label>
<span class="input-group-addon sr-hidden"><i class='fa fa-signal'></i> Chart Type</span>
<select id="cts" class="form-control" >
<option value="bar">Bar</option>
<option value="hbar">Horizontal Bar</option>
<option value="pie">Pie</option>
<option value="bar3d">3D Bar</option>
<option value="hbar3d">3D Horizontal Bar</option>
</select>
</div>
<hr>
<div id="countrychart"></div>

<script>

//initial load
zingchart.render({
dataurl: '#application.demoroot#/_pods/charts/bar/countrychartData.cfm',
width: '100%',
height: 450,
output:"svg",
container: 'countrychart'
});

//on change

$("##cts").change(function(){
var data = $(this).val();
zingchart.render({
dataurl: '#application.demoroot#/_pods/charts/bar/countrychartData.cfm?ct='+data,
width: '100%',
height: 550,
output:"svg",
container: 'countrychart'
});
});
</script>