javascriptreactjshtmlreact-nativefacebook-canvas

Unable to draw linechart in react-native using canvas.js


Here I am using WebView in react-native to draw line chart in react-native, but its not coming.. below is the full code ..

import React, { Component } from 'react';
import { WebView } from 'react-native';

export default class SensorDetails extends Component {
    render() {
        return (
            <WebView
            source={{ html: "<div id='chartContainer' style='width: 100%; height: 360px;'>Chart Renders Here</div><script src='https://canvasjs.com/assets/script/canvasjs.min.js'></script> <script>window.onload=function(){ var chart = new CanvasJS.Chart(chartContainer{title:{text: Earthquakes - per month}, data: [{type: line,dataPoints: [{ x: new Date(2012, 00, 1), y: 450 },{ x: new Date(2012, 01, 1), y: 414 },{ x: new Date(2012, 02, 1), y: 520 },{ x: new Date(2012, 03, 1), y: 460 },{ x: new Date(2012, 04, 1), y: 450 },{ x: new Date(2012, 05, 1), y: 500 },{ x: new Date(2012, 06, 1), y: 480 },{ x: new Date(2012, 07, 1), y: 480 },{ x: new Date(2012, 08, 1), y: 410 },{ x: new Date(2012, 09, 1), y: 500 },]}]});chart.render();}</script>" }}
            />
        );
    }
}

Thanks


Solution

  • Use this code..

    import React, { Component } from 'react';
    import { WebView } from 'react-native';
    
    export default class SensorDetails extends Component {
      render() {
        return (
          <WebView
          originWhitelist={['*']}
          source={{ html: "<div id='chartContainer' style='width: 100%; height: 360px;'>Chart Renders Here</div><script src='https://canvasjs.com/assets/script/canvasjs.min.js'></script> <script>window.onload=function(){var chart=new CanvasJS.Chart(chartContainer,{title:{text: 'Abhigyan Data'}, data: [{type: 'pie',dataPoints: [{ x: new Date(2012, 00, 1), y: 450 },{ x: new Date(2012, 01, 1), y: 414 },{ x: new Date(2012, 02, 1), y: 520 },{ x: new Date(2012, 03, 1), y: 460 },{ x: new Date(2012, 04, 1), y: 450 },{ x: new Date(2012, 05, 1), y: 500 },{ x: new Date(2012, 06, 1), y: 480 },{ x: new Date(2012, 07, 1), y: 480 },{ x: new Date(2012, 08, 1), y: 410 },{ x: new Date(2012, 09, 1), y: 500 },]}]});chart.render();}</script>" }}    /> 
          );
          }
          }