Add and remove data simultaneously to ChartJS chart - javascript

For visualisation purposes I'm trying to add data to a chart and simultaneously remove the first data point from the chart every 500ms.
It works when I do either of .addData() or removeData() on their own, but when I try and combine them into one function to run at the same time, neither of them works.
Is there a way I can create this function to simultaneously add and remove data, or at a minimum remove the first data point shortly after I've added the new last data point?
Here's the data and setup:
var ctx = document.getElementById('myChart').getContext('2d');
ctx.height = 220;
var data = {
"labels": [
"0",
"1",
"2",
"3",
"4"
],
"datasets": [
{
"label": "2014",
"backgroundColor": "#0055FA",
"fill": true,
"data": [
"50",
"40",
"55",
"35",
"45",
"50",
"15",
"100"
],
"borderColor": "transparent",
"borderWidth": "0",
"pointBackgroundColor":"#ffffff"
}
]
};
var options = {
"title": {
"display": false,
"text": "Ad Revenue Comparison 2014-2015",
"position": "bottom",
"fullWidth": true,
"fontColor": "#aa7942",
"fontSize": 16
},
"legend": {
"display": false,
"fullWidth": true,
"position": "top"
},
"scales": {
"yAxes": [
{
"ticks": {
"beginAtZero": true,
"display": true
},
"gridLines": {
"display": false
},
"scaleLabel": {
"display": false,
"labelString": "USD in Millions"
},
"display": false
}
],
"xAxes": {
"0": {
"ticks": {
"display": false
},
"display": false,
"gridLines": {
"display": false
},
"scaleLabel": {
"display": false
}
}
}
},
"tooltips": {
"enabled": false
},
"elements": {
"arc": {
"backgroundColor": "#009BD0"
},
"line": {
"backgroundColor": "#009BD0",
"fill": true,
"borderColor": "#e2fdff"
},
"point": {
"radius": 3,
"pointStyle": "circle",
"backgroundColor": "#ffffff"
}
}
};
Here are the functions:
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
function removeData(chart) {
chart.data.labels.pop();
chart.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
chart.update();
}
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.update();
}
setInterval(function(){
addData(myChart,"4",Math.floor(Math.random() * 60));
removeData(myChart);
}, 500);
//setInterval(function(){ removeData(myChart); }, 500);
</script>

Related

how to set labeloffset dynamically in chart Js

I am using Chart.js, I have to generate stack bar chart based on fromMonth to toMonth selection.
My bar chart option is:
{
"chartCanvasHeight": "200",
"chartOptions": {
"responsive": "true",
"tooltips": {
"mode": "nearest",
"callbacks": {
"label": null,
"title": {}
}
},
"legend": {
"position": "bottom",
"labels": {
"generateLabels": {}
}
},
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": "true",
"callback": {}
},
"scaleLabel": {
"display": true,
"labelString": ""
}
}],
"xAxes": [{
"id": "xAxis1",
"type": "category",
"ticks": {
"display": false
}
},
{
"id": "xAxis2",
"type": "linear",
"offset": true,
"ticks": {
"max": 12,
"beginAtZero": true,
"stepSize": 0.5,
"callback": {}
},
"gridLines": {
"offsetGridLines": true,
"color": "white",
"zeroLineColor": "white"
}
},
{
"id": "xAxis3",
"type": "linear",
"ticks": {
"beginAtZero": false,
"max": 12,
"stepSize": 1,
"callback": {}
},
"gridLines": {}
},
{
"id": "xAxis4",
"ticks": {
"display": false
},
"scaleLabel": {
"display": true,
"labelString": ""
},
"gridLines": {
"zeroLineColor": "white",
"color": "white",
"drawOnChartArea": false
}
}
]
},
"plugins": {
"datalabels": {
"align": "top",
"anchor": "end",
"textAlign": "center"
},
"afterDatasetsDraw": {}
}
},
"chartDataSets": [],
"chartLabels": [],
"chartType": "bar"
}
everything is coming but labels are not center aligned as months could be between Jan to Dec. how to center align both x-axis label or labeloffset dynamically.
drawOnChartArea is also not working.
Last stork is also not coming on months x-axis.

Title in top column charts

