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

2020年12月1日 2020年12月1日

akinori

【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)

■ 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 %}

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

サンプルのグラフを生成していた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
        ]);
    }

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