chart.js 2, animate right to left (not top-down) - javascript

the jsfiddle below shows the problem.
The first data inserts are fine, but when the length of the data set is capped at 10 you see the undesired behaviour where data points are animated top-down instead of moving left. It's extremely distracting.
http://jsfiddle.net/kLg5ntou/32/
setInterval(function () {
data.labels.push(Math.floor(Date.now() / 1000));
data.datasets[0].data.push(Math.floor(10 + Math.random() * 80));
// limit to 10
data.labels = data.labels.splice(-10);
data.datasets[0].data = data.datasets[0].data.splice(-10);
chart.update(); // addData/removeData replaced with update in v2
}, 1000);
Is there a way to have the line chart move left having the newly inserted data point appear on the right? As opposed to the wavy distracting animation?
thanks

This code uses streaming plugin and works as expected.
http://jsfiddle.net/nagix/kvu0r6j2/
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming#1.5.0/dist/chartjs-plugin-streaming.min.js"></script>
var ctx = document.getElementById("chart").getContext("2d");
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(95,186,88,0.7)",
borderColor: "rgba(95,186,88,1)",
pointBackgroundColor: "rgba(0,0,0,0)",
pointBorderColor: "rgba(0,0,0,0)",
pointHoverBackgroundColor: "rgba(95,186,88,1)",
pointHoverBorderColor: "rgba(95,186,88,1)",
data: []
}]
},
options: {
scales: {
xAxes: [{
type: 'realtime'
}]
},
plugins: {
streaming: {
onRefresh: function(chart) {
chart.data.labels.push(Date.now());
chart.data.datasets[0].data.push(
Math.floor(10 + Math.random() * 80)
);
},
delay: 2000
}
}
}
});

