#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>