Auto Update of this ChartJS Script - javascript

I have received this piece of code to generate a chart based on data pulled from "data.php". The chart renders fine without any issues. I cannot seem to get it updating each 5 seconds.
I tried auto refreshing the whole page, but this does not seem to be productive, since you will have to scroll back down to the chart.
$(document).ready(function () {
/**
* call the data.php file to fetch the result from db table.
*/
$.ajax({
url: "http://xx.xx.xx.xx/link/going2/data.php",
type: "GET",
success: function (data) {
console.log(data);
var VALUE = {
iface1: [],
iface2: [],
iface3: [],
iface4: [],
iface5: [],
iface6: []
};
var len = data.length;
for (var i = 0; i < len; i++) {
if (data[i].INTERFACE == "iface1") {
VALUE.iface1.push(data[i].VALUE);
} else if (data[i].INTERFACE == "iface2") {
VALUE.iface2.push(data[i].VALUE);
} else if (data[i].INTERFACE == "iface3") {
VALUE.iface3.push(data[i].VALUE);
} else if (data[i].INTERFACE == "iface4") {
VALUE.iface4.push(data[i].VALUE);
} else if (data[i].INTERFACE == "iface5") {
VALUE.iface5.push(data[i].VALUE);
} else if (data[i].INTERFACE == "iface6") {
VALUE.iface6.push(data[i].VALUE);
}
}
//get canvas
var t = new Date();
var ctx = $("#line-chartcanvas");
var data = {
labels: [ (Removed to make code shorter)],
datasets: [{
label: "cable-upstream 1/0.0",
data: VALUE.iface1,
backgroundColor: 'rgba(0, 0, 255, 1.0)',
borderColor: 'rgba(0, 0, 255, 0.5)',
fill: false,
lineTension: 0,
pointRadius: 2
}, {
label: "cable-upstream 1/1.0",
data: VALUE.iface2,
backgroundColor: 'rgba(0, 128, 0, 1.0)',
borderColor: 'rgba(0, 128, 0, 0.5)',
fill: false,
lineTension: 0,
pointRadius: 2
}, {
label: "cable-upstream 1/2.0",
data: VALUE.iface3,
backgroundColor: 'rgba(255, 0, 0, 1.0)',
borderColor: 'rgba(255, 0, 0, 0.5)',
fill: false,
lineTension: 0,
pointRadius: 2
}, {
label: "cable-upstream 1/12.0",
data: VALUE.iface4,
backgroundColor: 'rgba(128, 0, 0, 1.0)',
borderColor: 'rgba(128, 0, 0, 0.5)',
fill: false,
lineTension: 0,
pointRadius: 2
}, {
label: "cable-upstream 1/13.0",
data: VALUE.iface5,
backgroundColor: 'rgba(0, 0, 0, 1.0)',
borderColor: 'rgba(0, 0, 0, 0.5)',
fill: false,
lineTension: 0,
pointRadius: 2
}, {
label: "cable-upstream 1/14.0",
data: VALUE.iface6,
backgroundColor: 'rgba(128, 0, 128, 1.0)',
borderColor: 'rgba(128, 0, 128, 0.5)',
fill: false,
lineTension: 0,
pointRadius: 2
}, ]
};
var options = {
animation: false,
responsive: true,
title: {
display: true,
position: "top",
text: "Service Group 1",
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom"
},
scales: {
yAxes: [{
ticks: {
max: 30,
min: 15,
stepSize: 0.5,
callback: function (value, index, values) {
return value + " dBmV";
}
},
scaleLabel: {
display: true,
labelString: 'Signal to Noise'
}
}]
}
};
var chart = new Chart(ctx, {
type: "line",
data: data,
options: options
});
},
error: function (data) {
console.log(data);
}
});
});
I expect this chart refreshing each 5 seconds (not refreshing the whole page)

I think you want to refresh the chart every 5 second.
so use this code :
window.setInterval(function(){
/// call your function here
}, 5000);
To stop the loop you can use
clearInterval()
please check this link reference

Related

Add an feature DateOfTheDay in my Chart.js

