Problem with motion video wrt to Reach highchart dynamic update

[rajmaravanthe]

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 },

    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

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';

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} /> ); } }

[larsac07]

Hi, @rajmaravanthe. I'm not sure what to make of this. I'm trying to understand what you want to accomplish, but there is a lot of code here.

Could you try making a minimal example in, say, JSFiddle?