score:2
Accepted answer
Just forEach
over the graficaConexiones.data.datasets
array:
graficaConexiones.data.datasets.forEach(({ data }) => {
data.push(randomData());
if (data.length > dataLength) {
data.shift();
}
});
In full:
function add_data() {
const { labels, datasets } = graficaConexiones.data;
var today = new Date();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
labels.push(time);
if (labels.length > labelLength) {
labels.shift();
}
datasets.forEach(({ data }) => {
data.push(randomData());
if (data.length > dataLength) {
data.shift();
}
});
}
Or, if you're not comfortable with destructuring:
function add_data() {
const labels = graficaConexiones.data.labels;
const datasets = graficaConexiones.data.datasets;
var today = new Date();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
labels.push(time);
if (labels.length > labelLength) {
labels.shift();
}
datasets.forEach((dataset) => {
const data = dataset.data;
data.push(randomData());
if (data.length > dataLength) {
data.shift();
}
});
}
Extracting repeated property accesses into variables first really helps reduce repeated code.
Since you aren't passing any arguments to add_data
, remove all arguments from its definition.
score:2
With async/await the function could be simplified to a loop:
const delay = ms => new Promise(res => setTimeout(res, ms));
function today() {
const today = new Date();
return today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
}
async function updateLoop() {
const { datasets, labels } = graficaConexiones.data;
for(let i = 0; i < Math.Infinity; i++) {
for(const set of datasets)
set.data.push(randomData());
labels.push(today());
for(const set of [...datasets, labels])
if(set.length > dataLength) set.shift();
graficaConexiones.update();
await delay(500);
}
}
Source: stackoverflow.com
Related Query
- JavaScript. Trying to simplify code, maybe with loops?
- Populating javascript chart with Razor model data
- Android: WebView with JavaScript for Chart.js not working properly
- Trying to load a chart with chart.js, through ajax and php
- Chartjs not working with d3 from csv source
- Integrate chart.js with single javascript file
- How can I show JSON data in Chart.js with Javascript if static values are working but dynamic from mySQL are not?
- Passing an Array from a Flask view to the javascript code of another view
- is there anything wrong with this If Condition in Javascript code?
- Javascript and Chart.JS - issue with getting unique text in 3 donut hole charts - same text showing for all 3 donut holes
- How to display variables from Laravel controller to view javascript with specific index
- How to write better code in es6 for formatting an object with array values
- Javascript window.onload not displaying charts with Chart.js and Flask
- Using CHARTJS with a JavaScript Array
- Problem with script src for Chart.js. The CDN for Chart.js funtions fine, so my code is ok. Somehow I'm not linking the file correctly
- With Chart js, I am trying to color every 7th vertical (x axis) grid line (representing each week beginning visually)
- Updating Chartjs to 2.5 with custom code
- Using Javascript with MPDF
- what is wrong with my code ? java script chart position
- Trying to export chart with Chartjs and React but getting erorr
- Javascript generate random color with equivalent highlight
- Use multiple datasets with Javascript Chart
- Json data visualization in Javascript with chartjs
- Trying to have Doughnut chart with dql result chartjs
- How to execute a JavaScript function with ChartJS and FreeMarker?
- How to open a new Tab with javascript and display some chart
- Variable in JavaScript with firebase
- Background color does not work when trying to create my data before using scatter chart with chart.js
- Trying to get total sum based on months on ApexCharts with Php
- Laravel Vue error when trying to use chart.js with Laravel-charts package
More Query from same tag
- what is error can't acquire context from the given item?
- Cannot read property 'reactiveProp' of undefined in vue-chartjs
- Stacked bar chart starting from 0 - ChartJS React
- How to add an extra tick on top of the highest bar in Chart.js v2.9.4 (grace)?
- Chartjs - Changing legend as a line with pointsyle of circle?
- JS node chart from SQL Server not updated
- How i can localize days and month name in ChartJS 3.x?
- How do I access Chart.js default settings? (& related -- how do I turn the tool tips on?)
- Incorrect time chart Chart.js
- dataset not accepted in declaration of scatterChartData for Chartjs
- drawing line chart with chartjs
- Regarding stacked chart in chart.js
- Dynamically Setting Height of Chart
- Plotting objects in Chart.js
- How to take a set of Date objects and display the frequency based on time of day using ChartJS
- How to display k as thousand for the values of chart.js - Javascript
- ChartJs Uncaught ReferenceError for labels value from ViewBag
- Chart.js remove gridline
- ng2 charts bar chart need spacing between 2 bars in series Angular
- How to set data values as labels in Chart.js with a Radar Chart
- How to make a child component of a sibling component refresh when a button is pressed in ReactJS?
- how can I add a django array element into a js array using an if condition
- Prevent size of canvas chart js to equal window height and width
- How to install Chart.js and angular-chart.js (Error: Chart.js library needs to be included)
- How to change bar width individually in chartjs?
- Chart.js 3.5.1 Attribute question about zeroLineColor
- ChartJS + jQuery = Chart not showing
- Chartjs is graphing my values at positions 0,1,2 rather than their values along the x axis
- Uncaught TypeError: lineChart.Line is not a function in chart.js
- ng2-charts does not work When data is between 2 and 5