Black Lives Matter. Please consider donating to Black Girls Code today.

Dash Live streaming stops working

Hi,
I’m new to Dash. But I really loved the way it works.

I’m trying to implement a certain live streaming code for stocks which plots the graph by reading it from an external dictionary variable.
I’m sure that I get data continuously. However, this live streaming works perfectly only for 15 minutes and then it stops working. I have to restart the app which I’m not interested in doing so.
Please guide me to solve this.

Also, if I zoom during streaming, it resets my scale because of interval time. How can I fix this ?

Here is my code:

	# Import statements
# Importing external python script which is useful in handling the stock data
from StockData import StockData
# dash is an open source graph and dashboard building framework using PlotLy and Flask
import dash
# dcc contains the core graph components
import dash_core_components as dcc
# for javascript and css especially for html components such as id and div
import dash_html_components as html
# for live events
from dash.dependencies import Event
# working with data-frames and datetime series
import pandas as pd


class ChartPlot:
	"""
	Everything related to plotting chart should be inside this class
	Once I initiate the class from the Main.py file, it should start plotting
	StockData.data_dictionary has the data
	"""

	def __init__(self, title="STOCK CHARTS"):
		"""
		Initialising the dash app
		:param title: title of the graph
		"""

		# Name of the app - stock-tickers
		app = dash.Dash('stock-tickers')

		# TITLE OF THE APP - THAT WILL BE REFLECTED ON THE TAB
		app.title = title

		external_css = ["https://fonts.googleapis.com/css?family=Product+Sans:400,400i,700,700i",
						"https://cdn.rawgit.com/plotly/dash-app-stylesheets/2cc54b8c03f4126569a3440aae611bbef1d7a5dd/stylesheet.css"]

		for css in external_css:
			app.css.append_css({"external_url": css,
								'modeBarButtonsToRemove': ['sendDataToCloud'], 'displaylogo': False})

	
	def plot_live(self, stock_symbols=StockData.symbol_list, hostname='127.0.0.1', port=5000):
		app = self.app

		# LAYOUT OF OUR APPLICATION
		app.layout = html.Div([

			# THE FIRST LINE DESIGN
			html.Div([

				html.H2('STOCK CHARTS',
						# styling can be customised here for title
						style={'display': 'inline',
							   'float': 'left',
							   'font-size': '2.65em',
							   'margin-left': '7px',
							   'font-weight': 'bolder',
							   'font-family': 'Product Sans',
							   'color': "rgba(117, 117, 117, 0.95)",
							   'margin-top': '20px',
							   'margin-bottom': '0'
							   })
			]),

			# DROP DOWN FROM THE AVAILABLE TICKERS
			# we are using the stock_symbols from the stock_symbols StockData.symbol_list
			dcc.Dropdown(
				id='stock-ticker-input',
				options=[{'label': s, 'value': s}
						 for s in stock_symbols],
				# DEFAULT VALUE - CAN BE EMPTY AS WELL
				value=[stock_symbols[0]],
				# INDICATES MULTIPLE SELECTION IS POSSIBLE
				multi=True
			),
			dcc.Checklist(
				id='check-list-input',
				options=[
					{'label': 'High', 'value': 'High'},
					{'label': 'Low', 'value': 'Low'}
				],
				values=['High', 'Low'],
				labelStyle={'display': 'inline-block'}
			),
			# WHERE THE GRAPHS ARE APPEARED
			html.Div(id='graphs'),

			# INTERVAL FOR UPDATING
			dcc.Interval(
				id='graph-update',
				# 1000 MILLI-SECONDS
				interval=1 * 1000
			),
		], className="container")
		# BOOTSTRAP CONTAINER CLASS

		# CALL BACK FUNCTION DECORATOR - DEFAULT
		@app.callback(
			# WHERE THE OUTPUT IS EXPECTED
			dash.dependencies.Output('graphs', 'children'),
			# WHAT IS THE INPUT FOR THE OUTPUT
			[dash.dependencies.Input('stock-ticker-input', 'value'),
			 dash.dependencies.Input('check-list-input', 'values')],
			# ANY SPECIFIC EVENTS - HERE UPDATING BASED ON INTERVAL
			events=[Event('graph-update', 'interval')])
		def update_graph(symbols, checkers):
			"""
			This plots the graphs based on the symbol selected
			:param symbols: list of available symbols
			:return: graphs with high and low values
			"""
			# Total graphs
			graphs = list()
			# where all the data is present
			data = list()
			# running through the selected tickers
			for i, symbol in enumerate(symbols):
				# StockData has data_dictionary with symbols as keys containing time stamp, high and low data for particular key
				data_dictionary = StockData.data_dictionary[symbol]
				# Extracting data out of selected data frame
				if len(checkers) == 2:
					
					graph_data = [{'x': pd.to_datetime(data_dictionary['Time Stamp']), 'y': data_dictionary['High'],
								   'type': 'line', 'name': str(symbol) + " High"},
								  {'x': pd.to_datetime(data_dictionary['Time Stamp']), 'y': data_dictionary['Low'],
								   'type': 'line', 'name': str(symbol) + ' Low'}]

				elif 'High' in checkers:
					graph_data = [{'x': pd.to_datetime(data_dictionary['Time Stamp']),
								   'y': data_dictionary['High'],
								   'type': 'line', 'name': str(symbol) + " High"}]
				elif 'Low' in checkers:
					graph_data = [{'x': pd.to_datetime(data_dictionary['Time Stamp']),
								   'y': data_dictionary['Low'],
								   'type': 'line', 'name': str(symbol) + ' Low'}]
				else:
					graph_data = None
				# adding to total data
				data.extend(graph_data)
				
			# DRAWING THE GRAPH
			graphs = [dcc.Graph(
				figure={
					'data': data,
					'layout': {"hovermode": "closest", "spikesnap": "cursor",
					   "xaxis": {"showspikes": True, "spikemode": "across"},
					   "yaxis": {"showspikes": True, "spikemode": "across"}}
				},

				config={'modeBarButtonsToRemove': ['sendDataToCloud'], 'displaylogo': False}
			)]

			return graphs

		app.run_server(debug=True, host=hostname, port=port)

Kindly let me know if I’m doing it wrong anywhere