I looked for a lot of things to add a feature to my chart but
I couldn't find it in the documentation or here,
I would like to add a visual addition of today's date, on the bottom legend for example,
does anyone have any examples or ideas? thank you in advance
new Chart(canvas, {
type: 'line',
data: {
labels: [ <?php echo $txt_labels; ?> ],
datasets: [{
label: 'Réelle',
yAxisID: 'A',
data: [ <?php echo $txt_series1; ?> ],
borderColor: 'rgba(238, 121, 83, 1)',
backgroundColor: 'rgba(0, 0, 0, 0)',
pointBackgroundColor: "rgba(238, 121, 83, 1)",
pointRadius: 5,
}, {
label: 'Attendue',
yAxisID: 'B',
data: [ <?php echo $txt_series2; ?> ],
borderColor: 'rgba(167, 172, 200, 1)',
backgroundColor: 'rgba(0, 0, 0, 0)',
pointBackgroundColor: "rgba(167, 172, 200, 1)",
pointRadius: 5,
}]
},
options: {
animation: {
animateScale: true,
animateRotate: true,
duration: 1500,
easing: 'easeInOutSine',
},
scales: {
x:{
grid: {
borderColor: 'rgba(16, 16, 18, 0.5)',
offset: true,
},
},
A: {
type: 'linear',
position: 'left',
grid: {
display: false,
borderColor: 'rgba(16, 16, 18, 0.5)',
},
ticks: {
font: {
size: 14,
},
callback: function(value, index, values) {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
}
},
},
B: {
type: 'linear',
position: 'right',
}
},
},
},
}
});

charts.js ticks adding padding to themselves (no to canvas or frame)

const ctx = document.getElementById('myChart').getContext('2d');
let point = new Image(30, 30);
point.src = 'yellow_pointer.png';
let gradient = ctx.createLinearGradient(0, 0, 0, 600);
gradient.addColorStop(1, 'rgba(251,189,8, 0.0005)');
gradient.addColorStop(0, 'rgba(255, 191, 8)');
let myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['30Days', '90Days', '180Days', '', '365Days'],
datasets: [{
lineTension: 0.3,
label: '',
data: [2, 3, 6, 12, 24],
backgroundColor: gradient,
borderColor:'#fccc69',
borderWidth:5,
pointBorderColor: 'transparent',
fill: true,
pointStyle: [point,point,point,'none',point],
pointRadius: 10,
pointHitRadius: 25,
hoverWidth: 2,
pointBackgroundColor: 'transparent',
pointPaddingLeft: 50,
},
{
lineTension: 0.3,
label: '',
borderColor: 'rgba(0, 0, 0, 0.3)',
borderDash: [15],
data: [5, 7, 12, 24, 40],
backgroundColor: 'transparent',
pointStyle: 'none',
pointBackgroundColor: 'transparent',
pointBorderColor:'transparent'
},
]
},
options: {
responsive: true,
maintainAspectRatio: true,
plugins:{
legend:{
display: false,
}
},
scales: {
y: {
ticks:{
display: false,
},
},
x: {
ticks: {
type: 'time',
autoSkip: false,
font: {
family: 'Montserrat',
size: 20,
color: 'black',
},
},
},
}
}
});
i'd like exact sime of it
and here is mine:
days should be in a ratio of 356 and i cant handle it
which config setting for ticks handles this i tried stepsize bu it seems like it didnt work
at right there is estimated section as you see can it be added by js or do i have to use css this one is css form

Line chart using Chart.js

I have two tables, which I got after the execution of mysql query (table1 is pl_pl and table2 is act_act) in the form:
table1:
label act_hrs
Jan-19 7
Feb-20 8
Mar-20 9
table2:
label pl_hrs
Mar-20 45
Apr-20 53
I have to label all the points in act_hrs and pl_hrs using a line chart with a common x axis of label
. I have tried following javascript code for this:
javascript code:
function show_scurve_Graph()
{
{
var plandata = <?php echo json_encode($pl_pl); ?>;
var actualdata = <?php echo json_encode($act_act); ?>;
var labels = [];
for (var i in plandata) {
labels.push(plandata[i].label);
}
for (var j in actualdata) {
labels.push(actualdata[j].label);
}
new Chart("scurve_chart", {
type: 'line',
data: {
labels: Array.from(labels),
datasets: [{
label: "Planned Hours",
fill: false,
borderColor: "rgba(255, 0, 0, 1)",
pointHoverBackgroundColor: "rgba(255, 0, 0, 1)",
data: plandata.map(o => ({ x: Number(o.label), y: Number(o.pl_hrs)}))
},
{
label: "Actual Hours",
fill: false,
backgroundColor: "rgba(0, 255, 0, 0.75)",
borderColor: "rgba(0, 255, 0, 1)",
pointHoverBackgroundColor: "rgba(0, 255, 0, 1)",
pointHoverBorderColor: "rgba(0, 255, 0, 1)",
data: actualdata.map(o => ({x: Number(o.label), y: Number(o.act_hrs)}))
}
]
},
options: {
tooltips: {
callbacks: {
title: (tooltipItem, data) => "Month " + data.datasets[tooltipItem[0].datasetIndex].data[tooltipItem[0].index].x
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: 'Hours'
}
}],
xAxes: [{
ticks: {
min: 0,
max: 53,
stepSize: 1
},
scaleLabel: {
display: true,
labelString: 'Month'
}
}]
}
}
});
}}
I have used following library for this:
<script src="vendors/jquery/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
I got something like this as output :
The following lines are the culprit:
data: plandata.map(o => ({ x: Number(o.label), y: Number(o.pl_hrs)}))
and
data: actualdata.map(o => ({x: Number(o.label), y: Number(o.act_hrs)}))
The map callback should only return the hour figures, like this:
// Planned
data: plandata.map(o => Number(o.pl_hrs))
// Actual
data: actualdata.map(o => Number(o.act_hrs))
The data property only needs an array of figures you want to plot on the graph. Here is a jsfiddle
Note: you should normalize your data on all data sources based on the labels you use on labels config of the chart. What I mean is, the order of the figures in your data array should correspond to the label order.

