amchartsを使って無料でワードプレスにSQLデータベースから取得したデータを反映させたレスポンシブ折れ線グラフを作成する方法

現在自分は個人の実益もかねて、投資の役に立つデータを収集したホームページを作成しています。

村越誠の新投資資本主義

投資関連データ収集サイトということもあり、収集したデータをレスポンシブグラフとして表示させたいというニーズがあり、レンタルサーバーのSQLデータベースのデータから自動でレスポンシブグラフが作成できる方法を探していました。
グラフ作成プラグインは色々あったのですが、残念ながらレンタルサーバーのphpmyadminから取得したデータをレスポンシブにグラフ化させる機能は全部有料で年間にウン万円みたいな支払いが必要になることがわかりました。
唯一無料でレスポンシブにグラフを作成できるプラグインであるSQL Charts Builderは残念ながらY軸に設定できる要素が1個しかなく、複数の折れ線グラフをグラフ内で表示させることができません。
（しかも折れ線グラフだとX軸表示ができない）

なんとかして無料でSQLデータベースからデータを自動取得してレスポンシブな折れ線グラフをワードプレスに投稿することができないかと探したところ、それを実現できるプラグインとしてamchartsというのを発見しました。

しかし実際に折れ線グラフ表示させるようになるまでは色々な手順が必要になることがわかり、あーだこーだ色々工夫したところこれなら無料でグラフが作成できるということがわかり、これを利用して様々な投資データを時系列レスポンシブグラフによって表示させることができるようになりました。

現在自作HPで投稿しているグラフはこのamchartsを使用してレスポンシブ折れ線グラフを作成しています。
またデータ取得もPythonで自動化させていますので、データ取得からSQLデータベースを更新し、さらにそれをグラフに反映させるところまで自動化させています。

今回はこのamchartsを使ってどうやってSQLデータベースから自動でデータを取得してレスポンシブな折れ線グラフを表示させるかを記載したいと思います。

なお、発見して理解するまでかなり時間がかかりましたので有料とさせていただければと思います。
（普通に調べるとすごく時間がかかると思います。）