Hi dorsa,
Check the below sample code.
HTML
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="mGrid" EmptyDataText="No files uploaded">
<Columns>
<asp:BoundField DataField="Text" HeaderText="File Name" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkShowChrt" Text="ShowChart" CommandArgument='<%# Eval("Value") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<hr />
<canvas id="MonthlyCost"></canvas>
<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="MonthlyCost.js"></script>
<script>
$(function () {
$('[id*=lnkShowChrt]').on('click', function () {
var ctxMonthCost = document.getElementById('MonthlyCost').getContext('2d');
MonthlyCostConfig.options.plugins.datasource.url = "./Uploads/" + $(this).closest('tr').find('td').eq(0).html();
window.MonthlyCost = new Chart(ctxMonthCost, MonthlyCostConfig);
return false;
});
});
</script>
MonthlyCost.js
var MonthlyCostConfig = {
type: 'bar',
data: {
datasets: [{
barPercentage: 0.5,
backgroundColor: 'rgb(196, 230, 255)',
borderColor: 'transparent',
borderWidth: 1
}]
},
plugins: [ChartDataSource],
options: {
//maintainAspectRatio :false,
legend: { display: true },
title: {
display: true,
text: 'Monthly Cost'
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
},
plugins: {
datasource: {
type: 'sheet',
url: '',
rowMapping: 'index',
datasetLabels: 'Monthly Cost!B2',
indexLabels: 'Monthly Cost!A3:A',
data: 'Monthly Cost!B3:B'
}
}
}
};
Code
C#
protected void Page_Load(object sender, System.EventArgs e)
{
if (!IsPostBack)
{
string[] filePaths = System.IO.Directory.GetFiles(Server.MapPath("~/Uploads/"));
List<ListItem> files = new List<ListItem>();
foreach (string filePath in filePaths)
{
files.Add(new ListItem(System.IO.Path.GetFileName(filePath), filePath));
}
GridView1.DataSource = files;
GridView1.DataBind();
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
Dim filePaths As String() = System.IO.Directory.GetFiles(Server.MapPath("~/Uploads/"))
Dim files As List(Of ListItem) = New List(Of ListItem)()
For Each filePath As String In filePaths
files.Add(New ListItem(System.IO.Path.GetFileName(filePath), filePath))
Next
GridView1.DataSource = files
GridView1.DataBind()
End If
End Sub
Screenshot
![](https://i.imgur.com/sGOM1Vs.gif)