#1 by ksrini
Hello
I would like to create a highchart based on some default value, but which changes based on the option selected in a dropdown formfield. I can't seem to find the error in my code. The graph is not produced. I'm using oTree version 5.4.0.
{{formfield 'tax_1'}}
<figure class="highcharts-figure">
<div id="change"></div>
<p class="highcharts-description">
</p>
</figure>
<script>
$('select').on('change', function (e) {
var optionSelected = $("option:selected", this);
var c_tax_1 = this.value;
$("id_tax_1").change(redrawChart(c_tax_1))
});
<script>
function redrawChart(c_tax_1) {
Highcharts.chart('current', {
chart: {
type: 'column',
height: 400,
width: 600,
},
title: {
text: 'Current Income Distribution'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Taxes Paid (thousands of dollars)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Population in 2021: <b>{point.y:.1f} millions</b>'
},
series: [{
name: 'Population',
data: [
['$7,000', c_tax_1],
['$35,000', 3],
['$70,000', 12],
['$100,000', 22],
['$170,000', 28],
['$250,000', 34],
['$500,000', 34]
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
}
</script>