oTree Forum >

updating my chart based on choice on slider

#1 by AJafarzadeh

I want to make a column chart in which series (variables in the charts) dynamically change. I have a slider in the my page, once the participant changes slider, I want my chart changes accordingly. But, I do not know how to define series (( series: [{data: [?] )) in a way that once the participant changes slider (taking_offer_1), the chart data will be updated! Could you please help me know how to fill the question mark to update my chart? 


my slider and chart in HTML is: 
  <input type="range" name="taking_offer_2" value="0"  min="0" max="{{player.slider_max2}}" step="1" style="flex: 1" class="flex-fill flex-row" onchange="updateDescriptiontaking2(this)">


<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

  
 Java for updating slider and my chart
 <script>
 let descriptiontaking1 = document.getElementById('descriptiontaking1');
    function updateDescriptiontaking1(input) {
        let taking_offer_1 = parseInt(input.value) ;
        descriptiontaking1.innerText = `You take ${taking_offer_1} points.`
        liveSend({'taking_offer_1': taking_offer_1.value});
    }
    
    
    Highcharts.chart('container', {
    chart: {
        type: 'column'
    },

    xAxis: {
        categories: [
            'You',
          ],
        crosshair: true
    },
    yAxis: {
        title: {
            useHTML: true,
            text: 'Tokens'
        }
   
    },
    series: [{
        data: [?]

    }]
});

</script>

#2 by Chris_oTree

Highcharts has a function called setData to update a chart:

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/series-setdata/

Another option is to redraw the whole chart on each update, which I did in the app 'continuous_time_slider' in the featured apps: https://www.otreehub.com/projects/?featured=1

#3 by AJafarzadeh

Thank you so much Chris. My problem is that I want to pass the value of taking_offer_1 to my chart. In the both links, data are numbers, not variables. How should I define a variable that can pass the value of taking_offer_1 to my setData?

#4 by Chris_oTree

You already have that in your code, in updateDescriptiontaking1.

#5 by Chris_oTree

I mean, use the same technique you already use, get the .value attribute of that input.

#6 by AJafarzadeh

Thank you Chris!

Write a reply

Set forum username