Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chart rendering issue on android devices #99

Open
wzhang2 opened this issue Aug 18, 2020 · 8 comments
Open

chart rendering issue on android devices #99

wzhang2 opened this issue Aug 18, 2020 · 8 comments

Comments

@wzhang2
Copy link

wzhang2 commented Aug 18, 2020

i added a button to change the data, and it's working fine on both of the ios simulator and android emulator, as well as the ios device, but it is not working on an android phone, i'm just using useState and useCallback to control the states, but is this something i should do in chartOptions instead? my data and chartOptions are both states

@wzhang2 wzhang2 changed the title chart re-render issue on androids chart rendering issue on androids Aug 19, 2020
@wzhang2
Copy link
Author

wzhang2 commented Aug 19, 2020

I can see that render is called, but most of the time the chart just doesn't show up or doesn't change, this is totally fine on the following simulators/devices:

iOS simulator (11 pro)
android emulator (android 10)
iPhone 7, X, 11 pro

but its not working on any of the android devices that I have:
pixel 2
huawei nexus p6

fyi I package full release builds for testing

@wzhang2
Copy link
Author

wzhang2 commented Aug 19, 2020

here's a snippet of my code

  const renderChart = useCallback(() => {
        console.log('rendering')
        console.log(JSON.stringify(options));
        return (
            <HighchartsReactNative
                styles={lineChartStyles.container}
                options={options}
                loader={true}
                modules={modules}
                useCDN={true}
                useSSL={true}
            />
        )
    }, [options])


    return (
        renderChart()
    );

my versions:

"react": "16.9.0",
"react-native": "0.61.2",
"react-native-unimodules": "^0.7.0",
"metro-config": "^0.62.0",
"react-native-webview": "^10.4.1",
"@highcharts/highcharts-react-native": "^3.1.1"

@wzhang2 wzhang2 changed the title chart rendering issue on androids chart rendering issue on android devices Aug 19, 2020
@wzhang2
Copy link
Author

wzhang2 commented Aug 19, 2020

and here's my device log