Does the min value of the xAxes have to be within the dataset

I'm trying to add the ability to change a 'date' range for my chart, and I've added a button callback that changes the min value of the xAxes and then calls chart.update(), but the chart doesn't change.
I've tried manually entering a number, and unless it's a value in the data given for the table it won't update the graph.
this.analysisChart = new Chart(context, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: calculations.rollingTimestamps,
datasets: [
{
label: 'Cycle Times',
data: calculations.rollingCycleTimesXY,
borderColor: 'rgb(0,255,0,1)',
backgroundColor: 'rgb(0,255,0,0.5)',
type: 'scatter',
showLine: false,
labels: calculations.rollingAliases
},
{
label: 'Rolling μ',
borderColor: 'rgb(255, 99, 132, 1)',
backgroundColor: 'rgb(255, 99, 132, 0.5)',
data: calculations.rollingAverage,
fill: false,
pointRadius: 0
},
{
label: 'Overall μ',
data: calculations.overallAverageArr,
fill: false,
borderColor: 'rgb(0,0,0,1)',
backgroundColor: 'rgb(0,0,0,0.5)',
pointRadius: 0,
showLine: true
},
{
label: 'μ + σ',
data: calculations.rollingMaxStandardDeviation,
fill: 4,
backgroundColor: 'rgb(50,50,255,0.35)',
borderColor: 'rgb(50,50,255,0)',
pointRadius: 0,
showLine: true
},
{
label: 'μ - σ',
data: calculations.rollingMinStandardDeviation,
fill: 3,
backgroundColor: 'rgb(50,50,255,0.35)',
borderColor: 'rgb(50,50,255,0)',
pointRadius: 0,
showLine: true
},
{
label: 'μ + 2 * σ',
data: calculations.rollingMaxSecondStandardDeviation,
fill: 3,
backgroundColor: 'rgb(50,50,255,0.3)',
borderColor: 'rgb(50,50,255,0)',
pointRadius: 0,
showLine: true
},
{
label: 'μ - 2 * σ',
data: calculations.rollingMinSecondStandardDeviation,
fill: 4,
backgroundColor: 'rgb(50,50,255,0.3)',
borderColor: 'rgb(50,50,255,0)',
pointRadius: 0,
showLine: true
}
]
},
// Configuration options go here
options: {
layout: {
padding: {
left: 20,
right: 20,
top: 0,
bottom: 0
}
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += Math.round(tooltipItem.yLabel * 10) / 10;
return label + " days";
}
}
},
hover: {
mode: 'index',
intersect: false
},
scales: {
yAxes: [{
ticks: {
min: 0,
type: 'linear',
callback: function(label, index, labels) {
return label + " days";
}
}
}],
xAxes: [{
ticks: {
type: 'linear',
min: 0,
callback: function(label, index, labels) {
return new Date(label).toDateString();
}
}
}]
},
title: {
display: true,
text: 'Cycle Times'
}
}
});
What I'd like to do is give an arbitrary number and have it perform a greater than check across the data for determining what to cut off rather than doing a find and then cutting anything off that is after that index in the array.
How can I do this?
As a solution, I just wrote a function to iterate through the array and find the first value that is greater than or equal to the value I wanted and then set the min of the xAxes to that value. Not very ideal, but hey at least it works.
I couldn't find anything in the documentation about callbacks for the min value.

