title: how to draw simple sparkline graph using react js?
body: <p>I'm implementing websocket client-server Application in which websocket server is implemented in the node js that is working fine its waiitng for the client connections on 1234 port.</p>
  
  <p>In the client side I have to implement that in the react js because server is sending messages to the connected clients and based on that messages I have to implement a simple graph using a react sparklines. Please guide me to how I can draw the graph by using this input values coming from websocket?</p>
  
  <p><strong>index.html :</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang = "en"&gt;
  
  &lt;head&gt;
      &lt;meta charset = "UTF-8"&gt;
      &lt;title&gt;React App&lt;/title&gt;
      &lt;div id="content"&gt;&lt;/div&gt;
      &lt;script type="text/javascript"&gt;
        var content = document.getElementById('content');
        var socket = new WebSocket('ws://localhost:1234','security');
  
        socket.onopen = function () {
  
        };
        socket.onmessage = function (message) {
           content.innerHTML += message.data +'&lt;br /&gt;';
        };
        socket.onerror = function (error) {
           console.log('WebSocket error: ' + error);
        };
      &lt;/script&gt;    
   &lt;/head&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>App.jsx :</strong></p>
  
  <pre><code>import React from 'react';
  
  class App extends React.Component {
  
  
      render() {
  
    return (
       &lt;div&gt;
          Hello world!!!
       &lt;/div&gt;
    );
      }  
  }
  export default App;
  </code></pre>
  
  <p><strong>main.js :</strong> </p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App.jsx';
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('content'))
  </code></pre>
  
  <p>For now just displaying purpose I'm printing this in onMessage() method. Actually how I can implement this websocket logic and how to draw simple graph?</p>