TradingPal / react-native-highcharts

📈 Add Highcharts charts to react-native app for IOS and Android
https://github.com/TradingPal/react-native-highcharts
256 stars 158 forks source link

Chart animates in browser, but no in react-native? #72

Open bitabs opened 6 years ago

bitabs commented 6 years ago

I've got this code snippet which animates perfectly in jsfiddle But when I try to use the same code inside my conf, it doesn't animate, and just shows the first few points.

I've opted the main code in here for now for this question sake. But the main code is this:

    let defaultConf = {
      chart: {
        type: 'spline',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
          load: function () {
            var testing = (function() {
              var _x = -1;
              var _max = _data2.length;

              return function() {
                _x = (_x + 1) % _max;

                return {
                  x: Date.now(),
                  y: _data2[_x]
                };
              };
            })();

            // set up the updating of the chart each second
            var series = this.series[0];
            setInterval(function() {
              series.addPoint([testing().x, testing().y], true, true, false);
              //series.setData(_data, true)
            }, 30);
          }
        }
      },
      exporting: {
        enabled: false
      },
      series: [{
        name: 'Random data',
        pointStart: Date.now()-30*100,
        pointInterval: 30,
        data: (function() {
          var data = [];
          data = _data;
          return data;
        }())
      }]
    };

    return(
      <View>
        <ChartView
          style={{height:200, width: 400}}
          config={defaultConf}
          options={options}
        />
      </View>
    )

See the jsfiddle. As you can see, it works in browser but not in phone. Why is that?

Update

It seems it stops animation when this line is added:

            var testing = (function() {
              var _x = -1;
              var _max = _data2.length;

              return function() {
                _x = (_x + 1) % _max;

                return {
                  x: Date.now(),
                  y: _data2[_x]
                };
              };
            })();

Any ideas?

bitabs commented 6 years ago

@Infinity0106 Could you please assist me on this. I see one of my issues is something never asked before.