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:
- Setting showPrintMargin to false not working in React Ace Editor
- Animate toggle height from 0 to auto or 100%
- Conditional Logpoint in Chrome Devtools
- How can I conditionally render a React component if a sessionStorage variable does not exist in Next.js?
- How to set root directory for resolving absolute paths in esbuild?
- Concatenate two JSON objects
- Photoshop Scripting (JS): Duplicate layer set and subs
- Debugging Electron renderer process with VSCode
- I don't understand this javascript function call and where it would be used
- How to programmatically Download a file from Google Drive, using Javascript and HTML? (NOT Google Drive API)
- React Native const vs let vs var in Functional Components
- How to disable time from now with time picker antd
- Why does this function mutate innerHTML of a div element and extract its first child to parse HTML if you can just use jQuery to do the same?
- How can I pause setInterval() functions?
- How to remove spaces from a string using JavaScript?
- Add CSS3 transition expand/collapse
- Remove content of p tag
- How to detect CSS3 resize events
- How to extend an existing JavaScript array with another array, without creating a new array
- Attaching click event handlers in Astro pages
- var express = require('express'); var app = express(), What is express()?? is it a method or a constructor? Where does it come from
- How to set volume of audio object?
- Is it possible to add a new element to top of Map?
- How do I remove a property from a JavaScript object?
- Can't Add Ajax Pagination in ASP NET CORE
- No extra Boolean cast in JavaScript
- Why we have to add an 'async' declaration word to the javascript function which call a sync javascript function?
- Better way to filter an array of objects with one constant and one always changing value
- Generate A Weighted Random Number
- Code on scroll event is not executing if window is zoomed in/out in chrome