Solution 1 :

You need to pass y values to the addPoint method as numbers not as strings.

var y = parseFloat(msg.number);

Live demo:

Problem :

        var myChart = Highcharts.chart('containerX', {

        chart: {
          type: 'spline',
          animation: Highcharts.svg, // don't animate in old IE
          marginRight: 10,
          events: {
              load: function () {

                  var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
                  var series = this.series[0]

                  var numbers_received = []
                  socket.on('newnumber', function(msg) {

                        var x = (new Date()).getTime() // current time
                        var y = msg.number

                        series.addPoint([x, y], true, true);

The x-axis of Highchart is moving on my HTML page based on the (new Date()).getTime(), and the y-axis is scaling based on the value received from flask-socketio, but nothing is displayed on the chart.

ps: The value received is changing every seconds.

Also I can see the value msg.number showing on the terminal.

Can anyone help? I am new to highcharts and flask-socketio. Thanks.


Comment posted by

Hi @Berlin Bolin, Do you have any start data?

Comment posted by Berlin Bolin

@ppotaczek Hi. What do you mean for start data? I have data dynamically updated from socketio, and I can receive them from “msg.number” and the data is able to show on the HTML page as “text”, but nothing is on the HighCharts

Comment posted by

I mean initial data. You have set

Comment posted by Berlin Bolin

@ppotaczek Hi, Thanks for your reply. Yes, I have start data. But it still does not work. The Chart is shifting and the Y-value is scaling based on my

Comment posted by ppotaczek

Please try to use: