I want to display the chart in chart.js with data from cookie. I can see the values with console.log. But I don't know what reason why data is not show up into the chart.
I use a function to read cookie as follow.
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
So I test put data in cookie and read as:
document.cookie="dat=60, 80, 81, 56, 55, 40";
var dat=readCookie(dat);
Everything works just fine without error but there's no data load to the chart. Please have a look at the fiddle here: http://jsfiddle.net/uewnjhgr/1/
I tested your code on my browser and I found that you must pass a "String" to readCookie() function. Also, after returning value you should convert it to Array to use in the chart.js data. I did that with the help of JSON.parse. So here is the code that works for me:
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
document.cookie="dat=60, 80, 81, 56, 55, 40";
var dat = readCookie("dat");
var datArr = JSON.parse("[" + dat + "]");
console.log(datArr);
var chartData = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [
{
fillColor: "#79D1CF",
strokeColor: "#79D1CF",
data: datArr//ref from cookie
}
]
};
var ctx = document.getElementById("myChart1").getContext("2d");
const myLine = new Chart(ctx, {
type: 'line',
data: chartData,
showTooltips: false,
options: {
scales: {
y: {
stacked: true
}
}
}
});
// Uncaught TypeError: (new Chart(...)).Line is not a function
/*
var myLine = new Chart(ctx).Line(chartData, {
showTooltips: false,
onAnimationComplete: function () {
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
this.datasets.forEach(function (dataset) {
dataset.points.forEach(function (points) {
ctx.fillText(points.value, points.x, points.y - 10);
});
})
}
});
*/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="myChart1" height="300" width="500"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>
<script src="cod.js"></script>
</body>
</html>I did not use your setting for chart because it gives me Uncaught TypeError: (new Chart(...)).Line is not a function error.