react-native-highcharts
react-native-highcharts copied to clipboard
TradingPal
Highchart 1.0.2 doesn't rendering in react-native 0.56.0
package.json
{ "name": "SunnyWeather", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "react": "16.4.1", "react-native": "0.56.0", "react-native-highcharts": "^1.0.2" }, "devDependencies": { "babel-jest": "23.2.0", "babel-preset-react-native": "5.0.2", "jest": "23.3.0", "react-test-renderer": "16.4.1" }, "jest": { "preset": "react-native" } }
App.js
/**
- Sample React Native App
- https://github.com/facebook/react-native
- @format
- @flow */
import React, {Component} from 'react'; import {Platform, StyleSheet, Text, View} from 'react-native'; import ChartView from 'react-native-highcharts';
const instructions = Platform.select({ ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', android: 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu', });
type Props = {}; export default class App extends Component<Props> { 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: (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;
}())
}]
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
};
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
<ChartView javaScriptEnabled={true}
domStorageEnabled={true} style={{height:300}} config={conf} options={options}></ChartView> </View> ); } }
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', // alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, // textAlign: 'center', margin: 10, }, instructions: { // textAlign: 'center', color: '#333333', marginBottom: 5, }, });
Error
Possible Unhandle Promise Rejection (id: 0): Error: Unable to open URL: file///....
use this line: originWhitelist={['']} <ChartView style={{flex: 1}} config={config} options={options} stock={true} originWhitelist={['']} />
I can't see the webview or the chartview or the chart at all.. I have used the example given here,I have no idea what I have missed. Any help is appreciated
import React, { Component } from 'react';
import {
View,
Text,
} from 'react-native';
import ChartView from 'react-native-highcharts';
class App extends Component {
render() {
const Highcharts = 'Highcharts';
const 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
const 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: (function () {
// generate an array of random data
let data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
const val = {
x: time + i * 1000,
y: Math.random()
};
console.log(val);
data.push(val);
}
return data;
}())
}]
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
};
return (
<View>
<Text>Chart</Text>
<ChartView
style={{ height: 500 }}
config={conf}
options={options}
javaScriptEnabled={true}
domStorageEnabled={true}>
</ChartView>
</View>
);
}
}
export default App;
My dependencies
{
"name": "chartSamples",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-react-native": "^4.0.0",
"eslint-config-rallycoding": "^3.2.0",
"react": "16.4.1",
"react-native": "^0.55.4",
"react-native-highcharts": "^1.0.2"
},
"devDependencies": {
"babel-jest": "23.4.0",
"jest": "23.4.0",
"react-test-renderer": "16.4.1"
},
"jest": {
"preset": "react-native"
}
}
This is the output
I am experiencing the same issue (even with the originWhitelist={['']} workaround mentioned above). My ChartView appears as white a box with no actual chart rendered inside.
React Native 0.0.56 React Native Highcharts 1.0.2
In my case, this problem is also happening. Actually I have a data that is updated dynamically and the first time I call the data API I have this same problem, in the second it shows the chart ....
@nguyennam271 Any idea why adding originWhitelist={['']} solves the issue?
yes @ws7one earlier i had older version and used huwawei device. then upgrading to node.js 8.11.3 and after using samsung device, it works for me.
my configurations are, node.Js : 8.11.3 npm : 5.60 react-native-cli : 2.0.1 react-native: 0.50.3 react-native-highcharts: 1.0.2
After almost a day, I realised that the react-native-highcharts.js thats supposed to render the html with the scripts in the header tag weren't working properly. Hence the scripts weren't running at all and I am not sure how to catch js errors from inside a webview. Hence the screen was empty because there was nothing to show. After a few iterations I realised, that the script tags mentioned inside head tags which import the libraries of jquery and highcharts and so on, weren't really getting rendered, since they were https. I changed that to http and it started working. Now I am not sure if this is a solution for everyone, but this helped me and to be honest this is not a solution. Still need to find out why http and not https, but for now I am taking a break. With recent issues with RN 0.56.0 and this, seems I have been only finding solutions just to get a basic app up and running. If anybody can find a solution for http/https issue that would fix this completely. Also a reply on how to catch errors inside webview would be quite helpful for further issues with webview.
use this line: originWhitelist={['']} <ChartView style={{flex: 1}} config={config} options={options} stock={true} originWhitelist={['']} />
This worked for me - boom charts are rendering! Thanks!
use this line: originWhitelist={['']} <ChartView style={{flex: 1}} config={config} options={options} stock={true} originWhitelist={['']} />
This worked for me - boom charts are rendering! Thanks!
This Worked for me as well
