Related
I have a doughnut chart that gets data from an API. The chart displays ok but I can't get the chart data to update, and do that every 2 seconds. I have tried and searched many topics but most are outdated versions of chart.js and my javascript skills are poor.
Chart.js v3.9.1
const totalRunTime = current_array.MTConnectStreams.Streams.DeviceStream.ComponentStream[12].Samples.DynamicBasicData[1];
const totalTimeRemaining = current_array.MTConnectStreams.Streams.DeviceStream.ComponentStream[12].Samples.DynamicBasicData[13];
const timeRemaining = ((totalTimeRemaining / totalRunTime) * 100)
// Setup
const datapoints = [(100 - timeRemaining), timeRemaining];
const data = {
datasets: [{
data: datapoints,
backgroundColor: ['rgba(20, 121, 255, 0.7)', 'rgba(208, 208, 208, 0.5)'],
borderWidth: 1,
cutout: '70%'
}]
};
// Counter
const counter = {
id: 'counter',
beforeDraw( chart, args, options ) {
const { ctx, chartArea: { top, right, bottom, left, width, height } } = chart;
ctx.save();
ctx.font = options.fontSize + 'px ' + options.fontFamily;
ctx.textAlign = 'center';
ctx.fillStyle = options.fontColor;
ctx.fillText(datapoints[0].toFixed(3) + '%', width / 2, (height / 2) + (options.fontSize * 0.34));
}
};
// Config
const config = {
type: 'doughnut',
data,
options: {
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
},
counter: {
fontColor: '#193b68',
fontSize: '16',
fontFamily: 'Sofia Pro Medium'
}
}
},
plugins: [counter]
};
// Render init
const doughnutChart = new Chart(
document.getElementById('doughnutChart'),
config
);
setInterval(function addData(chart, data) {
chart.data.datasets.forEach((dataset) => {
dataset.data = data;
});
chart.update('none');
}, 2000
);
HTML
<canvas id="doughnutChart"></canvas>
It looks like it's not appearing to update because you're calling your data and storing in a variable which, from the scope of the application had not changed.
If you move your data request to a function and then call that from the initialising code and within setInterval you should see your data being updated freshly with each call to the function getData.
Here's a version of your code with what I mean, where getData() is used instead of datapoints:
const getData = () => {
console.log('Requesting data')
const totalRunTime = current_array.MTConnectStreams.Streams.DeviceStream.ComponentStream[12].Samples.DynamicBasicData[1];
const totalTimeRemaining = current_array.MTConnectStreams.Streams.DeviceStream.ComponentStream[12].Samples.DynamicBasicData[13];
const timeRemaining = ((totalTimeRemaining / totalRunTime) * 100)
return [(100 - timeRemaining), timeRemaining]
}
const data = {
datasets: [{
data: getData(),
backgroundColor: ['rgba(20, 121, 255, 0.7)', 'rgba(208, 208, 208, 0.5)'],
borderWidth: 1,
cutout: '70%'
}]
};
const counter = {
id: 'counter',
beforeDraw( chart, args, options ) {
const { ctx, chartArea: { top, right, bottom, left, width, height } } = chart;
ctx.save();
ctx.font = options.fontSize + 'px ' + options.fontFamily;
ctx.textAlign = 'center';
ctx.fillStyle = options.fontColor;
ctx.fillText(getData()[0].toFixed(3) + '%', width / 2, (height / 2) + (options.fontSize * 0.34));
}
};
const config = {
type: 'doughnut',
data,
options: {
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
},
counter: {
fontColor: '#193b68',
fontSize: '16',
fontFamily: 'Sofia Pro Medium'
}
}
},
plugins: [counter]
};
const doughnutChart = new Chart(
document.getElementById('chart'),
config
);
setInterval(function addData(chart, data) {
console.log('updating', Date.now())
doughnutChart.data.datasets.forEach((dataset) => {
dataset.data = getData();
});
doughnutChart.update('none');
}, 2000
);
Here's a codepen of an updating version but with random values used instead of your data requests.
This might be the problem and I hope this helps you.
One tip is to use console.log to see what's being called and placing your code in functions can make it easier to debug too by seeing where and when it is being called by using console.log or debugger.
I am using in HTML using Canvas, how to use add the text inside Doughnut chart. Here is my javascript code and and HTML code. I have used chart js version 3.2.1 so please give solution for the same version(3).
var overallStatsCanvasCtx = document.getElementById('pademicOverallStats');
var dataPandemicEmp = {
labels: ['Normal', 'No Mask', 'Warning', 'High Temperature'],
datasets: [{
label: "Overall Statistics",
data: ['4000', '2000', '1500', '2500'],
backgroundColor: ['#43C187', '#8FC3F0', '#FFCD5E', '#FF4800'],
}]
};
var overallStatschartOptions = {
responsive: true,
plugins: {
legend: {
display: true,
align: 'center',
position: 'bottom',
labels: {
fontColor: '#474B4F',
usePointStyle: true,
}
}
},
};
var doughnutChart = new Chart(overallStatsCanvasCtx, {
type: 'doughnut',
data: dataPandemicEmp,
options: overallStatschartOptions,
});
<canvas id="pademicOverallStats"></canvas>
You will have to use a custom plugin for that
var data = {
labels: [
"Red",
"Blue",
"Yellow"
],
datasets: [{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
var promisedDeliveryChart = new Chart(document.getElementById('myChart'), {
type: 'doughnut',
data: data,
options: {
responsive: true,
plugins: {
legend: {
display: false
}
}
},
plugins: [{
id: 'text',
beforeDraw: function(chart, a, b) {
var width = chart.width,
height = chart.height,
ctx = chart.ctx;
ctx.restore();
var fontSize = (height / 114).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = "75%",
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}]
});
<body>
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.2.0/dist/chart.min.js"></script>
</body>
var data = {
labels: [
"Red",
"Blue",
"Yellow"
],
datasets: [{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
var promisedDeliveryChart = new Chart(document.getElementById('myChart'), {
type: 'doughnut',
data: data,
options: {
responsive: true,
plugins: {
legend: {
display: false
}
}
},
plugins: [{
id: 'text',
beforeDraw: function(chart, a, b) {
var width = chart.width,
height = chart.height,
ctx = chart.ctx;
ctx.restore();
var fontSize = (height / 240).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = "75%",
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}]
});
<body>
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.2.0/dist/chart.min.js"></script>
</body>
I'm doing an inline plugin and using chartjs version 3.9.1. I have adjusted the other answers to fit my needs which take into account a chart title and legend. The text in the center of the circle is also based on the total of the 0th dataset.
plugins: [{
id: 'doughnutInteriorText',
beforeDraw: function(chart) {
var width = chart.chartArea.width,
height = chart.chartArea.height,
ctx = chart.ctx;
ctx.restore();
var fontSize = (height / 114).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = chart.data.datasets[0].data.reduce((partialSum, a) => partialSum + a, 0),
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = (height / 2) + chart.legend.height + chart.titleBlock.height;
ctx.fillText(text, textX, textY);
ctx.save();
}
}]
See image below, I'm trying to set the value of each bar in the center of my stacked bar; so far I only got on the top and sometimes the position is off (see the 4% yellow in the third bar)
This is the code:
context.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
scale_max = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
var textY = model.y + 50;
if ((scale_max - model.y) / scale_max >= 0.5)
textY = model.y + 20;
fadeIn(ctx, dataset.data[i], model.x, textY, model.y > topThreshold, step);
}
});
var fadeIn = function(ctx, obj, x, y, black, step) {
var ctx = modifyCtx(ctx);
var alpha = 0;
ctx.fillStyle = black ? 'rgba(' + outsideFontColor + ',' + step + ')' : 'rgba(' + insideFontColor + ',' + step + ')';
ctx.fillText(obj.toString() + "%", x, y);
};
This can be done with the Plugin Core API. The API offers different hooks that may be used for executing custom code (that's probably what you already do). In your case, you can use the afterDraw hook as follows to draw text at the desired positions.
afterDraw: chart => {
let ctx = chart.chart.ctx;
ctx.save();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = "12px Arial";
let xAxis = chart.scales['x-axis-0'];
let yAxis = chart.scales['y-axis-0'];
let datasets = chart.chart.data.datasets.filter(ds => !ds._meta[0].hidden);
xAxis.ticks.forEach((value, xIndex) => {
let x = xAxis.getPixelForTick(xIndex);
datasets.forEach((dataset, iDataset) => {
if (dataset.data[xIndex] > 3) {
let yValue = datasets.slice(0, iDataset)
.map(ds => ds.data[xIndex])
.reduce((a, b) => a + b, 0) +
dataset.data[xIndex] / 2;
let y = yAxis.getPixelForValue(yValue);
ctx.fillStyle = dataset.textColor;
ctx.fillText(dataset.data[xIndex] + '%', x, y);
}
});
});
ctx.restore();
}
Please take a look at below runnable code and see how it works.
const chart = new Chart('myChart', {
type: 'bar',
plugins: [{
afterDraw: chart => {
let ctx = chart.chart.ctx;
ctx.save();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = "12px Arial";
let xAxis = chart.scales['x-axis-0'];
let yAxis = chart.scales['y-axis-0'];
let datasets = chart.chart.data.datasets.filter(ds => !ds._meta[0].hidden);
xAxis.ticks.forEach((value, xIndex) => {
let x = xAxis.getPixelForTick(xIndex);
datasets.forEach((dataset, iDataset) => {
if (dataset.data[xIndex] > 3) {
let yValue = datasets.slice(0, iDataset)
.map(ds => ds.data[xIndex])
.reduce((a, b) => a + b, 0) +
dataset.data[xIndex] / 2;
let y = yAxis.getPixelForValue(yValue);
ctx.fillStyle = dataset.textColor;
ctx.fillText(dataset.data[xIndex] + '%', x, y);
}
});
});
ctx.restore();
}
}],
data: {
labels: ['A', 'B', 'C', 'D', 'E'],
datasets: [{
label: 'Dataset 1',
data: [2.5, 48, 9, 17, 23],
backgroundColor: 'red',
textColor: 'white'
}, {
label: 'Dataset 2',
data: [2.5, 4, 4, 11, 11],
backgroundColor: 'orange',
textColor: 'black'
}, {
label: 'Dataset 3',
data: [95, 48, 87, 72, 66],
backgroundColor: 'green',
textColor: 'white'
}]
},
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="160"></canvas>
I'm trying to insert additional data into the doughnut chart.
The controller pass to the view an array like this:
[
0 => array:3 [
"profit" => 20
"sex" => array:3 [
0 => 0
1 => 8
2 => 0
]
"count" => 8
]
1 => array:3 [
"profit" => 101.5
"sex" => array:3 [
0 => 4
1 => 4
2 => 0
]
"count" => 8
]
...
]
Using chartjs and the fied profit of all array elements I create this doughnut chart:
But I would customize the content of the tooltip so that the datas of the "sex" fieds are visible. I try with the following code but the varible data contains only the values contained in the chart.
config.options.tooltips.callbacks = {
title: (tooltipItem, data) => {
return data['labels'][tooltipItem[0]['index']];
},
label: (tooltipItem, data) => {
return data['datasets'][0]['data'][tooltipItem['index']];
},
afterLabel: (tooltipItem, data) => {
var dataset = data['datasets'][0];
var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset._meta[4].total) * 100)
return `${percent} %`;
},
backgroundColor: '#FFF',
titleFontSize: 16,
titleFontColor: '#0066ff',
bodyFontColor: '#000',
bodyFontSize: 14,
displayColors: false
}
I pass the data in the config object in this way: config.data.datasets[0].data = data.map(el => el.profit);
How do I add more data to the tooltip to get something like this?
This is my code:
function createDonatsChart(ctx, title, data, labels, middleText, type) {
Chart.pluginService.register({
beforeDraw: function(chart) {
if (chart.config.options.elements.center) {
// Get ctx from string
const ctx = chart.chart.ctx;
// Get options from the center object in options
const centerConfig = chart.config.options.elements.center;
const fontStyle = centerConfig.fontStyle || 'Asap';
const txt = centerConfig.text;
const color = centerConfig.color || '#000';
const maxFontSize = centerConfig.maxFontSize || 75;
const sidePadding = centerConfig.sidePadding || 20;
const sidePaddingCalculated = (sidePadding / 100) * (chart.innerRadius * 2)
// Start with a base font of 30px
ctx.font = `30px ${fontStyle}`;
// Get the width of the string and also the width of the element minus 10 to give it 5px side padding
const stringWidth = ctx.measureText(txt).width;
const elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;
// Find out how much the font can grow in width.
const widthRatio = elementWidth / stringWidth;
const newFontSize = Math.floor(30 * widthRatio);
const elementHeight = (chart.innerRadius * 2);
// Pick a new font size so it will not be larger than the height of label.
const fontSizeToUse = Math.min(newFontSize, elementHeight, maxFontSize);
const minFontSize = centerConfig.minFontSize;
const lineHeight = centerConfig.lineHeight || 25;
const wrapText = false;
if (minFontSize === undefined) {
minFontSize = 20;
}
if (minFontSize && fontSizeToUse < minFontSize) {
fontSizeToUse = minFontSize;
wrapText = true;
}
// Set font settings to draw it correctly.
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
const centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
const centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
ctx.font = `${fontSizeToUse}px ${fontStyle}`;
ctx.fillStyle = color;
if (!wrapText) {
ctx.fillText(txt, centerX, centerY);
return;
}
const words = txt.split(' ');
let line = '';
let lines = [];
// Break words up into multiple lines if necessary
for (let n = 0; n < words.length; n++) {
const testLine = line + words[n] + ' ';
const metrics = ctx.measureText(testLine);
const testWidth = metrics.width;
if (testWidth > elementWidth && n > 0) {
lines.push(line);
line = words[n] + ' ';
} else {
line = testLine;
}
}
// Move the center up depending on line height and number of lines
centerY -= (lines.length / 2) * lineHeight;
for (let n = 0; n < lines.length; n++) {
ctx.fillText(lines[n], centerX, centerY);
centerY += lineHeight;
}
//Draw text in center
ctx.fillText(line, centerX, centerY);
}
}
});
let config = {
type: 'doughnut',
data: {
datasets: [{
borderColor: '#121212',
borderWidth: 8,
backgroundColor: [
'#49C6E5',
'#EFC7C2',
'#00BD9D',
'#EF476F',
'#FFD166',
]
}],
labels: labels
},
options: {
responsive: true,
tooltips: {
},
legend: {
position: 'top',
onClick: null
},
title: {
display: true,
color: '#6c757d',
text: title,
fontFamily: "'Asap', san-serif",
fontSize: 20,
},
animation: {
animateScale: true,
animateRotate: true,
},
elements: {
center: {
text: middleText,
color: '#6c757d',
fontFamily: "'Asap', san-serif",
sidePadding: 20,
minFontSize: 12,
lineHeight: 25,
}
},
}
};
if ( type == 0 ) {
config.options.events = [];
config.data.datasets[0].data = data;
}
else {
// config.data.datasets[0].data = data.map(el => el.profit);
// config.options.tooltips.enabled = true;
// config.options.tooltips.callbacks = {
// title: (tooltipItem, data) => {
// return data['labels'][tooltipItem[0]['index']];
// },
// label: (tooltipItem, data) => {
// return data['datasets'][0]['data'][tooltipItem['index']];
// },
// afterLabel: (tooltipItem, data) => {
// var dataset = data['datasets'][0];
// var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset._meta[4].total) * 100)
// return `${percent} %`;
// },
// backgroundColor: '#FFF',
// titleFontSize: 16,
// titleFontColor: '#0066ff',
// bodyFontColor: '#000',
// bodyFontSize: 14,
// displayColors: false
// }
config.data.datasets[0].data = data.map(el => el.profit);
}
Chart.defaults.global.defaultFontFamily = 'Asap';
Chart.defaults.doughnut.cutoutPercentage = 80;
new Chart(ctx, config);
}
const data = [
{
count: 8,
profit: 20,
sex: [0, 8, 0]
},
{
count: 8,
profit: 101.5,
sex: [4, 4, 0]
},
{
count: 1,
profit: 12.5,
sex: [1, 0, 0]
},
{
count: 2,
profit: 4,
sex: [2, 0, 0]
},
{
count: 5,
profit: 56.5,
sex: [5, 0, 0]
}
];
createDonatsChart(
document.getElementById('profitPerTarget').getContext('2d'),
'Target (di chi compra)',
data,
['14-17', '18-24', '25-30', '31-40', 'Over 40'],
`Totale ${(data.map(el => el.profit).reduce((a, b) => a + b, 0))} \u20AC`,
1
);
html, body {
background-color: #121212;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="profitPerTarget" height="500" style="padding: 10px"></canvas>
You can use closure in createDonatsChart functions. Set const as const originalData = [...data] and then you can access to data in afterLabel callback (as example):
tooltips: {
callbacks: {
afterLabel: function(tooltipItem, data) {
const sexArray = originalData[tooltipItem['index']].sex
const precent = sexArray.reduce((a, b) => a + b, 0) // your calculation here
return '(' + precent + '%)';
}
}
}
See example in playground: https://jsfiddle.net/denisstukalov/upw6asjm/63/#&togetherjs=3CN0LJDjbl
I want to place the text my data values at the center of the chart js donut charts, I don't know how to do that, I checked the chart js official docs, but they didn't provide any information about this, how can I achieve this.
Here is my code:
HTML:
<canvas id="gx_150s_658Ed8745321" width="200" height="120"></canvas>
JS:
var randomScalingFactor = function () {
return Math.round(Math.random() * 100);
};
var gx_150s_658Ed8745321_ctx = document.getElementById('gx_150s_658Ed8745321').getContext('2d');
var gx_150s_658Ed8745321 = new Chart(gx_150s_658Ed8745321_ctx, {
type: 'doughnut',
data: {
labels: ['Utilized', 'Balence'],
datasets: [{
label: 'Utilized',
data: [95, 5],
backgroundColor: [
'rgb(0, 153, 0, 0.7)',
],
borderColor: [
'rgba(54, 162, 235, 2)',
],
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
title: {
display: true,
text: ' Utilized : 95 %'
},
animation: {
animateScale: true,
animateRotate: true
},
}
});
Expected output:
I'm using a simple plug-in:
config = {
options: {
//...
}
//...
plugin: [{
id: 'my-doughnut-text-plugin',
afterDraw: function (chart, option) {
let theCenterText = "50%" ;
const canvasBounds = canvas.getBoundingClientRect();
const fontSz = Math.floor( canvasBounds.height * 0.10 ) ;
chart.ctx.textBaseline = 'middle';
chart.ctx.textAlign = 'center';
chart.ctx.font = fontSz+'px Arial';
chart.ctx.fillText(theCenterText, canvasBounds.width/2, canvasBounds.height*0.70 )
}
}];
}
You still need to calculate what you wan't in the center text (variable theCenterText).
we can use the animation onComplete callback to know when the animation has finished.
then we can calculate the size and placement of the canvas,
and position a label in the center of the canvas.
animation: {
animateScale: true,
animateRotate: true,
onComplete: function() {
var canvasBounds = canvas.getBoundingClientRect();
dataLabel.innerHTML = ' Utilized : 95 %';
var dataLabelBounds = dataLabel.getBoundingClientRect();
dataLabel.style.top = (canvasBounds.top + (canvasBounds.height / 2) - (dataLabelBounds.height / 2)) + 'px';
dataLabel.style.left = (canvasBounds.left + (canvasBounds.width / 2) - (dataLabelBounds.width / 2)) + 'px';
}
},
see following working snippet...
$(document).ready(function() {
var randomScalingFactor = function () {
return Math.round(Math.random() * 100);
};
var canvas = document.getElementById('gx_150s_658Ed8745321');
var dataLabel = document.getElementById('data-label');
var gx_150s_658Ed8745321_ctx = canvas.getContext('2d');
var gx_150s_658Ed8745321 = new Chart(gx_150s_658Ed8745321_ctx, {
type: 'doughnut',
data: {
labels: ['Utilized', 'Balence'],
datasets: [{
label: 'Utilized',
data: [95, 5],
backgroundColor: [
'rgb(0, 153, 0, 0.7)',
],
borderColor: [
'rgba(54, 162, 235, 2)',
],
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
animation: {
animateScale: true,
animateRotate: true,
onComplete: function() {
var canvasBounds = canvas.getBoundingClientRect();
dataLabel.innerHTML = ' Utilized : 95 %';
var dataLabelBounds = dataLabel.getBoundingClientRect();
dataLabel.style.top = (canvasBounds.top + (canvasBounds.height / 2) - (dataLabelBounds.height / 2)) + 'px';
dataLabel.style.left = (canvasBounds.left + (canvasBounds.width / 2) - (dataLabelBounds.width / 2)) + 'px';
}
},
}
});
});
#data-label {
font-size: 20px;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="gx_150s_658Ed8745321" width="200" height="120"></canvas>
<span id="data-label"></span>