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
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',
}
},
},
},
}
});
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
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.
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.
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();