javascriptasp.net-corechartsasp.net-ajax
I can't update my Line Chart Data using AJAX
I want to make an ajax function that will update my line chart, the data in the line chart should be sorted according to the month. There should be a button that submits a value for the selected month to the function for getting the chart's data.
@page
@model Task_CRM.Pages.TrendChartModel
@{
ViewData["Title"] = "Monthly Line Chart";
}
<div class="card">
<div class="card-header center">
<center><strong><h5>Trend Interaksi</h5></strong></center>
</div>
<div class="card-body">
<form method="post">
<label for="selectMonth">Pilih Bulan: </label>
<select id="selectMonth" asp-for="SelectedMonth" asp-items="Model.month"></select>
<button type="submit" class="btn btn-primary" id="updateChartMonth">Update Chart</button>
</form>
<div>
<canvas id="Trend" width="400" height="200"></canvas>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function () {
$('#monthDropdown').change(function () {
var selectedMonth = $(this).val();
$.ajax({
url:'/TrendChart?handler=GetMonthlyData',
type:'GET',
data: { SelectedMonth: selectedMonth },
success: function(data){
var Dates = Data.date;
var Dates_Values = Data.Count;
var TrendChart = new Chart(document.getElementById('Trend'), {
type: 'line',
data: {
labels: Dates,
datasets: [{
label: 'Total Interactions',
data: Dates_Value,
fill: false,
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 2,
pointRadius: 5,
pointHoverRadius: 8,
pointBackgroundColor: 'rgba(75, 192, 192, 1)',
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
aspectRatio: 1,
title: {
display: true,
text: 'Total Interactions Over Time'
},
scales: {
x: {
type: 'category',
labels: Dates,
position: 'bottom',
title: {
display: true,
text: 'Tanggal'
}
},
y: {
beginAtZero: true,
title: {
display: true,
text: 'Total Interactions'
}
}
}
}
});
}error:
console.error('Error Fetching Updated Data');
})
})
})
</script>
@{
await Html.RenderPartialAsync("_ValidationScriptsPartial");
}
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using Task_CRM.Data;
using Task_CRM.Models;
using System.Linq;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc.Rendering;
using System;
namespace Task_CRM.Pages
{
public class TrendChartModel : PageModel
{
private readonly Task_CRMContext _context;
public TrendChartModel(Task_CRMContext context)
{
_context = context;
}
[BindProperty]
public List<Interaction> Interaction { get; set; }
[BindProperty]
public SelectList month { get; set; }
public int SelectedMonth { get; set; }
public void OnGet()
{
var currentUser = HttpContext.Session.GetString("Username");
if (currentUser != null)
{
ViewData["Navbar"] = currentUser;
}
var uniqueMonth = _context.Interaction.Select(m => m.Tanggal.Month).Distinct().ToList();
month = new SelectList(uniqueMonth);
}
//[HttpGet]
public IActionResult OnGetGetMonthlyData(int SelectedMonth)
{
var Dates = _context.Interaction.Where(d => d.Tanggal.Month == SelectedMonth).Select(d => d.Tanggal).ToList();
var Count = _context.Interaction.Where(d => d.Tanggal.Month == SelectedMonth).Count();
var Data = new { Dates, Count };
return new JsonResult(Data);
}
}
}
When i try my code the value of the chart is not showing and
Solution
Here are several problems in your code:
1.Your html code does not contain element which id="monthDropdown", so that the change event cannot be hit. Your select element is: <select id="selectMonth"></select>, so the corresponding js should be:
$('#selectMonth').change(function () {
2.The parameter in success function is data, so you need use data or data.xxx instead of Data to get the response data.
3.Your backend response json data is like below:
{"dates":["2024-02-05T00:00:00","2024-02-15T00:00:00"],"count":2}
the response data is camel case, so you need change your ajax:
var Dates = data.dates;
var Dates_Values = data.count;
4.You misspell the data value in your ajax, it is:
data: Dates_Values, //not Dates_Value`
5.The line chart contains x y axis, your x-axis is array of dates and the y-axis is the single count which is not correct, you need modify the following backend code: (Not sure how is your model like and which data you want it be the y axis, you need change it by yourself to make this Count be an array. Note:the linq should GroupBy() one column and then Count())
var Count = data.Where(d => d.Tanggal.Month == SelectedMonth).Count();
Make it be an array and both of the x and y axis data amount should be the same.Easy to say, if your dates contains two values, your count also needs contain two values. For example the response json data should be like below:
{"dates":["2024-02-05T00:00:00","2024-02-15T00:00:00"],"count":[2.2,3]}
The whole working code
@{
ViewData["Title"] = "Monthly Line Chart";
}
<div class="card">
<div class="card-header center">
<center><strong><h5>Trend Interaksi</h5></strong></center>
</div>
<div class="card-body">
<form method="post">
<label for="selectMonth">Pilih Bulan: </label>
<select id="selectMonth" asp-for="SelectedMonth" asp-items="Model.month"></select>
<button type="submit" class="btn btn-primary" id="updateChartMonth">Update Chart</button>
</form>
<div>
<canvas id="Trend" width="400" height="200"></canvas>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function () {
$('#selectMonth').change(function () {
var selectedMonth = $(this).val();
$.ajax({
url:'/TrendChart?handler=GetMonthlyData',
type:'GET',
data: { SelectedMonth: selectedMonth },
success: function(data){
//the parameter in the function is `data`
//you can hard coded it for testing: data={"dates":["2024-02-05T00:00:00","2024-02-15T00:00:00"],"count":[2.2, 3]};
var Dates = data.dates;
var Dates_Values = data.count; //the response json data is camel case
var TrendChart = new Chart(document.getElementById('Trend'), {
type: 'line',
data: {
labels: Dates,
datasets: [{
label: 'Total Interactions',
data: Dates_Values, //it should be `Dates_Values`
fill: false,
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 2,
pointRadius: 5,
pointHoverRadius: 8,
pointBackgroundColor: 'rgba(75, 192, 192, 1)',
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
aspectRatio: 1,
title: {
display: true,
text: 'Total Interactions Over Time'
},
scales: {
x: {
type: 'category',
labels: Dates,
position: 'bottom',
title: {
display: true,
text: 'Tanggal'
}
},
y: {
beginAtZero: true,
title: {
display: true,
text: 'Total Interactions'
}
}
}
}
});
},
error: function () {
console.error('Error Fetching Updated Data');
}
})
})
})
</script>
@{
await Html.RenderPartialAsync("_ValidationScriptsPartial");
}
Backend:
public IActionResult OnGetGetMonthlyData(int SelectedMonth)
{
//hard coded for easy testing
var Dates = new[] { "2024-02-05T00:00:00", "2024-02-15T00:00:00" };
var Count = new[] { 2.2,3};
var Data = new { Dates, Count };
return new JsonResult(Data);
}
Result:
- Nuxt 3 sometimes I can omit .value when using useState, sometimes I can't, why?
- How to fix Next.js 14.1 prerendering Error
- function in my javascript module is not defined
- How to format Chart.js dates in the axes and tooltip
- How can I force a re-render react component Chart(react-chart.js) and update the custom plugin?
- Convert inline SVG to Base64 string
- Yarn start not working | error `ERR_PACKAGE_PATH_NOT_EXPORTED'
- Parsing HTML in the Page In React
- React - How to return HTML elements in JSON
- Webpack compile error: TypeError: __WEBPACK_IMPORTED_MODULE_1__ … is not a function
- Reactjs separation of UI and business logic
- TypeError: Cannot destructure property id of req.params as it is undefined
- How to allow german user to enter numbers in german format in React JavaScript
- Display html-Input-value as german formatted Number on input-change, while keeping track of decimal number
- Can't import jwt-decode in JavaScript file in React project
- Bind saved Date in Edit Form using Angular 17
- How to properly use mechanize to scrape AJAX sites
- How to make bootstrap datepicker be always visible/open?
- Mongodb findOneAndUpdate - check if new document added, or just updated
- export to excel using datatable
- How to make an address clickable on a mobile device (like phone numbers are)?
- SVG Scale without moving location
- Adding Favicon to NextJs App router application
- SVG rect not showing up in firefox but works on chrome
- Tumblr Static Uploader Error
- node dotenv won't work with pm2
- Keeping ref list of html elements of long v-for list causes performance problem
- AngularJs jQuery: Add HTML dynamically
- Changing a value of an object of a state variable array
- JavaScript function redeclaration and hoisting