# The broad idea is that we will scrape the data off of a website. Let's say a bit coin website. That website updates data every 5 seconds. In order to livestream the data and plot it, we will continue to use the update function from the streaming.py script but instead of using a random number generator we will refer to another function that returns the value from the website. Also we would want to have a date time axis for x-axis.

from bokeh.io import curdoc
from bokeh.models import ColumnDataSource, DatetimeTickFormatter
from bokeh.plotting import figure
from random import randrange
import requests
from bs4 import BeautifulSoup
from datetime import datetime
from math import pi

#Creat figure
f= figure(x_axis_type = 'datetime') #set x axis as datetime axis

#create webscraping function
def extract_value():
    r = requests.get("https://bitcoincharts.com/markets/okcoinCNY.html", headers = {'User-Agent': 'Chrome/61'})
    c = r.content
    soup = BeautifulSoup(c)
    value_raw = soup.find_all("p")
    value_net = float(value_raw[1].span.text)
    return value_net

#create ColumnDataSource
source = ColumnDataSource(dict(x=[], y= [])) #Note x and y are empty. Different from FinancialStreamingData.py

#create glyphs
f.circle(x='x', y='y', color='brown', line_color='yellow', source = source)
#You can also add lines connecting these Points
f.line(x='x', y='y', source=source)


#create periodic function
def update():
    new_data = dict(x=[datetime.now()], y= [extract_value()])
    source.stream(new_data, rollover= 200) #shows 200 points at a time
    print(source)

#create datetime format - refer here: https://bokeh.pydata.org/en/latest/docs/reference/models/formatters.html
f.xaxis.formatter=DatetimeTickFormatter(
seconds=["%Y-%m-%d-%H-%m-%S"],
minsec=["%Y-%m-%d-%H-%m-%S"],
minutes=["%Y-%m-%d-%H-%m-%S"],
hourmin=["%Y-%m-%d-%H-%m-%S"],
hours=["%Y-%m-%d-%H-%m-%S"],
days=["%Y-%m-%d-%H-%m-%S"],
months=["%Y-%m-%d-%H-%m-%S"],
years=["%Y-%m-%d-%H-%m-%S"],
)

f.xaxis.major_label_orientation = pi/4

curdoc().add_root(f)
curdoc().add_periodic_callback(update, 10000) #1000 ms = 1 second. Function update will get updated every 10 Second