francois/HowBadIsMyBatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling chart

Browse Source
This commit is contained in:
Frank Knoll
2024-07-28 10:04:23 +02:00
parent 9d003eccf6
commit 763d0a366b
2 changed files with 24 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/DrugsForPathologies/index.html
View File

@@ -1180,11 +1180,11 @@
<script src="../gentelella/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"
type="text/javascript"></script>
<script
src=" https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js "></script>
src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<!-- FastClick -->
<script src="../gentelella/vendors/fastclick/lib/fastclick.js"></script>
<!-- Custom Theme Scripts -->

47
docs/DrugsForPathologies/js/DrugsChartView.js
View File

@@ -15,31 +15,26 @@ class DrugsChartView {
this.#canvas,
{
type: 'bar',
plugins: [ChartDataLabels],
data: this.#getData(drugDescr),
options: this.#getOptions()
});
}
setData(histoDescr) {
const data = this.#getData(histoDescr);
this.#chart.config.data = data;
this.#chart.update();
}
#getData(drugDescr) {
return {
labels: drugDescr['DRUG'],
datasets: [{
label: 'Fatal',
data: this.#divide(drugDescr['FATAL'], drugDescr['CASES']),
backgroundColor: '#FF0000'
},
{
label: 'Recovered',
data: this.#divide(drugDescr['RECOVERED'], drugDescr['CASES']),
backgroundColor: '#00FF00'
}]
datasets: [
{
label: 'Recovered',
data: this.#divide(drugDescr['RECOVERED'], drugDescr['CASES']),
backgroundColor: '#00FF00'
},
{
label: 'Fatal',
data: this.#divide(drugDescr['FATAL'], drugDescr['CASES']),
backgroundColor: '#FF0000'
}
]
};
}
@@ -51,24 +46,26 @@ class DrugsChartView {
#getOptions() {
return {
plugins: {
datalabels: {
anchor: 'end',
align: 'top'
}
},
title: {
display: true,
position: 'top'
},
scales: {
x: {
title: {
display: true,
text: 'Drug'
}
},
y: {
ticks: {
precision: 0
format: {
style: 'percent'
}
},
title: {
display: true,
text: 'Frequency'
text: 'percentage of reports'
}
}
}