oTree Forum >

Highchart based on dropdown input

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

Write a reply

Set forum username