Передача данных в линейную диаграмму D3.js с помощью бэкенда Django

Я следую руководству по созданию приборной панели с помощью графиков D3.js. Я сталкиваюсь с ошибками при передаче данных в график линейной диаграммы. Я использую код, извлеченный из здесь.

Вместо использования данных из csv я хочу использовать данные, извлеченные из базы данных. Я не могу понять, где в коде должны быть ссылки на данные?

Далее следует файл index.html

{% load static %}

<html>
<script src="https://d3js.org/d3.v4.js"></script>

<body> 
    <h1> Hello! </h1>
    <div id="my_dataviz"></div>
</body>

<script>

    // set the dimensions and margins of the graph
    var margin = {top: 10, right: 30, bottom: 30, left: 60},
        width = 460 - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom;
    
    // append the svg object to the body of the page
    var svg = d3.select("#my_dataviz")
      .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");
    
    //Read the data
    // d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/3_TwoNumOrdered_comma.csv",

    var data = {{ AAPL|safe }},
    
      // When reading the csv, I must format variables:
      function(d){
        return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.Close }
      },
    
      // Now I can use this dataset:
      function(data) {
    
        // Add X axis --> it is a date format
        var x = d3.scaleTime()
          .domain(d3.extent(data, function(d) { return d.date; }))
          .range([ 0, width ]);
        svg.append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x));
    
        // Add Y axis
        var y = d3.scaleLinear()
          .domain([0, d3.max(data, function(d) { return +d.value; })])
          .range([ height, 0 ]);
        svg.append("g")
          .call(d3.axisLeft(y));
    
        // Add the line
        svg.append("path")
          .datum(data)
          .attr("fill", "none")
          .attr("stroke", "steelblue")
          .attr("stroke-width", 1.5)
          .attr("d", d3.line()
            .x(function(d) { return x(d.date) })
            .y(function(d) { return y(d.value) })
            )
    
    })
     
</script>
</html>

Далее следует файл views.py

from django.shortcuts import render
from django.http import HttpResponse
from cnxn import mysql_access
import pandas as pd

# Create your views here.
def homepage(request):
    sql = ''' select Date, Close from tbl_historical_prices where ticker = 'AAPL' '''
    cnxn = mysql_access()
    conn = cnxn.connect()
    df = pd.read_sql(sql, con=conn)
    context = {'AAPL':df.to_json()}
    return render(request, 'index.html', context=context)

Я не могу понять, как передать данные из базы данных в javascript. Как я могу передать переменную data внутри javascript?

Редактировать

В настоящее время на странице отображается только Hello. Имеется синтаксическая ошибка, я выделил ошибку из консоли и отображение страницы на картинке ниже.

enter image description here

Переменная d Выход

var d = {"Date":{"0":1641168000000,"1":1641254400000,"2":1641340800000},"Close":{"0":182.01,"1":179.7,"2":174.92}},

Можете попробовать и посмотреть, решит ли это вашу проблему,

var d = {"Date":{"0":1641168000000,"1":1641254400000,"2":1641340800000},"Close":{"0":182.01,"1":179.7,"2":174.92}};

d3.json(d,
  function(d){
  ..
  ..
  },

  function (data){
  ..
  ..

})
Вернуться на верх