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 not showing on android simulator #85

Open
ws7one opened this issue Jul 17, 2018 · 2 comments
Open

Chart not showing on android simulator #85

ws7one opened this issue Jul 17, 2018 · 2 comments

Comments

@ws7one
Copy link

ws7one commented Jul 17, 2018

Used the example given in the documentation. I think I can see a faint white box which I am guessing is the webview, but cannot see the chart for sure. Any help would be appreciated, not sure if I have done something wrong

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: () => {
                        // set up the updating of the chart each second
                        const series = this.series[0];
                        setInterval(() => {
                            const x = (new Date()).getTime(); // current time
                            const 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: () => (`<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
                    const data = [];
                    const time = (new Date()).getTime();
                    let 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
                    domStorageEnabled
                />
            </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"
  }
}

The Output

image

@db42
Copy link

db42 commented Dec 29, 2018

Try adding originWhitelist={[""]} in ChartView .

<ChartView
                    originWhitelist={[""]}
                    style={{ height: 500}}
                    config={conf}
                    options={options}
                    javaScriptEnabled
                    domStorageEnabled
                />

More details #83

@conor909
Copy link

@db42 worked thanks!

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

No branches or pull requests

3 participants