I have table of tickers on one HTML page, and four charts displayed on another HTML page. These charts come from my static/images folder full of hundreds of images named by each ETF’s benchmark index ticker. If I click the ETF ticker “PSCD” in the first row of the table, how can it be linked to another HTML page named charts.html which shows four charts whose filenames contain the ETF’s benchmark index ticker, example: chart1/S6COND.jpg, chart2/S6COND.jpg, chart3/S6COND.jpg, chart4/S6COND.jpg. ← In this example, I hardcoded S6COND.jpg into the link, and it works…but I need it to be dynamically tied to the index ticker of whatever etf ticker row I click on in the table. The index ticker for each ETF for each row in the table is included in my models.py which you can see below.
In the charts.html code example below, I hardcoded S6COND into the image tag but I want this dynamically linked.
Below you will see my table.html page showing my table from above. Next is the charts.html where I would like the etf_ticker that was clicked in that table to be entered into the image tags such as <img src="{% static 'myapp/images/chart1_S6COND.jpg' %}" alt="chart1"/></div> where you see I have hardcoded “S6COND” into the image tag. But I need this to be dynamic, from which you click on the link in table.html, and it gets inserted into the image tag in charts.html.
table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ETF Table</title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'myapp/css/table_style.css' %}">
<style type="text/css"></style>
</head>
<body>
<div class="container">
<table id="table" class="table table-dark table-hover table-striped table-bordered table-sm">
<thead>
<tr>
<th data-sortable="true">ETF Ticker</th>
<th>ETF Name</th>
<th>Index Name</th>
</tr>
</thead>
<tbody>
{% if d %}
{% for i in d %}
<tr>
<td><a href="{% url 'myapp:charts' %}" target="_blank">{{i.etf_ticker}}</a></td>
<td><a href="{% url 'myapp:charts' %}" target="_blank">{{i.etf_name}}</a></td>
<td><a href="{% url 'myapp:charts' %}" target="_blank">{{i.index_name}}</a></td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
<script>
$('#table').DataTable({
"bLengthChange": true,
"lengthMenu": [ [20, 50, 100 -1], [20, 50, 100, "All"] ],
"iDisplayLength": 20,
bInfo: false,
responsive: true,
order: [[4, 'desc']],
});
</script>
</div>
</body>
</html>
charts.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charts</title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'myapp/css/charts_style.css' %}">
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a class="nav" href="{% url 'myapp:index' %}">Home</a></li><br><br>
<li><a class="nav" href="{% url 'myapp:table' %}">Table</a></li><br>
</ul>
</nav>
<div class="container">
<div class="box"><img src="{% static 'myapp/images/chart1_S6COND.jpg' %}" alt="chart1"/></div>
<div class="box"><img src="{% static 'myapp/images/chart2_S6COND.jpg' %}" alt="chart2"/></div>
<div class="box"><img src="{% static 'myapp/images/chart3_S6COND.jpg' %}" alt="chart3"/></div>
<div class="box"><img src="{% static 'myapp/images/chart4_S6COND.jpg' %}" alt="chart4"/></div>
</div>
</body>
</html>
urls.py
from django.urls import path
from . import views
from .views import ChartView
app_name = 'myapp'
urlpatterns = [
path('', views.index, name='index'),
path('table/', views.table, name='table'),
path('charts/', ChartView.as_view(), name='charts'),
]
models.py
from django.db import models
class Table(models.Model):
etf_ticker = models.CharField(max_length=10)
etf_name = models.CharField(max_length=200)
index_name = models.CharField(max_length=200)
index_ticker = models.CharField(max_length=200)
views.py
from django.shortcuts import render
from django.views.generic import TemplateView
from .models import Table
def index(request):
return render(request, 'index.html')
def table(request):
data = Table.objects.all().values()
context = {'d': data}
return render(request, 'table.html', context)
class ChartView(TemplateView):
template_name = 'charts.html'
