@highcharts/highcharts-react-native
Version:
Highcharts react native wrapper
55 lines (48 loc) • 1.49 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script>
const hcUtils = {
// convert string to JSON, including functions.
parseOptions: function (chartOptions) {
const parseFunction = this.parseFunction;
const options = JSON.parse(chartOptions, function (val, key) {
if (typeof key === 'string' && key.indexOf('function') > -1) {
return parseFunction(key);
} else {
return key;
}
});
return options;
},
// convert funtion string to function
parseFunction: function (fc) {
const fcArgs = fc.match(/\((.*?)\)/)[1],
fcbody = fc.split('{');
return new Function(fcArgs, '{' + fcbody.slice(1).join('{'));
}
};
// Communication between React app and webview. Receive chart options as string.
document.addEventListener('message', function (data) {
Highcharts.charts[0].update(
hcUtils.parseOptions(data.data),
true,
true,
true
);
});
window.addEventListener('message', function (data) {
Highcharts.charts[0].update(
hcUtils.parseOptions(data.data),
true,
true,
true
);
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>