econnomnomnom
Posts: 9
Joined: Fri Oct 08, 2021 7:17 am

Update a chart based on user input from a slider

Hello all,

Fair warning - I am very, very new to javascript and really need some help.

I am trying to build an experiment in oTree. My end goal is to reveal two timeseries using a chart to a subject and then have the subject forecast the next value of one of the two timeseries. I would like for the subject to produce a forecast using a slider and for whatever value the subject selects with the slider to show on the chart in real-time. I've built the chart and added the slider. However, I can't quite figure out how to get the value the subject selects with the slider to appear on the chart.


My code is here: https://jsfiddle.net/8rk35ayh/

(an aside - this code runs in oTree but does not work in the jsfiddle for some reason - I tried fixing this but gave up after about thirty minutes. I am assuming anyone with any modicum of experience will recognize the issue quite quickly. )
econnomnomnom
Posts: 9
Joined: Fri Oct 08, 2021 7:17 am

Re: Update a chart based on user input from a slider

I found the solution. There relevant bit of code is:

Code: Select all

    let description = document.getElementById('description');
    function updateDescription(input) {
        let forecast = parseInt(input.value)/100;
        description.innerText = `Your forecast is ${forecast} percent.`
        myChart.series[2].data[10].update({x:10, y:forecast});
    }
 
Couple this with the appropriate HTML code for producing the slider that sets id='description' and you're golden.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Update a chart based on user input from a slider

Welcome to our forum!

Congratulations on finding the solution to your problem and thanks for sharing it with us! :)

In case of any further questions, feel free to contact us again.
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Usage”