How do you add dynamic chart data (android)

[wrightmk]

Using the basic example provided in your README docs, I can't quite figure out how to add real life chart data; all I seem to get back is a blank screen. I've console logged the async request from axios and it's returning an object from highcharts, so I know that works. The only change in the render method is data: this.state.data and stock={true}

Here's what I have so far:

import React, {Component} from 'react';
import {View, Text, Platform} from 'react-native';
import ChartView from 'react-native-highcharts';
import axios from 'axios';

export default class StockCharts extends Component {
  constructor(props) {
    super(props);
    this.state = {data: null};
  }

  async componentDidMount() {
    let data = await axios.get('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?')
    this.setState({data: data})
  }

  render() {
      var Highcharts='Highcharts';
      var conf={
              chart: {
                  type: 'spline',
                  animation: Highcharts.svg, // don't animate in old IE
                  marginRight: 10,
                  events: {
                      load: function () {
         
                          // set up the updating of the chart each second
                          var series = this.series[0];
                          setInterval(function () {
                              var x = (new Date()).getTime(), // current time
                                  y = Math.random();
                              series.addPoint([x, y], true, true);
                          }, 1000);
                      }
                  }
              },
              title: {
                  text: 'Live Random Data'
              },
              xAxis: {
                  type: 'datetime',
                  tickPixelInterval: 150
              },
              yAxis: {
                  title: {
                      text: 'Value'
                  },
                  plotLines: [{
                      value: 0,
                      width: 1,
                      color: '#808080'
                  }]
              },
              tooltip: {
                  formatter: function () {
                      return '<b>' + this.series.name + '</b><br/>' +
                          Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                          Highcharts.numberFormat(this.y, 2);
                  }
              },
              legend: {
                  enabled: false
              },
              exporting: {
                  enabled: false
              },
              series: [{
                  name: 'Random data',
                  data: this.state.data

                  // (function () {
                  //     // generate an array of random data
                  //     var data = [],
                  //         time = (new Date()).getTime(),
                  //         i;
                  //
                  //     for (i = -19; i <= 0; i += 1) {
                  //         data.push({
                  //             x: time + i * 1000,
                  //             y: Math.random()
                  //         });
                  //     }
                  //     return data;
                  // }())
              }]
          };
      return (
        <ChartView style={{height:300}} config={conf} stock={true} ></ChartView>
      );
  }
}

[Infinity0106]

I'm not sure if this could solve the problem but try to put a loading state and when you get the data now you render the ChartView. thanks in advance for using the component.

[rsoni0809]

Hi Wrightmk: Thanks for the issue details. I am also stuck in same. I want to load dynamic data in highchart on pinch zoom. But it seems I am not able to access <ChartView> object something like this let chart = new ChartView so that I can add showLoading hideLoading and access series property to update every pinch. Please help if somebody has already faced this kind of challenges.

[deceive3w]

any update to make live chart ?

[sagarp2901]

Even I am trying to load a high chart in react native with some dynamic data and it seems almost impossible. The chart does not re-render when State is updated.