I have a problem with using headings on the top of the columns using the bar chart.
In some moments shows the title, and other moment does not show ...
Here my Print!
chart = new Highcharts.Chart({
"chart": {
"renderTo": "container_adwords",
"type": "column",
"animation": false
},
"title": {
"text": "Formul\u00e1rio | Chatbot | Whatsapp)"
},
"colors": ["#1d6c3f", "#003f23", "#68a9dc", "#007b5a", "#e4452b", "#ba0d00", "#004b76", "#b6740c", "#1b964e", "#f79969", "#fdc076", "#24a1ae", "#e46a2b", "#ff7754", "#83ccb0", "#6ecbd6", "#ec9631", "#65c07f", "#147bb6", "#005a64"],
"series": [{
"name": "2018",
"data": [575, 360.818182, 194.285714, 410.1, 212, 161.92, 344.846154, 203.639, 824.268, 130.406333, 323.399231, 657.198889]
}, {
"name": "2019",
"data": [1236.88, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}],
"xAxis": {
"categories": ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
"labels": {
"style": {
"fontSize": "15px"
}
}
},
"yAxis": {
"min": 0,
"title": {
"text": "Quantidade"
}
},
"legend": {
"align": "center",
"verticalAlign": "bottom"
},
"tooltip": {
"formatter": function() {
return '' + this.x + ': R$ ' + this.y.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+\,)/g, "$1.");
}
},
"plotOptions": {
"column": {
"dataLabels": {
"enabled": true,
"crop": true,
"overflow": "none",
"style": {
"fontSize": "14px"
},
"formatter": function() {
return 'R$ ' + this.y.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+\,)/g, "$1.");
}
}
}
}
});
I looked in the Highcharts documentation, but I could not identify anything that could help me on this subject.

Change dataLabels.overflow to "justify".
"plotOptions": {
"column": {
"dataLabels": {
"color": "black",
"enabled": true,
"crop": false,
"overflow": "justify",
"style": {
"fontSize": "14px"
},
"formatter": function() {
return 'R$ ' + this.y.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+\,)/g, "$1.");
}
}
}
}
https://jsfiddle.net/vdLtw9as/
(I also changed the color, because I don't like it when is does the contrast thing)

Chart.js bar graph not centered when there is only 1 item

When there is only one item in a bar graph the bar isn't centered:
https://codepen.io/anon/pen/rKmrpX?editors=1010
HTML:
<canvas id="myChart" width="400" height="400"></canvas>
JS:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
"labels": ["2018-06-01T04:00:00.000Z"],
"datasets": [{
"type": "bar",
"label": "Earnings",
"yAxisID": "left-y-axis",
"borderColor": "rgba(107, 165, 57, 1)",
"backgroundColor": "rgba(107, 165, 57, 0.4)",
"data": [25.77]
}, {
"type": "line",
"label": "Pageviews",
"yAxisID": "right-y-axis",
"backgroundColor": "rgba(70, 152, 203, 0.4)",
"borderColor": "rgba(70, 152, 203, 1)",
"pointBackgroundColor": "rgba(70, 152, 203, 1)",
"pointRadius": 0,
"data": [3426]
}]
},
options: {
"scales": {
"xAxes": [{
"maxBarThickness": 100,
"type": "time",
"offset": true,
"time": {
"unit": "day",
"tooltipFormat": "MMM-D",
"displayFormats": {
"day": "MMM-D",
"month": "MMM"
}
},
"ticks": {
"maxRotation": 0,
"maxTicksLimit": 7,
"autoSkip": true
},
"gridLines": {
"display": false,
"offsetGridLines": true
}
}],
"yAxes": [{
"id": "left-y-axis",
"type": "linear",
"position": "left",
"ticks": {
"beginAtZero": true
},
"scaleLabel": {
"display": true,
"labelString": "Earnings"
}
}, {
"id": "right-y-axis",
"type": "linear",
"position": "right",
"ticks": {
"beginAtZero": true
},
"gridLines": false,
"scaleLabel": {
"display": true,
"labelString": "Pageviews"
}
}]
},
"tooltips": {
"callbacks": {}
}
}
});
Is there a fix for this? Perhaps I'm missing an option that should be passed in?
Using the latest version of Chart.js (2.7.2) here.