Remove blank space in chart.js chart

I have a standard horizontally stacked graph but it seem to have a big gap between the graph and the legend (represented by the big red circle bellow)
I have looked upon many configuration options but I can't find where does it come from
$(function(){
myBarChart = new Chart($("#myChart"), {
type: 'horizontalBar',
data: {
labels: ["Actions"],
datasets: [{
label: 'Closed : 50 (65%)',
data: [50],
backgroundColor: [
'rgba(255, 0, 0, 0.5)'
],
borderColor: [
'rgba(255, 0, 0, 1)'
],
borderWidth: 1
}, {
label: 'Delayed : 20 (12%)',
data: [20],
backgroundColor: [
'rgba(0, 0, 255, 0.5)'
],
borderColor: [
'rgba(0, 0, 255, 1)'
],
borderWidth: 1
},
{
label: 'Open : 12 (5%)',
data: [12],
backgroundColor: [
'rgba(0, 255, 0, 0.5)'
],
borderColor: [
'rgba(0, 255, 0, 1)'
],
borderWidth: 1
}
]
},
options: {
//tooltips: { enabled: false },
maintainAspectRatio: false,
responsive: true,
legend: {
position: "right"
},
scales: {
xAxes: [{
max: 82,
display: false,
gridLines: {
display: false
},
stacked: true
}],
yAxes: [{
max: 82,
display: false,
gridLines: {
display: false,
},
stacked: true,
ticks: {
beginAtZero: true
}
}]
}
}
});
});
Edit : Woopsie, I had forgot to add the fiddle I made :
http://jsfiddle.net/uLUAT/1165/
Use
xAxes: [{
ticks: { max: 82 },
...
}]
instead of
xAxes: [{
max: 82,
...
}]
$(function(){
myBarChart = new Chart($("#myChart"), {
type: 'horizontalBar',
data: {
labels: ["Actions"],
datasets: [{
label: 'Closed : 50 (65%)',
data: [50],
backgroundColor: [
'rgba(255, 0, 0, 0.5)'
],
borderColor: [
'rgba(255, 0, 0, 1)'
],
borderWidth: 1
}, {
label: 'Delayed : 20 (12%)',
data: [20],
backgroundColor: [
'rgba(0, 0, 255, 0.5)'
],
borderColor: [
'rgba(0, 0, 255, 1)'
],
borderWidth: 1
},
{
label: 'Open : 12 (5%)',
data: [12],
backgroundColor: [
'rgba(0, 255, 0, 0.5)'
],
borderColor: [
'rgba(0, 255, 0, 1)'
],
borderWidth: 1
}
]
},
options: {
//tooltips: { enabled: false },
maintainAspectRatio: false,
responsive: true,
legend: {
position: "right"
},
scales: {
xAxes: [{
ticks: { max: 82 },
display: false,
gridLines: {
display: false
},
stacked: true
}],
yAxes: [{
max: 82,
display: false,
gridLines: {
display: false,
},
stacked: true,
ticks: {
beginAtZero: true
}
}]
}
}
});
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<div style="border:1px solid black">
<canvas id="myChart" height="100"></canvas>
</div>
http://jsfiddle.net/uLUAT/1166/
I tried different things but I cant fix it. Can you change your data? If your datas total equal 100 there is no problem I think
data: {
labels: ["Actions"],
datasets: [{
label: 'Closed : 50 (65%)',
data: [50],
backgroundColor: [
'rgba(255, 0, 0, 0.5)'
],
borderColor: [
'rgba(255, 0, 0, 1)'
],
borderWidth: 1
}, {
label: 'Delayed : 20 (12%)',
data: [20],
backgroundColor: [
'rgba(0, 0, 255, 0.5)'
],
borderColor: [
'rgba(0, 0, 255, 1)'
],
borderWidth: 1
}, {
label: 'Open : 12 (5%)',
data: [30],
backgroundColor: [
'rgba(0, 255, 0, 0.5)'
],
borderColor: [
'rgba(0, 255, 0, 1)'
],
borderWidth: 1
}]
},
http://jsfiddle.net/uLUAT/1167/ I created a function check out. You dont need to change values any more.
var total = 0;
var value = 0;
for (var i = 0; i < myBarChart.data.datasets.length; i++) {
total += myBarChart.data.datasets[i].data[0]
}
value = (100 - total) / myBarChart.data.datasets.length
for (var i = 0; i < myBarChart.data.datasets.length; i++) {
myBarChart.data.datasets[i].data[0] += value;
}
myBarChart.update();

Categories

Resources