Pythonのplotlyで作ったグラフをWordPressで動かす

こんにちは！
なおき(@waste_investor)です！

今回はグリグリ動かせるおもしろグラフをWordPressに貼る方法を解説します。

グリグリ動かせます

まず始めに、他にもこんなことができるという例からまとめていきます。

ダウ平均 S&P500 ナスダックの値動き率をプロット

ダウ平均、S&P500、ナスダックの1年間の値上がり比率をプロットしました。

この１年間ではナスダックが最も上昇したようですが、S&P500もダウ平均も負けず劣らずの上昇率です。

タップで拡大や、凡例をクリックすると、表示をはずしたり、つけたりできるよ！

スマホだと見づらくてすみません。

上のグラフの下の画像はこの画像です。

この画像のR(赤)チャンネルだけ取り出して、縦軸をRチャンネルの大きさにしてプロットしています。

普段何気なく見ているものでも、見かたを変えれば新しい発見があるかもしれません。

plotlyのグラフをWordPressに貼り付ける

ここからは、Pythonのplotlyで作成したグラフをWordPressに貼り付ける方法を解説します。

plotlyは、作成したグラフのhtmlを出力できるので普段のプレゼンで活用すれば、他の人と一風変わったプレゼン資料になること間違いなしです。

準備

モジュールインストール

plotly、chart-studioをインストールします。

pip install plotly

1	pip install plotly

pip install chart-studio

1	pip install chart-studio

chart studioに登録

plotly chartstudioに登録します。

plotlyからchart studioに図を出力して、chart stuioのパスをWordPressに貼り付けると、自分のWordPressで図を表示することができます。

メールアドレス程度の情報で登録できるので、比較的簡単に登録できます。

APIキーを取得します。

chart studioの右上から「setting」→「API Keys」より自分のAPIキーを確認します。

これで準備は終わりです。

plotlyでプロットしてWordPressにグラフを貼り付ける

1つ目で紹介した公式ページにあったグラフを作成して貼りつけてみます。

import pandas as pd
import plotly.graph_objs as go
import chart_studio.plotly as py

# データ読み込み
z_data = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv')

# プロット
fig = go.Figure(data=[go.Surface(z=z_data.values)])

# chart studioにグラフを出力
py.iplot(fig)

import pandas as pd

import plotly.graph_objs as go

import chart_studio.plotly as py

# データ読み込み

z_data = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv')

# プロット

fig = go.Figure(data=[go.Surface(z=z_data.values)])

# chart studioにグラフを出力

py.iplot(fig)

py.iplot(fig)でchart studio上にグラフを生成します。

普通に自分の環境でグラフを見るだけなら、fig.show()で大丈夫です。

出力された画像で「EDIT CHART」を押してchart studioのページにいきます。

chart studioページの左にある「Share」、「Embed」の順に選択し、表示されたiframeをWordPressの編集画面の「テキスト」の方に貼り付ければWordPress上でもグラフを動かすことができます。

割と簡単にWordPressに貼り付けることができました。

プレゼンの資料もかっこいいものを作れるようになっていきたいですね。

せっかくなので、株のチャートを作成したコードも貼っておきます。

import datetime
import plotly.graph_objs as go
import chart_studio.plotly as py
from pandas_datareader import data

# 現在日
dt_now = datetime.datetime.now()
# １年前
dt_start = datetime.datetime(dt_now.year-1, dt_now.month, dt_now.day)

# 1年分の株価データを取得
# ダウ
dji_df = data.DataReader(data_source='yahoo', name='^DJI',start=dt_start,end=dt_now)
# S&P500
sp500_df = data.DataReader(data_source='yahoo', name='^GSPC',start=dt_start,end=dt_now)
# ナスダック
nasdaq_df = data.DataReader(data_source='yahoo', name='^IXIC',start=dt_start,end=dt_now)

# 値動き率を算出
dji_df['Rate'] = dji_df['Close'] / dji_df['Close'].iloc[0]
sp500_df['Rate'] = sp500_df['Close'] / sp500_df['Close'].iloc[0]
nasdaq_df['Rate'] = nasdaq_df['Close'] / nasdaq_df['Close'].iloc[0]

x = np.arange(0, len(df), 1)

# プロット
fig = go.Figure(
    data=[
         go.Scatter(x=[x.strftime('%Y-%m-%d') for x in sp500_df.index], y=sp500_df['Rate'], name = 'S&P500', showlegend=True),
         go.Scatter(x=[x.strftime('%Y-%m-%d') for x in sp500_df.index], y=dji_df['Rate'], name = 'DJI', showlegend=True),
         go.Scatter(x=[x.strftime('%Y-%m-%d') for x in sp500_df.index], y=nasdaq_df['Rate'], name = 'NASDAQ', showlegend=True)])

# 縦軸
fig.update_yaxes(title_text="Rate")

# chart-studioにグラフを出力
py.iplot(fig)

import datetime

import plotly.graph_objs as go

import chart_studio.plotly as py

from pandas_datareader import data

# 現在日

dt_now = datetime.datetime.now()

# １年前

dt_start = datetime.datetime(dt_now.year-1, dt_now.month, dt_now.day)

# 1年分の株価データを取得

# ダウ

dji_df = data.DataReader(data_source='yahoo', name='^DJI',start=dt_start,end=dt_now)

# S&P500

sp500_df = data.DataReader(data_source='yahoo', name='^GSPC',start=dt_start,end=dt_now)

# ナスダック

nasdaq_df = data.DataReader(data_source='yahoo', name='^IXIC',start=dt_start,end=dt_now)

# 値動き率を算出

dji_df['Rate'] = dji_df['Close'] / dji_df['Close'].iloc[0]

sp500_df['Rate'] = sp500_df['Close'] / sp500_df['Close'].iloc[0]

nasdaq_df['Rate'] = nasdaq_df['Close'] / nasdaq_df['Close'].iloc[0]

x = np.arange(0, len(df), 1)

# プロット

fig = go.Figure(

data=[

go.Scatter(x=[x.strftime('%Y-%m-%d') for x in sp500_df.index], y=sp500_df['Rate'], name = 'S&P500', showlegend=True),

go.Scatter(x=[x.strftime('%Y-%m-%d') for x in sp500_df.index], y=dji_df['Rate'], name = 'DJI', showlegend=True),

go.Scatter(x=[x.strftime('%Y-%m-%d') for x in sp500_df.index], y=nasdaq_df['Rate'], name = 'NASDAQ', showlegend=True)])

# 縦軸

fig.update_yaxes(title_text="Rate")

# chart-studioにグラフを出力

py.iplot(fig)

Pythonはなんでもできる便利ツールで、実行環境も無料で作れるので気軽に勉強できます。

興味があればこんな本から勉強を始めてみてはいかがでしょうか。

プログラミングを少し学んでおいて「こんなことができる」ということがわかれば、本業や副業の時間短縮の手助けになることが多いと思います。

Pythonを勉強している仲間も募集中です。

気軽にTwitterにお声がけください。

ダウ平均 S&P500 ナスダック の値動き率をプロット

plotlyのグラフをWordPressに貼り付ける

準備

モジュールインストール

chart studioに登録

plotlyでプロットしてWordPressにグラフを貼り付ける

ダウ平均 S&P500 ナスダックの値動き率をプロット