You should use 2.5.0 chartsjs
here it works :
http://jsfiddle.net/kLg5ntou/93
var data = {
labels: ["0", "1", "2", "3", "4", "5", "6"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(95,186,88,0.7)",
strokeColor: "rgba(95,186,88,1)",
pointColor: "rgba(0,0,0,0)",
pointStrokeColor: "rgba(0,0,0,0)",
pointHighlightFill: "rgba(95,186,88,1)",
pointHighlightStroke: "rgba(95,186,88,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
var ctx = document.getElementById("chart").getContext("2d");
var chart = new Chart(ctx, {type: 'line', data: data});
setInterval(function () {
chart.config.data.labels.push(Math.floor(Date.now() / 1000));
chart.config.data.datasets[0].data.push(Math.floor(10 + Math.random() * 80));
// limit to 10
chart.config.data.labels.shift();
chart.config.data.datasets[0].data.shift();

Related

How do I remove cartesian axes from chart js?

I am trying to personalize a chart.js. But I can not find how to remove (or hide) the X and Y axes.
I am also interested in not showing data on hover and I would like not to show the reference on the top. I am just starting with chart.js and I only need to do a few graphs.
Thank you :)
This is the graph I currently have
datasets: {
label: "I need help plz",
backgroundColor: gradient,
fill: true,
borderColor: "rgb(0, 50, 100)",
borderWidth: 0.001,
tension: 0.4,
radius: 0,
data: dataset,
},
For removing the references on the top this post was useful Chart.js v2 hide dataset labels
As described in the documentation (https://www.chartjs.org/docs/master/axes/#common-options-to-all-axes) you can set in the options of the scale the display to true or false or 'auto' where auto hides the scale if no dataset is visable that is linked to that axis.
For not showing data on hover you can set the tooltip to enabled: false
Example (y auto display and no x axis):
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
backgroundColor: 'red'
}, ]
},
options: {
plugins: {
tooltip: {
enabled: false
}
},
scales: {
y: {
display: 'auto'
},
x: {
display: false
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.js"></script>
</body>

Chartjs Radar chart - How to dynamically highlight one of the gridlines at a specific point

I create a radar chart to display data which comes from my backend. The data is dynamic, but I would like to highlight the gridline at 60 as shown below. Does chartjs have any solution to achieve it?
const gray = "rgb(200, 200, 200)";
const color = Chart.helpers.color;
const config = {
type: 'radar',
data: {
labels: [['Eating', 'Dinner'], ['Drinking', 'Water'], 'Sleeping', ['Designing', 'Graphics'], 'Coding', 'Cycling', 'Running'],
datasets: [{
label: 'My dataset',
backgroundColor: color(gray).alpha(0.2).rgbString(),
borderColor: gray,
pointBackgroundColor: gray,
data: [
80,
90,
60,
65,
78,
97,
55
]
}]
},
options: {
scale: {
gridLines: {
circular: true,
color: [gray, gray, 'blue', gray, gray, gray, gray, gray, gray, gray]
},
ticks: {
beginAtZero: true,
stepsize: 20
},
}
}
};
window.onload = function () {
window.myRadar = new Chart(document.getElementById('chart'), config);
};
<body>
<canvas id="chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>
enter code hereSince your data is dynamic, you need to compute scale.gridLines.colors based on the data. This could be done as follows:
const data = [80, 90, 60, 65, 78, 97, 55];
const gridLinesStepSize = 20;
const highlightedGridLine = 60;
const gridLineColors = Array.from(Array(Math.ceil(Math.max(...data) / gridLinesStepSize) + 1).keys())
.map(n => n * 20)
.slice(1)
.map(v => v == highlightedGridLine ? 'blue' : gray);
Please take a look at your amended runnable code and see how it works.
const gray = "rgb(200, 200, 200)";
const color = Chart.helpers.color;
const data = [80, 90, 60, 65, 78, 97, 55];
const gridLinesStepSize = 20;
const highlightedGridLine = 60;
const gridLineColors = Array.from(Array(Math.ceil(Math.max(...data) / gridLinesStepSize) + 1).keys())
.map(n => n * 20)
.slice(1)
.map(v => v == highlightedGridLine ? 'blue' : gray);
new Chart('chart', {
type: 'radar',
data: {
labels: [
['Eating', 'Dinner'],
['Drinking', 'Water'], 'Sleeping', ['Designing', 'Graphics'], 'Coding', 'Cycling', 'Running'
],
datasets: [{
label: 'My dataset',
backgroundColor: color(gray).alpha(0.2).rgbString(),
borderColor: gray,
pointBackgroundColor: gray,
data: data
}]
},
options: {
scale: {
gridLines: {
circular: true,
color: gridLineColors
},
ticks: {
beginAtZero: true,
stepsize: gridLinesStepSize
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id="chart" height="120"></canvas>

Chart.js add tooltip at intersection of axes (break even)

I have a simple Chart.js line chart, which shows the costs of two decisions. I now want to show the break even of one over the other, which is basically the intersection.
I made an example of what I have so far here
var ctx = document.getElementById("chart");
var options = {
type: 'line',
data: {
labels: ["1", "2", "4", "6", "7", "10"],
datasets: [
{
backgroundColor: "rgba(151,187,205,0.2)",
borderColor: "rgba(151,187,205,1)",
data: [80, 80, 80, 80, 80, 80]
},
{
backgroundColor: "rgba(220,220,220,0.2)",
borderColor: "rgba(220,220,220,1)",
data: [8.84, 17.68, 35.36, 53.04, 70.72, 88.4]
}
]
},
options: {
tooltips: {
enabled: false
},
legend: {
position: 'top'
}
}
};
var myChart = new Chart(ctx, options);
How can I
Show a tooltip at the interception of the two lines
Show the values for the interception (inside a tooltip or at the axis)
Move the legend inside the chart
Any help would be appreciated. Thank you.
This is very specific to the problem
Chart.plugins.register({
afterInit: function(chart) {
var intersect = getIntersection();
var datasets = chart.data.datasets;
var labels = chart.data.labels;
labels.push(intersect.x)
labels.sort(function(a,b){return a - b});
y = labels.indexOf(intersect.x);
chart.data.datasets.forEach(function(ds,i){ds.data.splice(y, 0, intersect.y)});
}
})
function getIntersection(){
var y2=17.68, y1=8.84,x2=2,x1=1,x3 = x1, x4 = x2,
y4=80,y3=80;
var x=((x1*y2-y1*x2)*(x3-x4)-(x1-x2)*(x3*y4-y3*x4))/((x1-x2)*(y3-y4)-(y1-y2)*(x3-x4));
var y=((x1*y2-y1*x2)*(y3-y4)-(y1-y2)*(x3*y4-y3*x4))/((x1-x2)*(y3-y4)-(y1-y2)*(x3-x4));
x = Math.round(x*100)/100;
y = Math.round(y*100)/100;
return {x:x,y:y} ;
http://jsfiddle.net/o3cyhxrn/4/

Is it possible to add individual labels to Chart.JS bars?

I have a fully functional Chart.JS Barchart which loads as intended, however I would like to add the username to each bar which is associated to them so administrators (who can see all entries) can distinguish between them.
function BarChart(data) {
var barChartData = {
labels: data.Month,
datasets: [
{
label: 'Weight (kg)',
fillColor: "rgba(220,220,220,0.5)",
backgroundColor: "rgba(46, 44, 211, 0.7)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: data.Weight
},
{
label: 'Steps',
fillColor: "rgba(0,0,0,0.5)",
backgroundColor: "rgba(215, 44, 44, 0.7)",
highlightFill: "rgba(0,0,0,0.5)",
highlightStroke: "rgba(0,0,0,0.5)",
data: data.Steps
}
]
}
var ctx = document.getElementById("barchart").getContext("2d");
window.myBar =new Chart(ctx, {
type: 'bar',
data: barChartData,
options: { responsive: true }
});
I have successfully passed through the Usernames and they can be called by using data.User, however when I append this to the Steps or Weight label, I end up with "Steps for: admin,admin,admin" (since I have three entries, all from admin).
Is it possible to have it so each bar has the username it belongs to?
Maybe not quite what you asked for, but you could add it to the tooltip.
options: {
tooltips:{
callbacks: {
afterLabel: function(e){return "added By:" +data.User[e.datasetIndex][e.index]}
}
}
}
https://jsfiddle.net/r71no58a/7/

Why is this function causing the browser refresh button to grey out?

I am testing a real time graph with chart js, and wrote the simple code below. Every second, I want to redraw the graph with some new data (shift and push in the datas and labels array). Despite how ugly it is, it works, and updates the graph every second. However, the refresh button greys out (for some milliseconds) every time the function executes, even if there is no interaction with the network. Why?
setInterval(function() {
var ctx = document.getElementById("line-chart-1").getContext("2d");
var chart1 = window.chart1;
var d1 = chart1.data.datasets[0].data;
var lab1 = chart1.data.labels;
var newData = dataPointGenerator(70, 80);
d1.shift();
d1.push(newData.data);
lab1.shift();
lab1.push(newData.time);
window.chart1 = new Chart(ctx, {
type: 'line',
data: {
labels : lab1,
datasets : [
{
label: 'names[0]',
fill: false,
borderColor: "rgb(75,192,192)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgb(75,192,192)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgb(75,192,192)",
pointHoverBorderColor: "rgb(75,192,192)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data : d1
}
]
},
options: {
animation : false,
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'kW'
}
}]
}
}
});
function dataPointGenerator(start, end) {
var rand = Math.floor(Math.random() * (end - start + 1) + start);
var date = new Date();
return {
data : rand,
time : date
}
};

Categories