Highchart is not updating after setState (bubble motion)
0
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
},
title: "",
legend: {
enabled: false
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Peak Load (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.05,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
style: this.style,
text: 'Peak Load Threshold',
align: 'center',
verticalAlign: 'middle'
},
zIndex: 3,
value: 30
}],
softMax: 0
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Peak Unbalance (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.1,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
align: 'center',
style: this.style,
text: 'Peak Unbalance Threshold'
},
zIndex: 3,
value: 4
}],
softMax: 0
},
tooltip: {
useHTML: true,
padding: 2,
headerFormat: '<div class="padding-0-10 padding-b-10"><table>',
pointFormat: '<tr><td colspan="2"><h5><strong>{point.name}</strong></h5></td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Load: </td><td>{point.x} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Unbalance: </td><td>{point.y} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Device Count: </td><td>{point.z}</td></tr>',
footerFormat: '</table></div>'
},
plotOptions: {
bubble: {
minSize: 20
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '..',
style: { fontSize: 10, color: 'rgba(67, 67, 72, 0.5)', textOutline: false, fillOpacity: 0.1 },
color: 'rgba(67, 67, 72, 0.5)'
},
cursor: 'pointer',
point: {
events: {
click: function () {
// $rootScope.$broadcast('loadHierarchy', { chartType: 'loadUnbalance', name: this.name });
}
}
}
}
},
motion: {
enabled: true,
axisLabel: 'year',
loop: false,
series: 0, // The series which holds points to update
updateInterval: 100,
magnet: {
round: 'round', // ceil / floor / round
step: 0.1
},
labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
},
series: [{
name: 'Things',
colorByPoint: true,
id: 'deep',
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)']
]
}
},
data:
}]
}
}
// 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
}],
xAxis: {
...this.state.options.xAxis,
softMax: renderObj.xSoftMax,
plotLines: [
{
...this.state.options.xAxis.plotLines[0],
value: renderObj.maxLoadThreshold,
label: {
...this.state.options.xAxis.plotLines[0].label,
text: renderObj.xLabelText
}
}
]
},
yAxis: {
...this.state.options.yAxis,
softMax: renderObj.ySoftMax,
plotLines: [
{
...this.state.options.yAxis.plotLines[0],
value: renderObj.maxUnbalanceThreshold,
label: {
...this.state.options.yAxis.plotLines[0].label,
text: renderObj.yLabelText
}
}
]
}
}
})
})
}
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
[{"sequence":[{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.83,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.5,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":38.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36.92,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":14,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.09,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":0,"y":0,"z":3,"name":"California"}]}]
If I use normal data just like below it will work
[[2, 2], [10, 10]]
But it wont work sequence of data which motion video needs
reactjs highcharts react-highcharts
asked Nov 20 '18 at 7:45
raj mraj m
69721331
|
show 6 more comments
0
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
},
title: "",
legend: {
enabled: false
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Peak Load (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.05,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
style: this.style,
text: 'Peak Load Threshold',
align: 'center',
verticalAlign: 'middle'
},
zIndex: 3,
value: 30
}],
softMax: 0
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Peak Unbalance (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.1,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
align: 'center',
style: this.style,
text: 'Peak Unbalance Threshold'
},
zIndex: 3,
value: 4
}],
softMax: 0
},
tooltip: {
useHTML: true,
padding: 2,
headerFormat: '<div class="padding-0-10 padding-b-10"><table>',
pointFormat: '<tr><td colspan="2"><h5><strong>{point.name}</strong></h5></td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Load: </td><td>{point.x} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Unbalance: </td><td>{point.y} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Device Count: </td><td>{point.z}</td></tr>',
footerFormat: '</table></div>'
},
plotOptions: {
bubble: {
minSize: 20
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '..',
style: { fontSize: 10, color: 'rgba(67, 67, 72, 0.5)', textOutline: false, fillOpacity: 0.1 },
color: 'rgba(67, 67, 72, 0.5)'
},
cursor: 'pointer',
point: {
events: {
click: function () {
// $rootScope.$broadcast('loadHierarchy', { chartType: 'loadUnbalance', name: this.name });
}
}
}
}
},
motion: {
enabled: true,
axisLabel: 'year',
loop: false,
series: 0, // The series which holds points to update
updateInterval: 100,
magnet: {
round: 'round', // ceil / floor / round
step: 0.1
},
labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
},
series: [{
name: 'Things',
colorByPoint: true,
id: 'deep',
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)']
]
}
},
data:
}]
}
}
// 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
}],
xAxis: {
...this.state.options.xAxis,
softMax: renderObj.xSoftMax,
plotLines: [
{
...this.state.options.xAxis.plotLines[0],
value: renderObj.maxLoadThreshold,
label: {
...this.state.options.xAxis.plotLines[0].label,
text: renderObj.xLabelText
}
}
]
},
yAxis: {
...this.state.options.yAxis,
softMax: renderObj.ySoftMax,
plotLines: [
{
...this.state.options.yAxis.plotLines[0],
value: renderObj.maxUnbalanceThreshold,
label: {
...this.state.options.yAxis.plotLines[0].label,
text: renderObj.yLabelText
}
}
]
}
}
})
})
}
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
[{"sequence":[{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.83,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.5,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":38.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36.92,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":14,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.09,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":0,"y":0,"z":3,"name":"California"}]}]
If I use normal data just like below it will work
[[2, 2], [10, 10]]
But it wont work sequence of data which motion video needs
reactjs highcharts react-highcharts
asked Nov 20 '18 at 7:45
raj mraj m
69721331
Hello raj m, In your code I do not see the import ofhighcharts-moremodule. Also, I created a live example showing a similar situation to yours and it works fine: codesandbox.io/s/50p5l109nn
– ppotaczek
Nov 20 '18 at 13:39
Yes if we are giving plain data it will work. My case there is motion video which will get data like above. Please find edited page above
– raj m
Nov 21 '18 at 6:06
Hi raj m, Please see this example: codesandbox.io/s/6voj2v88qr I am able to update the chart with your data. You need to haveseries.dataformat the same as required by Highcharts: api.highcharts.com/highcharts/series.bubble.data
– ppotaczek
Nov 21 '18 at 12:49
You correct it may work. But bubble chart motion video need a sequence object in data. So that it can take video @ppotaczek
– raj m
Nov 23 '18 at 5:26
@ppotaczek I have updated motion labels. Please refer. there are 15 sequences for 15 labels. Its not working with motion video
– raj m
Nov 23 '18 at 5:39
|
show 6 more comments
0
0
0
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
},
title: "",
legend: {
enabled: false
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Peak Load (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.05,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
style: this.style,
text: 'Peak Load Threshold',
align: 'center',
verticalAlign: 'middle'
},
zIndex: 3,
value: 30
}],
softMax: 0
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Peak Unbalance (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.1,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
align: 'center',
style: this.style,
text: 'Peak Unbalance Threshold'
},
zIndex: 3,
value: 4
}],
softMax: 0
},
tooltip: {
useHTML: true,
padding: 2,
headerFormat: '<div class="padding-0-10 padding-b-10"><table>',
pointFormat: '<tr><td colspan="2"><h5><strong>{point.name}</strong></h5></td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Load: </td><td>{point.x} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Unbalance: </td><td>{point.y} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Device Count: </td><td>{point.z}</td></tr>',
footerFormat: '</table></div>'
},
plotOptions: {
bubble: {
minSize: 20
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '..',
style: { fontSize: 10, color: 'rgba(67, 67, 72, 0.5)', textOutline: false, fillOpacity: 0.1 },
color: 'rgba(67, 67, 72, 0.5)'
},
cursor: 'pointer',
point: {
events: {
click: function () {
// $rootScope.$broadcast('loadHierarchy', { chartType: 'loadUnbalance', name: this.name });
}
}
}
}
},
motion: {
enabled: true,
axisLabel: 'year',
loop: false,
series: 0, // The series which holds points to update
updateInterval: 100,
magnet: {
round: 'round', // ceil / floor / round
step: 0.1
},
labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
},
series: [{
name: 'Things',
colorByPoint: true,
id: 'deep',
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)']
]
}
},
data:
}]
}
}
// 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
}],
xAxis: {
...this.state.options.xAxis,
softMax: renderObj.xSoftMax,
plotLines: [
{
...this.state.options.xAxis.plotLines[0],
value: renderObj.maxLoadThreshold,
label: {
...this.state.options.xAxis.plotLines[0].label,
text: renderObj.xLabelText
}
}
]
},
yAxis: {
...this.state.options.yAxis,
softMax: renderObj.ySoftMax,
plotLines: [
{
...this.state.options.yAxis.plotLines[0],
value: renderObj.maxUnbalanceThreshold,
label: {
...this.state.options.yAxis.plotLines[0].label,
text: renderObj.yLabelText
}
}
]
}
}
})
})
}
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
[{"sequence":[{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.83,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.5,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":38.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36.92,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":14,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.09,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":0,"y":0,"z":3,"name":"California"}]}]
If I use normal data just like below it will work
[[2, 2], [10, 10]]
But it wont work sequence of data which motion video needs
reactjs highcharts react-highcharts
asked Nov 20 '18 at 7:45
raj mraj m
69721331
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
},
title: "",
legend: {
enabled: false
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Peak Load (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.05,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
style: this.style,
text: 'Peak Load Threshold',
align: 'center',
verticalAlign: 'middle'
},
zIndex: 3,
value: 30
}],
softMax: 0
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Peak Unbalance (A)',
style: this.style
},
labels: {
format: '{value}',
style: this.style
},
min: 0,
maxPadding: 0.1,
plotLines: [{
color: '#000',
dashStyle: 'dot',
width: 2,
label: {
align: 'center',
style: this.style,
text: 'Peak Unbalance Threshold'
},
zIndex: 3,
value: 4
}],
softMax: 0
},
tooltip: {
useHTML: true,
padding: 2,
headerFormat: '<div class="padding-0-10 padding-b-10"><table>',
pointFormat: '<tr><td colspan="2"><h5><strong>{point.name}</strong></h5></td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Load: </td><td>{point.x} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Peak Unbalance: </td><td>{point.y} A</td></tr>' +
'<tr><td style="padding-right: 5px;">Device Count: </td><td>{point.z}</td></tr>',
footerFormat: '</table></div>'
},
plotOptions: {
bubble: {
minSize: 20
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '..',
style: { fontSize: 10, color: 'rgba(67, 67, 72, 0.5)', textOutline: false, fillOpacity: 0.1 },
color: 'rgba(67, 67, 72, 0.5)'
},
cursor: 'pointer',
point: {
events: {
click: function () {
// $rootScope.$broadcast('loadHierarchy', { chartType: 'loadUnbalance', name: this.name });
}
}
}
}
},
motion: {
enabled: true,
axisLabel: 'year',
loop: false,
series: 0, // The series which holds points to update
updateInterval: 100,
magnet: {
round: 'round', // ceil / floor / round
step: 0.1
},
labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
},
series: [{
name: 'Things',
colorByPoint: true,
id: 'deep',
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)']
]
}
},
data:
}]
}
}
// 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
}],
xAxis: {
...this.state.options.xAxis,
softMax: renderObj.xSoftMax,
plotLines: [
{
...this.state.options.xAxis.plotLines[0],
value: renderObj.maxLoadThreshold,
label: {
...this.state.options.xAxis.plotLines[0].label,
text: renderObj.xLabelText
}
}
]
},
yAxis: {
...this.state.options.yAxis,
softMax: renderObj.ySoftMax,
plotLines: [
{
...this.state.options.yAxis.plotLines[0],
value: renderObj.maxUnbalanceThreshold,
label: {
...this.state.options.yAxis.plotLines[0].label,
text: renderObj.yLabelText
}
}
]
}
}
})
})
}
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
[{"sequence":[{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.83,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":37.5,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":38.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36.92,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":36,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.08,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":14,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13.09,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":13,"y":0,"z":3,"name":"California"},{"color":"rgba(67, 67, 72, 0.5)","fillColor":"rgba(67, 67, 72, 0.5)","x":0,"y":0,"z":3,"name":"California"}]}]
If I use normal data just like below it will work
[[2, 2], [10, 10]]
But it wont work sequence of data which motion video needs
reactjs highcharts react-highcharts
reactjs highcharts react-highcharts
asked Nov 20 '18 at 7:45
raj mraj m
69721331
asked Nov 20 '18 at 7:45
raj mraj m
69721331
edited Nov 23 '18 at 5:36
raj m
asked Nov 20 '18 at 7:45
raj mraj m
69721331
asked Nov 20 '18 at 7:45
raj mraj m
69721331
asked Nov 20 '18 at 7:45
raj mraj m
69721331
69721331
Hello raj m, In your code I do not see the import ofhighcharts-moremodule. Also, I created a live example showing a similar situation to yours and it works fine: codesandbox.io/s/50p5l109nn
– ppotaczek
Nov 20 '18 at 13:39
Yes if we are giving plain data it will work. My case there is motion video which will get data like above. Please find edited page above
– raj m
Nov 21 '18 at 6:06
Hi raj m, Please see this example: codesandbox.io/s/6voj2v88qr I am able to update the chart with your data. You need to haveseries.dataformat the same as required by Highcharts: api.highcharts.com/highcharts/series.bubble.data
– ppotaczek
Nov 21 '18 at 12:49
You correct it may work. But bubble chart motion video need a sequence object in data. So that it can take video @ppotaczek
– raj m
Nov 23 '18 at 5:26
@ppotaczek I have updated motion labels. Please refer. there are 15 sequences for 15 labels. Its not working with motion video
– raj m
Nov 23 '18 at 5:39
|
show 6 more comments
Hello raj m, In your code I do not see the import ofhighcharts-moremodule. Also, I created a live example showing a similar situation to yours and it works fine: codesandbox.io/s/50p5l109nn
– ppotaczek
Nov 20 '18 at 13:39
Yes if we are giving plain data it will work. My case there is motion video which will get data like above. Please find edited page above
– raj m
Nov 21 '18 at 6:06
Hi raj m, Please see this example: codesandbox.io/s/6voj2v88qr I am able to update the chart with your data. You need to haveseries.dataformat the same as required by Highcharts: api.highcharts.com/highcharts/series.bubble.data
– ppotaczek
Nov 21 '18 at 12:49
You correct it may work. But bubble chart motion video need a sequence object in data. So that it can take video @ppotaczek
– raj m
Nov 23 '18 at 5:26
@ppotaczek I have updated motion labels. Please refer. there are 15 sequences for 15 labels. Its not working with motion video
– raj m
Nov 23 '18 at 5:39
Hello raj m, In your code I do not see the import of
highcharts-more module. Also, I created a live example showing a similar situation to yours and it works fine: codesandbox.io/s/50p5l109nn– ppotaczek
Nov 20 '18 at 13:39
Hello raj m, In your code I do not see the import of
highcharts-more module. Also, I created a live example showing a similar situation to yours and it works fine: codesandbox.io/s/50p5l109nn– ppotaczek
Nov 20 '18 at 13:39
Yes if we are giving plain data it will work. My case there is motion video which will get data like above. Please find edited page above
– raj m
Nov 21 '18 at 6:06
Yes if we are giving plain data it will work. My case there is motion video which will get data like above. Please find edited page above
– raj m
Nov 21 '18 at 6:06
Hi raj m, Please see this example: codesandbox.io/s/6voj2v88qr I am able to update the chart with your data. You need to have
series.data format the same as required by Highcharts: api.highcharts.com/highcharts/series.bubble.data– ppotaczek
Nov 21 '18 at 12:49
Hi raj m, Please see this example: codesandbox.io/s/6voj2v88qr I am able to update the chart with your data. You need to have
series.data format the same as required by Highcharts: api.highcharts.com/highcharts/series.bubble.data– ppotaczek
Nov 21 '18 at 12:49
You correct it may work. But bubble chart motion video need a sequence object in data. So that it can take video @ppotaczek
– raj m
Nov 23 '18 at 5:26
You correct it may work. But bubble chart motion video need a sequence object in data. So that it can take video @ppotaczek
– raj m
Nov 23 '18 at 5:26
@ppotaczek I have updated motion labels. Please refer. there are 15 sequences for 15 labels. Its not working with motion video
– raj m
Nov 23 '18 at 5:39
@ppotaczek I have updated motion labels. Please refer. there are 15 sequences for 15 labels. Its not working with motion video
– raj m
Nov 23 '18 at 5:39
|
show 6 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53388350%2fhighchart-is-not-updating-after-setstate-bubble-motion%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53388350%2fhighchart-is-not-updating-after-setstate-bubble-motion%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Hello raj m, In your code I do not see the import of
highcharts-moremodule. Also, I created a live example showing a similar situation to yours and it works fine: codesandbox.io/s/50p5l109nn– ppotaczek
Nov 20 '18 at 13:39
Yes if we are giving plain data it will work. My case there is motion video which will get data like above. Please find edited page above
– raj m
Nov 21 '18 at 6:06
Hi raj m, Please see this example: codesandbox.io/s/6voj2v88qr I am able to update the chart with your data. You need to have
series.dataformat the same as required by Highcharts: api.highcharts.com/highcharts/series.bubble.data– ppotaczek
Nov 21 '18 at 12:49
You correct it may work. But bubble chart motion video need a sequence object in data. So that it can take video @ppotaczek
– raj m
Nov 23 '18 at 5:26
@ppotaczek I have updated motion labels. Please refer. there are 15 sequences for 15 labels. Its not working with motion video
– raj m
Nov 23 '18 at 5:39