React native with d3 and webView

Question

I trying to get my head around how to add d3 graphs to react native app. Only information I found is to use webView but would be very appreciated to have some example of working stuff maybe in github.

Answer 1

I made a pie chart with d3 without using a webview. Using d3, you generate your chart and place the resulting SVG code to a Shape component:

<Surface width={100} height={100} >
  <Group x={50} y={50} >
    <Shape d={'M...Here goes the svg code'} 
            stroke={'#000'} 
            strokeWidth={1} 
            fill={'#FF0000'} />
  </Group>
</Surface>

A simple example can be found here: https://github.com/radogost/PieChartExample

Maybe using this approach, you are able to create live updated charts?

Answer 2

I have other library and created local html file:

  <WebView source={{uri: 'file:///android_asset/webview.html'}} style={{
      height: 180,
      borderWidth: 2,
      width: 400
    }}></WebView>

And in webview.html I have:

<script src="Chart.min.js"></script>

<h1>Hellosss</h1>
<canvas id="myChart" width="400" height="400"></canvas>
<script>

var data = {
   labels: ["January", "February", "March", "April", "May", "June", "July"],
   datasets: [
       {
           label: "My First dataset",
           fillColor: "rgba(220,220,220,0.2)",
           strokeColor: "rgba(220,220,220,1)",
           pointColor: "rgba(220,220,220,1)",
           pointStrokeColor: "#fff",
           pointHighlightFill: "#fff",
           pointHighlightStroke: "rgba(220,220,220,1)",
           data: [65, 59, 80, 81, 56, 55, 40]
       },
       {
           label: "My Second dataset",
           fillColor: "rgba(151,187,205,0.2)",
           strokeColor: "rgba(151,187,205,1)",
           pointColor: "rgba(151,187,205,1)",
           pointStrokeColor: "#fff",
           pointHighlightFill: "#fff",
           pointHighlightStroke: "rgba(151,187,205,1)",
           data: [28, 48, 40, 19, 86, 27, 90]
       }
   ]
};
var ctx = document.getElementById("myChart").getContext("2d");
myLineChart = new Chart(ctx).Line(data, {
      animation: false,
      scaleBeginAtZero: true });

</script>

Issue at moment I finding with this solution I cannot do live update and communication in both direction between native app and webview.

Any suggestion? I need to pass authToken plus updated data and not refresh page.