CODEWITHSUNDEEP
javascriptjqueryhtmlhighcharts
Cordycepin
Cordycepin

Reputation: 3

Dynamic Input to Highcharts via HTML input field?

I would like to create a line graph with HighCharts that is able to update with new points via submission through an HTML input field. Any thoughts on how this can be accomplished?

I'm modifying an example given by Highcharts found here: http://jsfiddle.net/tcL5ny2f/2/

Would something like this work with the input field?

<input id="newPoint" type="text">

var i = 0;
    $('#button').click(function () {
        var chart = $('#container').highcharts();
        chart.series[0].addPoint(50 * (i % 3));
        i += 1;
    });

Upvotes: 0

Views: 1472

Answers (1)

tic
tic

Reputation: 2512

Use this instead

http://jsfiddle.net/tic84/tcL5ny2f/5/

$(function () {
    $('#container').highcharts({

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]

    });

    // the button action
    $('#button').click(function () {
        var point = parseInt($('#newPoint').val(), 10);
        var chart = $('#container').highcharts();
        chart.series[0].addPoint(point);
    });
});

You missed the # in the selector and need to parse the text into a number

Upvotes: 2

Related Questions