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