I have a service call on componentDidMount. Up on getting the data, I am trying to set my state which holds highchart information.
Here I am able to get the render on set state. But data is not updating on chart. Am I setting it wrongly or what. Please suggest. If I debug I can able to see the changed data on render method. But highchart is not updating
I have a service call on componentDidMount. Up on getting the data, I am trying to set my state which holds highchart information.
Code is below.
import React, { Component } from "react";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import plugin from "../../../../resources/js/motion";
import * as Services from '../../services/dashboardservices';
import ProcessData from './bubbleChartMethods';
render() {
return (
<HighchartsReact
highcharts={Highcharts}
options={this.state.options}
/>
);
}
}
Here I am able to get the render on set state. But data is not updating on chart. Am I setting it wrongly or what. Please suggest. If I debug I can able to see the changed data on render method. But highchart is not updating
But it wont work sequence of data which motion video needs
Please find below class code
import React, { Component } from "react";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import plugin from "../../../../resources/js/motion";
import * as Services from '../../services/dashboardservices';
import ProcessData from './bubbleChartMethods';
https://stackoverflow.com/questions/53388350/highchart-is-not-updating-after-setstate-bubble-motion?noredirect=1#comment93827128_53388350
I have a service call on componentDidMount. Up on getting the data, I am trying to set my state which holds highchart information.
Here I am able to get the render on set state. But data is not updating on chart. Am I setting it wrongly or what. Please suggest. If I debug I can able to see the changed data on render method. But highchart is not updating
I have a service call on componentDidMount. Up on getting the data, I am trying to set my state which holds highchart information.
Code is below.
import React, { Component } from "react"; // Import Highcharts import Highcharts from "highcharts/highstock"; import HighchartsReact from "highcharts-react-official"; import plugin from "../../../../resources/js/motion";
import * as Services from '../../services/dashboardservices'; import ProcessData from './bubbleChartMethods';
require("highcharts/modules/map")(Highcharts);
class LineContainer extends Component {
style = { fontFamily: "'univers', Arial, sans-serif", fontSize: 14, color: "#333333" };
state = { options: { chart: { height: 380, type: 'bubble', plotBorderWidth: 1, zoomType: 'xy', resetZoomButton: { theme: { states: { hover: { fill: '#D98C14', stroke: '#BF7400', } } } } }, credits: { enabled: false },
} // Render app with demo chart
componentDidMount() { Services.getLoadAndUnbalanceData().then(res => { const renderObj = ProcessData(res); this.setState({ options: { ...this.state.options, motion: { ...this.state.options.motion, labels: renderObj.timestamp }, series: [{ ...this.state.options.series[0], data: renderObj.series }],
}
render() { return ( <HighchartsReact highcharts={Highcharts} options={this.state.options} /> ); } } Here I am able to get the render on set state. But data is not updating on chart. Am I setting it wrongly or what. Please suggest. If I debug I can able to see the changed data on render method. But highchart is not updating
Data I am getting like below
If I use normal data just like below it will work
But it wont work sequence of data which motion video needs
Please find below class code
// Import Highcharts import Highcharts from "highcharts/highstock"; import HighchartsReact from "highcharts-react-official"; import plugin from "../../../../resources/js/motion";
import * as Services from '../../services/dashboardservices'; import ProcessData from './bubbleChartMethods';
require("highcharts/modules/map")(Highcharts);
class LineContainer extends Component {
style = { fontFamily: "'univers', Arial, sans-serif", fontSize: 14, color: "#333333" };
state = { options: { chart: { height: 380, type: 'bubble', plotBorderWidth: 1, zoomType: 'xy', resetZoomButton: { theme: { states: { hover: { fill: '#D98C14', stroke: '#BF7400', } } } } }, credits: { enabled: false },
} // Render app with demo chart
componentDidMount() { Services.getLoadAndUnbalanceData().then(res => { const renderObj = ProcessData(res); this.setState({ options: { ...this.state.options, motion: { ...this.state.options.motion, labels: renderObj.timestamp }, series: [{ ...this.state.options.series[0], data: renderObj.series }],
}
render() { return ( <HighchartsReact highcharts={Highcharts} options={this.state.options} /> ); } }