08-19 10:09:38.944   849   849 I /vendor/bin/hw/[email protected]: SRAM data: 2805000
08-19 10:09:38.959  2250  2814 D PowerUI : can't show warning due to - plugged: true status unknown: false
08-19 10:09:39.732  3335 12953 I CastDatabase: Saving the database
08-19 10:09:39.766  3335 12953 I SQLiteCastStore: [CastNetworkInfo] saved: 0, skipped: 0, [CastDeviceInfo]: saved 0, skipped 0, [Paired Guest Mode DeviceInfo] saved: 0, skipped: 0. [ProbedNetworks]: saved 0, skipped: 0, [ProbedSocketAddress]: saved 0, skipped: 0, [Network-Device pairs]: saved: 0
08-19 10:09:41.812   849   849 I /vendor/bin/hw/[email protected]: SRAM data: 2805000
08-19 10:09:47.754   930   981 I VSC     : @ 2962.847: [VSC] Request sensor 131074, sample_duration 0 ms, report_duration 0 ms
08-19 10:09:47.755   930   981 I VSC     : @ 2962.848: [VSC] Stopping sensor events for sensor 65537
08-19 10:09:53.743 13657 13701 I ReactNativeJS: rendering
08-19 10:09:53.743 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1440979200000,"y":8.146077235250216},{"x":1443571200000,"y":8.1166864173528},{"x":1446249600000,"y":8.251580482509606},{"x":1448841600000,"y":8.254880206036583},{"x":1451520000000,"y":8.191981661943107},{"x":1454198400000,"y":8.203756107024905},{"x":1456704000000,"y":8.148816808575456},{"x":1459382400000,"y":8.311180236198275},{"x":1461974400000,"y":8.398460108768317},{"x":1464652800000,"y":8.469247250024095},{"x":1467244800000,"y":8.4980706391901},{"x":1469923200000,"y":8.62022658812967},{"x":1472601600000,"y":8.691763801268088},{"x":1475193600000,"y":8.74652131018284},{"x":1477872000000,"y":8.775676095662709},{"x":1480464000000,"y":8.753385846677592},{"x":1483142400000,"y":8.8258849227561},{"x":1485820800000,"y":8.889944406921432},{"x":1488240000000,"y":8.988943140374015},{"x":1490918400000,"y":9.036007051682523},{"x":1493510400000,"y":9.100732318619896},{"x":1496188800000,"y":9.174408796358874},{"x":1498780800000,"y":9.195519937915494},{"x":1501459200000,"y":9.234378510797091},{"x":1504137600000,"y":9.308807340634921},{"x":1506729600000,"y":9.330154532125137},{"x":1509408000000,"y":9.36939375796211},{"x":1512000000000,"y":9.37297027698398},{"x":1514678400000,"y":9.376616938795056},{"x":1517356800000,"y":9.353279674979914},{"x":1519776000000,"y":9.28469467526281},{"x":1522454400000,"y":9.30652466892757},{"x":1525046400000,"y":9.273836409868263},{"x":1527724800000,"y":9.240977430308073},{"x":1530316800000,"y":9.217250014127828},{"x":1532995200000,"y":9.257643574896838},{"x":1535673600000,"y":9.206152171555297},{"x":1538265600000,"y":9.228366173075276},{"x":1540944000000,"y":9.185701028204244},{"x":1543536000000,"y":9.16150209752418},{"x":1546214400000,"y":9.240077027435207},{"x":1548892800000,"y":9.412635281877483},{"x":1551312000000,"y":9.463443765612316},{"x":1553990400000,"y":9.533294925363023},{"x":1556582400000,"y":9.603446020548132},{"x":1559260800000,"y":9.635837901461645},{"x":1561852800000,"y":9.754085547780933},{"x":1564531200000,"y":9.767505065672308},{"x":1567209600000,"y":9.675459184973885},{"x":1569801600000,"y":9.727478497027784},{"x":1572480000000,"y":9.77970623024355},{"x":1575072000000,"y":9.803000152922584},{"x":1577750400000,"y":9.923592195733988},{"x":1580428800000,"y":9.956767992708192},{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"N/A","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:53.760 13657 13701 I ReactNativeJS: timeframe changed to: 1Y
08-19 10:09:53.761 13657 13701 I ReactNativeJS: rendering
08-19 10:09:53.761 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1440979200000,"y":8.146077235250216},{"x":1443571200000,"y":8.1166864173528},{"x":1446249600000,"y":8.251580482509606},{"x":1448841600000,"y":8.254880206036583},{"x":1451520000000,"y":8.191981661943107},{"x":1454198400000,"y":8.203756107024905},{"x":1456704000000,"y":8.148816808575456},{"x":1459382400000,"y":8.311180236198275},{"x":1461974400000,"y":8.398460108768317},{"x":1464652800000,"y":8.469247250024095},{"x":1467244800000,"y":8.4980706391901},{"x":1469923200000,"y":8.62022658812967},{"x":1472601600000,"y":8.691763801268088},{"x":1475193600000,"y":8.74652131018284},{"x":1477872000000,"y":8.775676095662709},{"x":1480464000000,"y":8.753385846677592},{"x":1483142400000,"y":8.8258849227561},{"x":1485820800000,"y":8.889944406921432},{"x":1488240000000,"y":8.988943140374015},{"x":1490918400000,"y":9.036007051682523},{"x":1493510400000,"y":9.100732318619896},{"x":1496188800000,"y":9.174408796358874},{"x":1498780800000,"y":9.195519937915494},{"x":1501459200000,"y":9.234378510797091},{"x":1504137600000,"y":9.308807340634921},{"x":1506729600000,"y":9.330154532125137},{"x":1509408000000,"y":9.36939375796211},{"x":1512000000000,"y":9.37297027698398},{"x":1514678400000,"y":9.376616938795056},{"x":1517356800000,"y":9.353279674979914},{"x":1519776000000,"y":9.28469467526281},{"x":1522454400000,"y":9.30652466892757},{"x":1525046400000,"y":9.273836409868263},{"x":1527724800000,"y":9.240977430308073},{"x":1530316800000,"y":9.217250014127828},{"x":1532995200000,"y":9.257643574896838},{"x":1535673600000,"y":9.206152171555297},{"x":1538265600000,"y":9.228366173075276},{"x":1540944000000,"y":9.185701028204244},{"x":1543536000000,"y":9.16150209752418},{"x":1546214400000,"y":9.240077027435207},{"x":1548892800000,"y":9.412635281877483},{"x":1551312000000,"y":9.463443765612316},{"x":1553990400000,"y":9.533294925363023},{"x":1556582400000,"y":9.603446020548132},{"x":1559260800000,"y":9.635837901461645},{"x":1561852800000,"y":9.754085547780933},{"x":1564531200000,"y":9.767505065672308},{"x":1567209600000,"y":9.675459184973885},{"x":1569801600000,"y":9.727478497027784},{"x":1572480000000,"y":9.77970623024355},{"x":1575072000000,"y":9.803000152922584},{"x":1577750400000,"y":9.923592195733988},{"x":1580428800000,"y":9.956767992708192},{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"N/A","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:53.762 13657 13701 I ReactNativeJS: series length 13
08-19 10:09:53.763 13657 13701 I ReactNativeJS: rendering
08-19 10:09:53.763 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1440979200000,"y":8.146077235250216},{"x":1443571200000,"y":8.1166864173528},{"x":1446249600000,"y":8.251580482509606},{"x":1448841600000,"y":8.254880206036583},{"x":1451520000000,"y":8.191981661943107},{"x":1454198400000,"y":8.203756107024905},{"x":1456704000000,"y":8.148816808575456},{"x":1459382400000,"y":8.311180236198275},{"x":1461974400000,"y":8.398460108768317},{"x":1464652800000,"y":8.469247250024095},{"x":1467244800000,"y":8.4980706391901},{"x":1469923200000,"y":8.62022658812967},{"x":1472601600000,"y":8.691763801268088},{"x":1475193600000,"y":8.74652131018284},{"x":1477872000000,"y":8.775676095662709},{"x":1480464000000,"y":8.753385846677592},{"x":1483142400000,"y":8.8258849227561},{"x":1485820800000,"y":8.889944406921432},{"x":1488240000000,"y":8.988943140374015},{"x":1490918400000,"y":9.036007051682523},{"x":1493510400000,"y":9.100732318619896},{"x":1496188800000,"y":9.174408796358874},{"x":1498780800000,"y":9.195519937915494},{"x":1501459200000,"y":9.234378510797091},{"x":1504137600000,"y":9.308807340634921},{"x":1506729600000,"y":9.330154532125137},{"x":1509408000000,"y":9.36939375796211},{"x":1512000000000,"y":9.37297027698398},{"x":1514678400000,"y":9.376616938795056},{"x":1517356800000,"y":9.353279674979914},{"x":1519776000000,"y":9.28469467526281},{"x":1522454400000,"y":9.30652466892757},{"x":1525046400000,"y":9.273836409868263},{"x":1527724800000,"y":9.240977430308073},{"x":1530316800000,"y":9.217250014127828},{"x":1532995200000,"y":9.257643574896838},{"x":1535673600000,"y":9.206152171555297},{"x":1538265600000,"y":9.228366173075276},{"x":1540944000000,"y":9.185701028204244},{"x":1543536000000,"y":9.16150209752418},{"x":1546214400000,"y":9.240077027435207},{"x":1548892800000,"y":9.412635281877483},{"x":1551312000000,"y":9.463443765612316},{"x":1553990400000,"y":9.533294925363023},{"x":1556582400000,"y":9.603446020548132},{"x":1559260800000,"y":9.635837901461645},{"x":1561852800000,"y":9.754085547780933},{"x":1564531200000,"y":9.767505065672308},{"x":1567209600000,"y":9.675459184973885},{"x":1569801600000,"y":9.727478497027784},{"x":1572480000000,"y":9.77970623024355},{"x":1575072000000,"y":9.803000152922584},{"x":1577750400000,"y":9.923592195733988},{"x":1580428800000,"y":9.956767992708192},{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"N/A","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:53.764 13657 13701 I ReactNativeJS: rendering
08-19 10:09:53.764 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1567209600000,"y":9.675459184973885},{"x":1569801600000,"y":9.727478497027784},{"x":1572480000000,"y":9.77970623024355},{"x":1575072000000,"y":9.803000152922584},{"x":1577750400000,"y":9.923592195733988},{"x":1580428800000,"y":9.956767992708192},{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"PIMCO GIS Income Fund E Class SGD (Hedged) Income","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:55.526 13657 13701 I ReactNativeJS: rendering
08-19 10:09:55.526 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1567209600000,"y":9.675459184973885},{"x":1569801600000,"y":9.727478497027784},{"x":1572480000000,"y":9.77970623024355},{"x":1575072000000,"y":9.803000152922584},{"x":1577750400000,"y":9.923592195733988},{"x":1580428800000,"y":9.956767992708192},{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"PIMCO GIS Income Fund E Class SGD (Hedged) Income","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:55.543 13657 13701 I ReactNativeJS: timeframe changed to: 6M
08-19 10:09:55.545 13657 13701 I ReactNativeJS: rendering
08-19 10:09:55.545 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1567209600000,"y":9.675459184973885},{"x":1569801600000,"y":9.727478497027784},{"x":1572480000000,"y":9.77970623024355},{"x":1575072000000,"y":9.803000152922584},{"x":1577750400000,"y":9.923592195733988},{"x":1580428800000,"y":9.956767992708192},{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"PIMCO GIS Income Fund E Class SGD (Hedged) Income","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:55.546 13657 13701 I ReactNativeJS: series length 7
08-19 10:09:55.546 13657 13701 I ReactNativeJS: rendering
08-19 10:09:55.546 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1567209600000,"y":9.675459184973885},{"x":1569801600000,"y":9.727478497027784},{"x":1572480000000,"y":9.77970623024355},{"x":1575072000000,"y":9.803000152922584},{"x":1577750400000,"y":9.923592195733988},{"x":1580428800000,"y":9.956767992708192},{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"PIMCO GIS Income Fund E Class SGD (Hedged) Income","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:55.547 13657 13701 I ReactNativeJS: rendering
08-19 10:09:55.547 13657 13701 I ReactNativeJS: {"title":{"text":null},"series":[{"data":[{"x":1582934400000,"y":9.882261816828494},{"x":1585612800000,"y":9.041601168281893},{"x":1588204800000,"y":9.301937164057795},{"x":1590883200000,"y":9.523633003278576},{"x":1593475200000,"y":9.686565630011541},{"x":1596153600000,"y":9.86},{"x":1597622400000,"y":9.91}],"name":"PIMCO GIS Income Fund E Class SGD (Hedged) Income","color":"#BFBFBF","type":"area","fillColor":{"linearGradient":{"x1":0,"x2":0,"y1":0,"y2":1},"stops":[[0,"#D7EFE4"],[1,"#AFDFC9"]]}}],"xAxis":{"type":"datetime","minTickInterval":2592000000,"ordinal":false},"yAxis":{"tickAmount":4},"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.2f}</b><br/>","shared":true},"scrollbar":{"enabled":false},"legend":{"enabled":false,"layout":"horizontal","verticalAlign":"top","align":"center","floating":false,"shadow":false},"credits":{"enabled":false}}
08-19 10:09:41.834  2250  2814 D PowerUI : can't show warning due to - plugged: true status unknown: false
08-19 10:10:19.490  1314  1366 V DisplayPowerController: Brightness [6] reason changing to: 'automatic [ dim ]', previous reason: 'automatic'.
08-19 10:10:22.626   930   981 I CHRE    : @ 2997.721: [ImuCal] [NanoSensorCal:GYRO_RPS] Offset | Temperature [C]: 0.027103, -0.000604, 0.015525 | 28.36

@sebastianbochan
Copy link
Contributor

Could you share your simplified app? It will allow us to reproduce the problem.

@wzhang2
Copy link
Author

wzhang2 commented Aug 20, 2020

thanks i shall add that in the next few days. right now i added some delay and it's working

@sebastianbochan
Copy link
Contributor

sebastianbochan commented Aug 21, 2020

Thank you for information.

@wzhang2
Copy link
Author

wzhang2 commented Sep 6, 2020

@Denyllon @sebastianbochan maybe i can try to help fix this issue since that's probably easier, is there anything i need to do
before contributing?

@Denyllon
Copy link
Contributor

Denyllon commented Sep 7, 2020

@wzhang2 Would be good to only see the description how did you find the source of this problem, and detailed info about the suggested changes. I need to also inform you about the fact, that the time finish the review and testing your code may be extended (don't really know how much).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants