How does ChartJS work with sessions #11742

horrah · 2024-04-16T04:59:01Z

horrah
Apr 16, 2024

Hello. Can anyone help me please. I have a spring boot server. There are two apps for web and for rest api, and they worked fine. But now when I have added spring security it stopped to show chart. As I think it is because chartjs doesn't send session id in http request.
html code:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
	<title>Chart JS Tutorial</title>
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
	<link rel="stylesheet" href="style.css">

</head>
<body>
	<div class="row">
		<div class="col-lg-9 col-md-9" >
			<div class="card text-center m-5">
		
				<div class="card-header">
					<h2>Chart JS Tutorial</h2>
				</div>
				<div>
					<canvas id="myChart"></canvas>
				</div>
			</div>
		</div>	
		<div class="col-lg-3 col-md-3">
			<p>Hello</p>
		</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
	<script src="app.js"></script>
</body>
</html>

js code:

        var shortTimeLabel =[];
	var blackData = [];
	var whiteData = [];
	var chart;
	
		const apiUrl = "http://127.0.0.1:8080/api/app";
		var response;// = await fetch(apiUrl);
		var barChartData;// = await response.json();
		var short_time;// = barChartData.map((x) => x.shortTime);
		var black_;//_ = barChartData.map((x) => x.black);
		var white_;//_ = barChartData.map((x) => x.white);

	
async function dummyChart(){
	await getDummyData();
	let ctx = document.getElementById('myChart');

	chart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: shortTimeLabel,
      datasets: [{
        label: 'Down',
				backgroundColor: 'blue',
        data: blackData,
        borderWidth: 1
      },
			{
        label: 'Up',
				backgroundColor: 'pink',
        data: whiteData,
        borderWidth: 1
      }]
    },
    options: {
			tooltips: {
				mode: 'index'
			},
      responsive: true,
      maintainAspectRatio: false,
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true
      }
    }
    }
  });
}
dummyChart();

setInterval(updateConfigByMutating, 10000);
console.log("Hello");


async function updateConfigByMutating() {
	await getDummyData();
    chart.options.plugins.title.text = 'new title';
    for (let i = 0; i < chart.data.datasets[0].data.length; i++) {
  		chart.data.datasets[0].data[i] = black_[i];
	} 
	
	for (let i = 0; i < chart.data.datasets[1].data.length; i++) {
  		chart.data.datasets[1].data[i] = white_[i];
	} 
	
	for (let i = 0; i < chart.data.labels.length; i++) {
  		chart.data.labels[i] = short_time[i];
	} 
	
	
    chart.update();
}

	//Fetch data from dummy REST API
	async function getDummyData(){
		response = await fetch(apiUrl);
		barChartData = await response.json();
		short_time = barChartData.map((x) => x.shortTime);
		black_ = barChartData.map((x) => x.black);
		white_ = barChartData.map((x) => x.white);
		console.log(short_time, black_, white_);
		
		shortTimeLabel = short_time;
		blackData = black_;
		whiteData = white_;

	}

How can I fix it?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How does ChartJS work with sessions #11742

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

How does ChartJS work with sessions #11742

horrah Apr 16, 2024

Replies: 0 comments

horrah
Apr 16, 2024