Chartjs-Django App: Chart.js is ignoring my options

by

0👍

In case someone else is stuck with using old commands (Chart.js 3x vs Chart.js 4x), here is the way I made it work following the feedback I received here:

{% extends 'base.html' %}

{% block content %}
  <form method="post">
    {% csrf_token %}
    <br/>
      &nbsp;<label for="ticker">Enter ticker:</label>
      <input type="text" name="ticker" id="ticker" value="">
      <label for="timeframe">Enter timeframe:</label>
      <select name="timeframe" id="timeframe">
        <option value="1d" {% if chart_data.timeframe == "1d" %}selected{% endif %}>1 day</option>
        <option value="1wk" {% if chart_data.timeframe == "1wk" %}selected{% endif %}>1 week</option>
        <option value="30m" {% if chart_data.timeframe == "30m" %}selected{% endif %}>30 minutes</option>
        <option value="5m" {% if chart_data.timeframe == "5m" %}selected{% endif %}>5 minutes</option>
      </select>
      &nbsp; 
      <button type="submit" class="btn btn-primary"
          style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">Run</button>
    </form>
    {% if chart_data %}
      <div>
        {% if chart_data.latest_price %}
          <br/>
          &nbsp;<h1 class="display-4"><b>{{ chart_data.selected_ticker }}</b>: {{ chart_data.latest_price }}</h1>
        {% endif %}
      </div>
      <div class="chart-container" style="position: absolute; height:600px; width:70vw">
        <canvas id="stock-chart"></canvas>
        <div id="chart-text" style="position: absolute; top: 0; right: 0; padding: 0px;"></div>
      </div>
      <div class="chart-container" style="position: relative; height:600px; width:70vw">
        <canvas id="trend-chart"></canvas>
        <div id="trend-chart-text" style="position: absolute; top: 0; right: 0; padding: 0px;"></div>
      </div>
      <div id="chart-bottom-text"></div>
      <script>
          var chartData = {
            labels: {{ chart_data.labels|safe }},
            datasets: [{
              label: 'Closing price',
              data: {{ chart_data.data|safe }},
              borderColor: 'blue',
              fill: false,
              yAxisID: 'y1',
              pointRadius: 0.1,
            }, {
              label: 'Aggregated cycle',
              data: {{ chart_data.aggregated_cycle_extended|safe }},
              borderColor: 'red',
              fill: false,
              yAxisID: 'y2',
              pointRadius: 0.1,
            }]
          };
          </script>
        <script>
          var ctx = document.getElementById('stock-chart').getContext('2d');
          var myChart = new Chart(ctx, {
            type: 'line',
            data: chartData,
            options: {
              scales: {
                y2: {
                  display: false,
                  grid: {
                    tickLength: 0,
                    drawBorder: false,
                    display: false
                  }
                },
                x: {
                  grid: {
                    display: true
                  }
                }
              }
            }
                      });
          var chartText = document.getElementById('chart-text');
          chartText.innerHTML = "<p style='font-size: 12px;'>Cycle-Detrended Prices correlation: " + {{ chart_data.correlation|safe }} + '%</p>';
        </script>
      {% endif %}
{% endblock %}

Leave a comment