JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$(document).ready(function () {
function parseData(data) {
var data = JSON.parse(event.data);
var dates = $.map(data.payload.now_str.split("-"), function(s) { return parseInt(s); });
var year = dates[0];
var month = dates[1] - 1;
var day = dates[2];
var hour = dates[3];
var minute = dates[4];
var second = dates[5];
var x = new Date(year, month, day, hour, minute, second);
var y = parseInt(data.payload.participants_text.replace(",", ""));
return [x, y];
}
Highcharts.setOptions({
global: {
useUTC: false
}
});
var socket = new WebSocket("wss://wss.redditmedia.com/thebutton?h=aebb1b65a8906454ef0e30840c0f1efcf6c92ae5&e=1428018254");
socket.onopen = function(event) {
console.debug('Opened. Waiting for initial data.');
}
var data = [];
socket.onmessage = function(event) {
data.push(parseData(event.data));
console.debug('Waiting for more data...');
if(data.length > 2) {
socket.close();
console.debug('Creating chart...');
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
var series = this.series[0];
var socket = new WebSocket("wss://wss.redditmedia.com/thebutton?h=dc548828730e7719a906a829ffcbce780f784691&e=1428014361");
socket.onopen = function(event) {
...