Removing most of the xAxes config seams to give the result you are looking for
https://codepen.io/tryggvigy/pen/rKmQpX?editors=1010
"scales": {
"xAxes": [{
"maxBarThickness": 100,
}],

How to render overall data labels using highcharts?

I'm having trouble displaying the targets variable for the data labels in the chart shown below.
For some reason the series data labels display only the targetsAdjvalue.
I tried adding stacked labels on the y-axis but it didn't work. How else can this be done?
ar targets = [<?php echo $gg[0][24].",".$gg[0][20].",".$gg[0][26].",".$gg[0][22].""; ?>],
mcbf = [ <?php echo $gg[0][16].",".$gg[0][17].",".$gg[0][18].",".$gg[0][19].""; ?>],
targetsAdj = [],
attagg=[],
calc,
calc2;
for (var i=0;i<targets.length;i++) {
calc = targets[i] >= mcbf[i] ? targets[i] - mcbf[i] : 0;
targetsAdj.push(calc);
}
for (var i=0;i<mcbf.length;i++) {
calc2 = (mcbf[i]/targets[i])>=0.7 ? {y:mcbf[i],color:'#1de9b6',borderColor:'#00bfa5'} : ((mcbf[i]/targets[i])>=0.4 ? {y:mcbf[i],color:'#ffeb3b',borderColor:'#fdd835'}:{y:mcbf[i],color:'tomato',borderColor:'#d84315'});
attagg.push(calc2);
}
$('#attivazioni').highcharts(
{
"colors":
["tomato"
, "lime"
, "rgba(139,188,33,.5)"
, "rgba(145,0,0,.5)"
, "rgba(26,173,206,.5)"
, "rgba(73,41,112,.5)"
, "rgba(242,143,67,.5)"
, "rgba(119,161,229,.5)"
, "rgba(196,37,37,.5)"
, "rgba(166,201,106,.5)"],
"chart": {
"zoomType": "x",
"showAxis": true,
"alignTicks": true,
//"height": 300,
"style": {
"fontFamily": "Helvetica, Arial, sans-serif",
"color": "#333"
},
"backgroundColor": "#ffffff"
},
"title": {
"text": " "
},
"xAxis": [{
"tickmarkPlacement": "on",
"labels": {
"style": {
"fontSize": "10px",
"color": "#333"
},
"useHTML": true
},
"gridLineColor": "lightgrey",
"gridLineWidth": 0,
"categories": ["<span style=\"font-size:12px\"><b>Lead</span>"
, "<span style=\"font-size:12px\"><b>Lvc</span>"
, "<span style=\"font-size:12px\"><b>Push</span>"
, "<span style=\"font-size:12px\"><b>AddOn</span>"]
}],
"yAxis": [{
"alternateGridColo": "null",
"minorTickInterval": "auto",
"lineColor": '#000',
"tickWidth": "1",
"tickColor": '#000',
"gridLineColor": "#C0C0C0",
"gridLineWidth": 1,
"lineColor": "#C0C0C0",
"lineWidth": 1,
"endOnTick": true,
"min": 0,
"labels": {
"formatter": function () {
return '%' + this.axis.defaultLabelFormatter.call(this);
} ,
"style": {
"fontSize": "10px",
"color": "black"
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function() {
return Highcharts.numberFormat(this.total, 2, ',');
}
},
title: {
text: '',
style: {
display: 'none'
}
},
subtitle: {
text: '',
style: {
display: 'none'
}
},
}],
"legend": {
"enabled": false
},
"navigation": {
"buttonOptions": {
"enabled": false
}
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true,
"style": {
"color": "#333"
},
"crop": false,
"overflow": "none"
},
"shadow": false,
"marker": {
"enabled": false
}
},
"column": {
"grouping": false,
"stacking": "percent",
"shadow": false
}
},
"credits": {
"enabled": false
},
"tooltip": {
"enabled": false,
"shared": true,
"valueDecimals": 0
},
"series": [{
"name": "Target",
"type": "column",
"color": "rgba(140, 131, 131, 0.49)",
"borderColor": "#B0BEC5",
"borderWidth": 2,
"data": targetsAdj,
"dataLabels": {
y:-18,
verticalAlign:'top',
"formatter": function() {
if (this.series.index == 0) return targets[this.point.x];
else return this.y;
}
}
},{
"name": "SELLS",
"type": "column",
"data": attagg,
"color": "#1de9b6",
"borderColor": "grey",
"borderWidth": 2,
"zIndex": 10
} ]
});

i resolved by setting series datalabels to false. and changing yaxis settings to :
yAxis: {
min: 0,
max: 105,
endOnTick: false,
title: {
text: null
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'black'
}
}
},

How to display no data found in highcharts

In highcharts, if there is no data found in the json value, I want to display an error message.
I used this code:
if(options.series[0].data.length == 0) {
alert('nodatafound');
} else {
var chart = new Highcharts.Chart(options);
}
This error appears:
TypeError: options.series[0].data is undefined
Data from JSON:
{
"chart": {
"renderTo": "container2",
"type": "column",
"marginRight": 10,
"marginBottom‌": 125
},
"title": {
"text": "",
"x": -20
},
"exporting": {
"enabled": false
},
"credits": {
"enab‌led": false
},
"subtitle": {
"text": "",
"x": -20
},
"xAxis": {
"labels": {
"rotation": -90,
"sty‌le": {
"fontSize": "10px"
}
}
},
"yAxis": {
"title": {
"text": ""
},
"plotLines": [{
"width": 1,
"c‌olor": "#808080"
}]
},
"tooltip": {
"shared": true
},
"legend": {
"align": "right",
"verticalA‌lign": "top",
"x": 0,
"y": 20,
"borderWidth": 0
},
"plotOptions": {
"column": {
"stacking": "no‌rmal",
"dataLabels": {
"enabled": false,
"color": "white"
}
}
},
"series": [{
"name": "2015-16-Q1"
}, {
"name": "2015-16-Q2"
}, {
"name": "2015-16-Q3"
}, {
"na‌me": "2015-16-Q4"
}]
}

You can use no-data module which allows do that.
Ref: http://code.highcharts.com/modules/no-data-to-display.js
Example: http://jsfiddle.net/6o8o03fe/1/

Categories