[requested-change] Update docs

openwisp · Jul 5, 2022 · 3bae229 · 3bae229
1 parent a9dd861
commit 3bae229
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -120,7 +120,7 @@ You can also customize some global properties with [`echartsOption`](https://ech
 - setUtils: add new utils
 - render: netjsongraph.js render function
 
-#### Realtime Update
+#### Live update example
 
 We use [socket.io](https://socket.io/) to monitor data changes which supports WebSockets and Polling. You can call `JSONDataUpdate` when the data change event occurs and pass the data to update the view.
 
@@ -156,15 +156,17 @@ socket.on("disconnect", function() {
 socket.on("netjsonChange", graph.utils.JSONDataUpdate.bind(graph));
 ```
 
-You can see this in action by navigating to this [directory](https://github.com/openwisp/netjsongraph.js/tree/gsoc22/examples/realtime_update). Start the server by executing the following commands:
+You can see this in action by executing the following commands:
 
 ```
+cd examples/realtime_update
+
 yarn install
 
 yarn start
 ```
 
-Visit `localhost:3000` to see this in action. In this demo the nodes and links change after 5 seconds.
+In this demo the nodes and links change after 5 seconds.
 
 #### Search elements
 

diff --git a/examples/realtime_update/index.html b/examples/realtime_update/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>netjsongraph.js</title>
+    <title>Live update example</title>
     <meta charset="utf-8">
     <!-- theme can be easily customized via css -->
     <link href="/netjsongraph.css" rel="stylesheet">
@@ -19,8 +19,14 @@
             See other examples：
         */
         // `graph` render by default.
-        const graph = new NetJSONGraph("/netjsonmap.json");
-
+        const graph = new NetJSONGraph("/netjsonmap.json",{
+          echartsOption: {
+              legend: {
+                show: false,
+              },
+            },
+        });
+
         graph.render();
 
         const socket = io("http://localhost:3000/",{ transports : ['websocket'] });

diff --git a/examples/realtime_update/index.js b/examples/realtime_update/index.js
@@ -2,6 +2,7 @@ const express = require("express");
 const http = require("http");
 const path = require("path");
 const {Server} = require("socket.io");
+const open = require("open");
 
 const app = express();
 const server = http.createServer(app);
@@ -191,4 +192,5 @@ app.use("/", (req, res) => {
 
 server.listen(3000, () => {
   console.log("listening on PORT 3000");
+  open("http://localhost:3000");
 });
diff --git a/examples/realtime_update/package.json b/examples/realtime_update/package.json
@@ -11,6 +11,7 @@
   "license": "ISC",
   "dependencies": {
     "express": "^4.18.1",
+    "open": "^8.4.0",
     "socket.io": "^4.5.1"
   }
 }
diff --git a/index.html b/index.html
@@ -98,11 +98,6 @@ <h1>NetJSONGraph.js Example Demos</h1>
           >Switch graph mode</a
         >
       </div>
-      <div class="cards">
-        <a href="./examples/netjson-updateData.html" target="_blank"
-          >Update data realtime</a
-        >
-      </div>
       <div class="cards">
         <a href="./examples/netjsongraph-nodeExpand.html" target="_blank"
           >Nodes expand or fold</a