Added ability to generate a basic chart using chart.js
This commit is contained in:
@ -9,6 +9,7 @@
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.7/js/bootstrap.min.js"></script>
|
||||
<script src="/js/bedabin.js"></script>
|
||||
{% block scripts %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
{% include 'partials/navbar.twig' %}
|
||||
|
@ -2,6 +2,12 @@
|
||||
|
||||
{% block title %}Dashboard{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" charset="utf-8"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" charset="utf-8"></script>
|
||||
<script src="/js/reports.js" charset="utf-8"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="row">
|
||||
@ -13,16 +19,16 @@
|
||||
<hr>
|
||||
|
||||
<div class="row">
|
||||
<div class="five columns">
|
||||
<select id="report-benchmarks" class="u-full-width">
|
||||
<div class="col-5">
|
||||
<select id="report-benchmarks" class="form-select">
|
||||
{% for b in benchmarks %}
|
||||
<option value="{{ b.id }}">{{ b.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="seven columns">
|
||||
<select id="report-tests" class="u-full-width" multiple>
|
||||
<div class="col-7">
|
||||
<select id="report-tests" class="form-select" multiple>
|
||||
{% for t in benchmarks[0].tests %}
|
||||
<option value="{{ t.id }}">{{ t.title }}</option>
|
||||
{% endfor %}
|
||||
@ -30,4 +36,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<button id="reports-button" class="btn btn-primary" type="button" name="button">Generate Chart</button>
|
||||
<button id="reports-download" class="btn btn-primary" type="button" name="button" disabled>Download Chart</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-5">
|
||||
<canvas id="benchmark-chart" width="800" height="400"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
Reference in New Issue
Block a user