I draw a chart in chartjs. In my chartjs code my data source is an excel file. I can change this data source in js file. but I want to access to this data source in my html code and change it when the user select another excel file in dropdownlist. how can I do this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>chartjs-plugin-datasource sample</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Indie+Flower">
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
background-color: rgb(255, 255, 255);
display: inline-block;
}
.chart {
margin: auto;
width: 75%;
}
th {
background-color: #eeeeee;
text-align: center;
}
td {
width: 33.3%;
}
</style>
</head>
<body>
<br>
<script>
function updateChart(BudgetConfig) {
//BudgetConfig.options.title.text="hi"
BudgetConfig.plugins.url = './Results.xlsx'
BudgetConfig.update();
}
</script>
<br>
<div class="container">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12">
<canvas id="Budget"></canvas>
</div>
</div>
<br>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.14.3/dist/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource"></script>
<script src="JS/Budget.js"></script>
<script>
window.onload = function () {
var ctxBudget = document.getElementById('Budget').getContext('2d');
window.Budget = new Chart(ctxBudget, BudgetConfig);
};
updateChart(BudgetConfig);
</script>
</body>
</html>
var BudgetConfig = {
type: 'bar',
data: {
datasets: [{
barPercentage: 0.5,
backgroundColor: 'rgb(196, 230, 255)',
borderColor: 'transparent',
borderWidth: 1
},
]
},
plugins: [ChartDataSource],
options: {
legend: { display: true },
title: {
display: true,
text: 'Budget'
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
},
plugins: {
datasource: {
type: 'sheet',
url: './Results.xlsx',
rowMapping: 'index',
datasetLabels: 'Budget!B2',
indexLabels: 'Budget!A3:A',
data: 'Budget!B3:B'
}
}
}
};
Using the following code, I was able to change the title of the chart:
(Using the code that I commented.)
<script>
function updateChart(BudgetConfig) {
//BudgetConfig.options.title.text="hi"
BudgetConfig.plugins.url = './Results.xlsx'
BudgetConfig.update();
}
</script>
now I want to access the datasource of JS file by the below line:
BudgetConfig.plugins.url = './Results.xlsx'
But I couldn't access it. How can I assign the List selected file to it?
