I have a Django Template with a table - result of an iteration.
I am trying to integrate Google Charts in my HTML page for every record, eg. Google Pie Chart.
https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/gallery/piechart.html
It works, but the Google chart appears only once irrespective of number of iterations in a loop. And it appears on the same place
Is there a way to display different charts for every row in a loop, using Google Charts?
Is Google Charts the proper solution for such a task? Which simple visualization package could be a solution.
Thank you.
Have just got it.
The values in the fuction must be changed in every iteration
This is a template, which is responsible for charting.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load Charts and the corechart and barchart packages.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart_Absatz);
function drawChart_Absatz() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['2016', {{c.abs_2016__sum}}],
['2017', {{c.abs_2017__sum}}],
['2018', {{c.abs_2018__sum}}],
['2019', {{c.abs_2019__sum}}],
]);
var barchart_options = {title:'Absatz, Stueck',
width:300,
height:200,
colors: ['#A52A2A', '#A52A2A', '#A52A2A', '#A52A2A'],
legend: 'none'};
var barchart = new google.visualization.BarChart(document.getElementById('a{{c.tmp_code}}'));
barchart.draw(data, barchart_options);
}
</script>
<body>
<!--Table and divs that hold the pie charts-->
<table class="columns">
<tr>
<td><div id="b{{a.tmp_code}}" style="border: 1px solid #ccc"></div></td>
</tr>
</table>
</body>
</html>
Please pay attention that the function must be renamed for every iteration.
This is a newly generated name of the draw() function: a{{c.tmp_code}}. I add a letter "a" in front of the function name, because I have three columns in my table. The draw() function for the second column gets "b", and the third one "c".
And here is the template, which prints the table with embedded charts after every row. I have actually 3 charts after every row, because I have three columns of data.
<div class="table-responsive-sm">
<table class="table table-sm" >
<thead>
<tr class="bg-primary text-white">
<th>Code</th>
<th>Bezeichnung</th>
<th class="bg-dark text-right scope="col">Abs.16</th>
<th class="bg-dark text-right scope="col">Abs.17</th>
<th class="bg-dark text-right scope="col">Abs.18</th>
<th class="bg-dark text-right scope="col">Abs.19</th>
<th class="text-right scope="col">N.erl.16</th>
<th class="text-right scope="col">N.erl.17</th>
<th class="text-right scope="col">N.erl.18</th>
<th class="text-right scope="col">N.erl.19</th>
<th class="bg-dark text-right scope="col">DB2 16</th>
<th class="bg-dark text-right scope="col">DB2 17</th>
<th class="bg-dark text-right scope="col">DB2 18</th>
<th class="bg-dark text-right scope="col">DB2 19</th>
</tr>
</thead>
{% for c in qset %}
<tr class="bg-light">
<td>{{c.tmp_code}}</td>
<td>{{c.tmp_descr}}</td>
<td class="bg-secondary text-white text-right">{{c.abs_2016__sum}}</td>
<td class="bg-secondary text-white text-right">{{c.abs_2017__sum}}</td>
<td class="bg-secondary text-white text-right">{{c.abs_2018__sum}}</td>
<td class="bg-secondary text-white text-right">{{c.abs_2019__sum}}</td>
<td class="text-right">{{c.nerl_2016__sum|floatformat}}</td>
<td class="text-right">{{c.nerl_2017__sum|floatformat}}</td>
<td class="text-right">{{c.nerl_2018__sum|floatformat}}</td>
<td class="text-right">{{c.nerl_2019__sum|floatformat}}</td>
<td class="bg-secondary text-white text-right">{{c.db2_2016__sum|floatformat}}</td>
<td class="bg-secondary text-white text-right">{{c.db2_2017__sum|floatformat}}</td>
<td class="bg-secondary text-white text-right">{{c.db2_2018__sum|floatformat}}</td>
<td class="bg-secondary text-white text-right">{{c.db2_2019__sum|floatformat}}</td>
</tr>
{% block pic1 %}
{% include 'auswertung/chart1.html' %}
{% endblock %}
{% endfor %}
<tr class="bg-primary text-white">
<td class="text-white"></td>
<td class="text-white">TOTAL:</td>
<td class="bg-dark text-right">{{gqset.abs_2016__gsum}}</td>
<td class="bg-dark text-right">{{gqset.abs_2017__gsum}}</td>
<td class="bg-dark text-right">{{gqset.abs_2018__gsum}}</td>
<td class="bg-dark text-right">{{gqset.abs_2019__gsum}}</td>
<td class="text-right text-white">{{gqset.nerl_2016__gsum|floatformat}}</td>
<td class="text-right text-white"">{{gqset.nerl_2017__gsum|floatformat}}</td>
<td class="text-right text-white"">{{gqset.nerl_2018__gsum|floatformat}}</td>
<td class="text-right text-white"">{{gqset.nerl_2019__gsum|floatformat}}</td>
<td class="bg-dark text-right">{{gqset.db2_2016__gsum|floatformat}}</td>
<td class="bg-dark text-right">{{gqset.db2_2017__gsum|floatformat}}</td>
<td class="bg-dark text-right">{{gqset.db2_2018__gsum|floatformat}}</td>
<td class="bg-dark text-right">{{gqset.db2_2019__gsum|floatformat}}</td>
</tr>
{% block pic2 %}
{% include 'auswertung/chart1.html' %}
{% endblock %}
</table>
</div>
Related
new to bootstrap and experimenting on a pet project. am a bit at my wits ends here.
my understanding is if you have <div class="col-sm-12 col-lg-5"> and <div class="col-sm-12 col-lg-7 "> on small screen each would take a new row (12 cols). vs on a large screen they'd share the row (5+7). in my code the second table(fruits) is supposed to share row with the chart on large screens and split on small screen but when I try small screens in debugging mode, the second column with the chart gets pushed out of the parent column (off screen). I have no clue what exactly is wrong here. any help would be appreciated
bellow is a portion of the code
<div class="container">
<div class="row">
<div class="media content-section col-sm-12 col-md-12 col-lg-12">
<form action="" method="post">
{% csrf_token %}
<label class="switch"
><input type="checkbox" id="togBtn" />
<div class="slider round">
<!--ADDED HTML --><span class="on">BUY</span
><span class="off">SELL</span
><!--END-->
</div></label
>
<div class="table-responsive-md">
<table class="table table-sm table-bordered tableformat">
<thead>
SUMMARY
<small class="text-muted"
>(edit cells to adjust position)</small
>
<tr>
<th scope="col">col 1</th>
<th scope="col">col 2</th>
<th scope="col">col 3</th>
<th scope="col">col 4</th>
<th scope="col">col 5</th>
<th scope="col">col 6</th>
<th scope="col">col 7</th>
<th scope="col">col 8</th>
<th scope="col">col 9</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td width="60">
<input
type="text"
maxlength="10"
width="50%"
placeholder="1"
size="10"
/>
</td>
<td width="60">
<input
type="text"
maxlength="10"
width="50%"
size="10"
placeholder="2"
/>
</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-md">
<button
type="button"
class="btn btn-primary btn-sm"
type="submit"
>
update position
</button>
<button
type="button"
class="btn btn-primary btn-sm"
type="submit"
>
reset to default
</button>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="media content-section col-sm-12-col-md-12 col-lg-12">
<div class="col-sm-12 col-lg-5">
<div class="table-responsive-md">
<table
class="table table-sm table-bordered tableformat text-center"
>
<thead>
fruits
<small class="text-muted"
>(hover on terms for quick definitions)</small
>
<tr>
<th scope="col">mango</th>
<th scope="col">banana</th>
<th scope="col">apple</th>
<th scope="col">peach</th>
<th scope="col">grapes</th>
<th scope="col">lemon</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="chart col-sm-12 col-lg-7 overflow-auto">
<div style="width: 560; height: 400;">
<canvas id="plchart"></canvas>
</div>
</div>
</div>
</div>
here is how it looks in debugging mode on large screen vs on small screen. I have in the meta tag <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
solved it. I missed the inner row before the cols.
essentially should be something like container->row->outer col->inner row -> inner-cols. I was doing container->row-> outer col -> inner cols
I would like to test the sortable table with Cypress.io
I follow their page instruction: https://docs.cypress.io/api/commands/trigger.html#Mouse-Events
and it doesn't work...
First: it doesn't move the element
Second: when I see the step by step test on the left side, mouse down and mouse move are located in the same position...
my test
cy.get('.resource-filter-table')
.trigger('mousedown', {witch:1, pageX:188, pageY:196})
.trigger('mousemove', {witch:1, pageX:188, pageY:261})
.trigger('mouseup')
my html
<table class="table table-borderless resource-filter-table">
<thead>
<th scope="col"><input type="checkbox" checked=True class="resourceFilterElementAll" onchange="checkAllResources(this)"></th>
<th scope="col">Line</th>
</thead>
<tbody>
{% for linija in user_lines %}
<tr>
<th><input type="checkbox" checked=True class="resourceFilterElement" onchange="filterOfResources()" id="{{linija.pk}}"></th>
<th class="filter-list-element">{{ linija.line_name}} <i class="filter-list-icon material-icons">drag_handle</i></th>
</tr>
{% endfor %}
</tbody>
</table>
my table looks like
date name place
4.09.2018 jack London
date name place
4.09.2018 ed paris
date name place
5.09.2018 sam istabul
i have problem with using table. i want to show one table my data but , it doesnt work, my program showing all my data different table but i dont want this. how i repair this situation ?
i want to show one header and all my data below from header like this
- date name place
4.09.2018 jack London
4.09.2018 ed paris
5.09.2018 sam istabul
but this situation adding header for all of my data. it shows here
my html codes
thank u for your interest...
<div class="container">
<div class="row">
<div class="col-3">
<a class="btn btn-warning" href="{% url 'ANASAYFA'%}"> ANASAYFA </a>
<br>
{% now "jS F Y H:i" %}
</div>
<div class="col-6">
{% for i in veriler %}
<table class="table table-bordered table-dark">
<thead>
<tr>
<th scope="col">TARİH</th>
<th scope="col">İSİM-SOYİSİM</th>
<th scope="col">VARDİYA BÖLGE</th>
<th scope="col">VARDİYA DÖNEM</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="i.row">{{ i.gun }}</th>
<th>{{ i.personel }}</th>
<th>{{ i.bolge }}</th>
<td>{{ i.vardiya_donemi }}</td>
</tr>
</tbody>
</table>
{% endfor %}
Try this:
<table class="table table-bordered table-dark">
<thead>
<tr>
<th scope="col">TARİH</th>
<th scope="col">İSİM-SOYİSİM</th>
<th scope="col">VARDİYA BÖLGE</th>
<th scope="col">VARDİYA DÖNEM</th>
</tr>
</thead>
<tbody>
{% for i in veriler %}
<tr>
<th scope="i.row">{{ i.gun }}</th>
<th>{{ i.personel }}</th>
<th>{{ i.bolge }}</th>
<td>{{ i.vardiya_donemi }}</td>
</tr>
{% endfor %}
</tbody>
</table>
I am trying to display a hierarchical table as a normal table.
model.py
class Dimension_value(MPTTModel):
name = models.CharField(max_length = 200, null=True, blank = True, default = '')
parent = TreeForeignKey("self", on_delete=models.CASCADE, null=True, blank=True, related_name="children")
class MPTTMeta:
order_insertion_by = ['name']
def __str__(self):
return self.name
views.py
def show_genres(request):
return render(request, "accounts/dimension_detail.html", {'dimensions': Dimension_value.objects.all()})
dimension_detail.html
<div class="container-fluid">
<div class="card">
<div class="card-body">
<h2>My dimensions</h2>
{% load mptt_tags %}
<ul>
{% recursetree dimensions %}
<li>
{{ node.name }}
{% if not node.is_leaf_node %}
<ul class="children">
{{ children }}
</ul>
{% endif %}
</li>
{% endrecursetree %}
</ul>
</div>
</div></div>
Using django-mptt the lists show just fine. However I have no idea how to display this in a normal table.
For example
Europe|The Netherlands|Noord-Holland
Europe|The Netherlands|Zuid-Holland
Europe|Belgium|Vlaanderen
what I currently get
<table>
<thead>
<tr>
<th class="id orderable">ID</th>
<th class="name orderable">Name</th>
<th class="orderable parent">Parent</th>
<th class="asc lft orderable">Lft</th>
<th class="orderable rght">Rght</th>
<th class="asc orderable tree_id">Tree Id</th>
<th class="level orderable">Level</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td class="id">6</td>
<td class="name">Asia</td>
<td class="parent">—</td>
<td class="lft">1</td>
<td class="rght">4</td>
<td class="tree_id">1</td>
<td class="level">0</td>
</tr>
<tr class="odd">
<td class="id">8</td>
<td class="name">Japan</td>
<td class="parent">Asia</td>
<td class="lft">2</td>
<td class="rght">3</td>
<td class="tree_id">1</td>
<td class="level">1</td>
</tr>
<tr class="even">
<td class="id">5</td>
<td class="name">Europe</td>
<td class="parent">—</td>
<td class="lft">1</td>
<td class="rght">8</td>
<td class="tree_id">2</td>
<td class="level">0</td>
</tr>
<tr class="odd">
<td class="id">7</td>
<td class="name">Belgium</td>
<td class="parent">Europe</td>
<td class="lft">2</td>
<td class="rght">7</td>
<td class="tree_id">2</td>
<td class="level">1</td>
</tr>
<tr class="even">
<td class="id">9</td>
<td class="name">Vlaanderen</td>
<td class="parent">Belgium</td>
<td class="lft">3</td>
<td class="rght">4</td>
<td class="tree_id">2</td>
<td class="level">2</td>
</tr>
<tr class="odd">
<td class="id">10</td>
<td class="name">Wallonie</td>
<td class="parent">Belgium</td>
<td class="lft">5</td>
<td class="rght">6</td>
<td class="tree_id">2</td>
<td class="level">2</td>
</tr>
</tbody>
</table>
I am trying to scale a cfdocument item using the scale attribute but it doesn't seem to use the number passed. The end goal is to get this cfdocument to scale to a single page when exported to pdf.
I tried using the method shown here: scale PDF to single page
It just kept looping until the scale value was negative and that threw an error.
I haven't been able to find anything online and am expecting that the scale attribute doesn't work with tables or something like that.
<cfdocument localUrl="no" format="PDF" scale="10" fontembed="false">
<cfoutput>
<body>
<cfdocumentitem type="header">
<img id="logo" style="display:inline-block;float:left;margin-bottom:5px;" src="/images/logo206x40.jpg">
<div style="font-size:20px;display:inline-block;float:right;"> Rubric: #qryRubric.rubric_name#</div>
<div style="width:100%;border-bottom:1px solid black;"></div>
</cfdocumentitem>
<div id="rubric1">
<div style="margin-left: 10%;">
<table class=" table table-hover blue-rubric table-bordered" cellspacing="1">
<thead>
<tr>
<th style="border-right:1px solid #fff"></th>
<th colspan="1000">Achievement Levels</th>
</tr>
<tr>
<th scope="col" class="rounded-firstcol" style="border-right:1px solid #fff;">Criteria Groups</th>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col" class="rounded-lastcol">4</th>
</tr>
</thead>
<tbody>
<tr class="col_A">
<td>something</td>
<td>something</td>
<td>something</td>
<td>something</td>
<td>something</td>
</tr>
<tr class="col_A">
<td>something</td>
<td>something</td>
<td>something</td>
<td>something</td>
<td>something</td>
</tr>
</tbody>
<tfoot>
<tr></tr>
</tfoot>
</table>
</div>
</div>
<cfdocumentitem type="footer">
<div style="width:100%;border-top:1px solid black;font-size:10px;font:Arial;text-align:right;"> #cfdocument.currentpagenumber# of #cfdocument.totalpagecount#</div>
</cfdocumentitem>
</body>
</cfoutput>
I read somewhere that scale changes the size of thumbnails relative to the document or something like that, can anyone confirm or deny this? Any help would be appreciated, thanks.
I haven't used that attribute in quite some time, but if memory serves, I believe that value should be a percentage. For example scale="10%".