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