【Bootstrap】グラフ作成で横軸の日付が表示されなかった理由

2020.12.01
JavaScript備忘録
Bootstrap4, Django, JavaScript, Template, エラー改善, グラフ作成, スクリプト備忘録, ひとりごと, 失敗例

1. 【Bootstrap】グラフ作成で横軸の日付が表示されなかった理由

【Bootstrap】グラフ作成で横軸の日付が表示されなかった理由

DjangoのViews.pyでDBから取得した値をテンプレートに送り、Bootstrapの機能でグラフ化をしようとしました。
で、グラフまでは出力するのですが【X軸(横軸)】のラベルが付いてくれず3時間ほど右往左往。
　※日付が無いのでどの時点の値かわからない。

ちなみに、私が利用させていただいたテンプレートは【gentelella】です。

原因は…秒かマイクロ秒かという問題

解ってしまえば「あぁ～」という原因なんですけど、Timespanの中身の数字なんて普段見ないですからね。
気付くまで原因として全く考えてませんでした。

■2020年1月1日のTimespan表記

マイクロ秒：1577804400000
秒：1577804400

それぞれのテンプレートで渡すTimespanの形式は違うかもしれませんが、今回は【マイクロ秒】が正解でした。
これを秒で送っていたので日付が表示されなかったようです。

記載したスクリプト

■ views.py ※マイクロ秒

import logging
from django.shortcuts import render
from django.views import generic
from .models import Weekly_quantity

logger = logging.getLogger(__name__)

def ContentIndexView(request):
    data = Weekly_quantity.objects.order_by('end_date')

    test_plot = [
    	[1577844574000,40],
    	[1578582000000,30],
    	[1579446000000,10],
    	[1580310000000,5],
    	[1580482800000,10],
    	[1581260400000,10],
    	[1582124400000,20],
    	[1582988400000,1],
    	[1583766000000,3],
    	[1584630000000,4],
    	[1585494000000,8],
    	[1585666800000,9],
    	[1586444400000,10],
    	[1587308400000,10],
    	[1588172400000,20],
    	[1588258800000,60],
    	[1589036400000,60],
    	[1589900400000,40],
    	[1590764400000,20],
    	[1590937200000,30],
    	[1591714800000,15],
    	[1592578800000,18],
    	[1593442800000,12],
    	[1593529200000,10],
    	[1594306800000,5],
    	[1595170800000,5],
    	[1596034800000,0],
    	[1596207600000,2],
    	[1596985200000,1],
    	[1597849200000,6],
    	[1598713200000,3],
    	[1598886000000,8],
    	[1599663600000,20],
    	[1600527600000,10],
    	[1601391600000,11],
    	[1601478000000,19],
    	[1602255600000,10],
    	[1603119600000,6],
    	[1603983600000,9],
    	[1604156400000,15],
    	[1604934000000,10],
    	[1605798000000,8],
    	[1606662000000,3],
    	[1606748400000,5]
    ]

    params = {
        'title': 'コンテンツ数',
        'data': data,
        'js': test_plot
    }
    return render(request, 'index.html', params)

import logging

from django.shortcuts import render

from django.views import generic

from .models import Weekly_quantity

logger = logging.getLogger(__name__)

def ContentIndexView(request):

data = Weekly_quantity.objects.order_by('end_date')

test_plot = [

[1577844574000,40],

[1578582000000,30],

[1579446000000,10],

[1580310000000,5],

[1580482800000,10],

[1581260400000,10],

[1582124400000,20],

[1582988400000,1],

[1583766000000,3],

[1584630000000,4],

[1585494000000,8],

[1585666800000,9],

[1586444400000,10],

[1587308400000,10],

[1588172400000,20],

[1588258800000,60],

[1589036400000,60],

[1589900400000,40],

[1590764400000,20],

[1590937200000,30],

[1591714800000,15],

[1592578800000,18],

[1593442800000,12],

[1593529200000,10],

[1594306800000,5],

[1595170800000,5],

[1596034800000,0],

[1596207600000,2],

[1596985200000,1],

[1597849200000,6],

[1598713200000,3],

[1598886000000,8],

[1599663600000,20],

[1600527600000,10],

[1601391600000,11],

[1601478000000,19],

[1602255600000,10],

[1603119600000,6],

[1603983600000,9],

[1604156400000,15],

[1604934000000,10],

[1605798000000,8],

[1606662000000,3],

[1606748400000,5]

]

params = {

'title': 'コンテンツ数',

'data': data,

'js': test_plot

}

return render(request, 'index.html', params)

■ index.html

{% extends "base_site.html" %}

{% block title %} Dashboard 2 {% endblock title %}

{% block stylesheets %}
  {{ block.super }}
{% endblock stylesheets %}

{% block content %}
(中略)

            <div class="x_content">
              <div class="col-md-9 col-sm-12 col-xs-12">
                <!-- グラフ -->
                <div class="demo-container" style="height:280px">
                  <div id="chart_plot_02" class="demo-placeholder"></div>
                </div>
                <!-- グラフここまで -->
(中略)
{% endblock content %}

{% block javascripts %}
(中略)
  <!-- JSに変数登録 -->
  <script>
    var chart_plot_02_data = {{ js|safe }}
  </script>
{% endblock javascripts %}

{% extends "base_site.html" %}

{% block title %} Dashboard 2 {% endblock title %}

{% block stylesheets %}

{% endblock stylesheets %}

{% block content %}

(中略)

</div>

(中略)

{% endblock content %}

{% block javascripts %}

(中略)

var chart_plot_02_data = {{ js|safe }}

</script>

{% endblock javascripts %}

　※マイクロ秒にしたら日付が表示された

サンプルのグラフを生成していたJavaScript

#custom.js 内

var chart_plot_02_data = [];

    for (var i = 0; i < 20; i++) {
        chart_plot_02_data.push([
            new Date(Date.today().add(i).days()).getTime(), randNum() + i + i + 10
        ]);
    }

#custom.js 内

var chart_plot_02_data = [];

for (var i = 0; i < 20; i++) {

chart_plot_02_data.push([

new Date(Date.today().add(i).days()).getTime(), randNum() + i + i + 10

]);

}

20個のレコードを[ new Date(Date.today().add(i).days()).getTime(), randNum() + i + i + 10 ] で生成しています。
getTime()なので日付をタイムスパンに変更しているわけですが、これが【秒】ではなく【マイクロ秒】になります。

まとめ

いやぁ、思わぬところで躓いた感じで疲れました。

気付いてしまえば簡単なんですけどねぇ。

【Bootstrap】グラフ作成で横軸の日付が表示されなかった理由

【Bootstrap】グラフ作成で横軸の日付が表示されなかった理由

原因は…秒かマイクロ秒かという問題

記載したスクリプト

サンプルのグラフを生成していたJavaScript

まとめ

関連

【Django】SQLに格納したHTMLをタグを含めそのまま出力する 2020.11.30

【Django】ページ閲覧に『ログイン必須』の規制を掛ける方法 2020.12.02

【Bootstrap】グラフ作成で横軸の日付が表示されなかった理由

【Bootstrap】グラフ作成で横軸の日付が表示されなかった理由

原因は…秒かマイクロ秒かという問題

記載したスクリプト

サンプルのグラフを生成していたJavaScript

まとめ

共有:

関連

【Django】SQLに格納したHTMLをタグを含めそのまま出力する 2020.11.30

【Django】ページ閲覧に『ログイン必須』の規制を掛ける方法 2020.12.02