i want to be able to zoom in and out of a chart in aspnet mvc.
can anybody help me? I would appreciate it. I want to create a chart in aspnet mvc where I can view the values every few minutes (on the x axis, the date and time axis) and when I zoom in, be able to view the values that were added in seconds?
those are my controller and view so far which displays every value added to my table every few seconds:
controller:
public IActionResult ShowData()
{
// Retrieve chart data and pass it to the view
List<object> chartData = GetData();
ViewBag.ChartData = chartData;
return View();
}
[HttpPost]
public List<object> GetData()
{
List<object> data = new List<object>();
List<string> labels = mvcDemoDbContext.Trss
.OrderBy(p => p.Date)
.Select(p => p.Date.ToString("HH:mm:ss"))
.ToList();
data.Add(labels);
List<long?> values = mvcDemoDbContext.Trss.OrderBy(p => p.Date).ThenBy(p => p.Id).Select(p => p.TRSValue).ToList();
data.Add(values);
return data;
}
and view:
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
@section scripts {
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript">
// Retrieve chart data from ViewBag
var chartData = @Html.Raw(Json.Serialize(chartData));
// Extract labels and values from chartData
var labels = chartData[0]; //0
var values = chartData[1]; //1
// Create a chart using Chart.js
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'TRS Values',
data: values,
backgroundColor: 'rgba(0, 123, 255, 0.3)',
borderColor: 'rgba(0, 123, 255, 1)',
borderWidth: 1,
pointRadius: 0,
fill: 'start'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
display: true,
title: {
display: true,
text: 'Date'
}
},
y: {
display: true,
title: {
display: true,
text: 'TRS Value (%)'
}
}
}
}
});
},
error: function (xhr, status, error) {
console.log(error);
}
});
}
// Refresh data every 20 seconds
setInterval(refreshData, 20000);
refreshData();
</script>
}
Thank u so much in advance!
