JSFiddle - React, Tailwind, and code Playground

by mschultz

HTML

<html>
	<head>
	<script src='http://cdn.zingchart.com/zingchart.min.js'></script>
	</head>
	<body>
		<div id='feed'></div>
	</body>
</html>

JavaScript

zingchart.render({
            "id" : "feed",
            height: 400, 
	        width: 600,
            "data":{
                "type":"line",
                "title":{
                "text":"External WebSocket Transport"
                },
                "scale-x":{
                    "transform":{
                        "type":"date",
                        "text":"%d %M %Y<br>%g:%i:%s",
                        "item":{
                            "visible":0
                        }
                    }
                },
                "series":[{"values":[]}]
             }
        });

//Set up of a websocket
var ws = new WebSocket('ws://65.50.232.201:8888/', 'zingchart');

//Tell our internal server what to send.
ws.onopen = function(){
    ws.send('zingchart.feed');
    ws.send('zingchart.push');
    ws.send('zingchart.getdata');
}

//Setup an event to call a ZingChart API Method to update our chart.
ws.onmessage = function (e) {
    var data = JSON.parse(e.data);
    var newValue = data['plot0'][1];
    var time = data['plot0'][0];
    
  zingchart.exec('feed', 'appendseriesvalues', {
      plotindex : 0,
      values : [[time,newValue]]
  });
  
};