Highcharts, stacked column range with date in y-axis - javascript

The highcharts is rendering the chart when the series data is hardcoded and when the data is passed through a variable from backend, it doesn't generate a chart.
series: [{
name: 'T1',
stack: 'Tasks',
color: 'blue',
data: [ { x: 0,
low: Date.UTC(2015, 2, 13, 11, 42, 02),
high: Date.UTC(2015, 2, 13, 14, 15, 53)},
{ x: 1,
low: Date.UTC(2015, 2, 13, 11, 42, 02),
high: Date.UTC(2015, 2, 13, 11, 42, 02)},
{ x: 2,
low: Date.UTC(2015, 2, 13, 11, 42, 02),
high: Date.UTC(2015, 2, 13, 15, 54, 23)},
{ x: 3,
low: Date.UTC(2015, 2, 13, 11, 42, 02),
high: Date.UTC(2015, 2, 13, 14, 17, 08)},
{ x: 4,
low: Date.UTC(2015, 2, 13, 11, 42, 02),
high: Date.UTC(2015, 2, 13, 17, 23, 13)} ]
}, {
name: 'T2',
stack: 'Tasks',
color: 'green',
data: [ { x: 0,
low: Date.UTC(2015, 2, 13, 14, 15, 53),
high: Date.UTC(2015, 2, 13, 14, 17, 08)},
{ x: 1,
low: Date.UTC(2015, 2, 13, 11, 42, 02),
high: Date.UTC(2015, 2, 13, 13, 23, 02)},
{ x: 3,
low: Date.UTC(2015, 2, 13, 14, 17, 08),
high: Date.UTC(2015, 2, 13, 14, 24, 55)} ]
}, {
name: 'T3',
stack: 'Tasks',
color: 'red',
data: []
}]
When the value is coming from backend, the code is
series: [{
name: 'T1',
stack: 'Tasks',
color: 'blue',
data: (function(){
var data = [];
var temp = {};
for(i in msg.T1){
temp.x = msg.T1[i].x;
// temp.low = new Date(msg.T1[i].low) or Date.UTC(new Date(msg.T1[i].low);
// temp.high = new Date(msg.T1[i].high);
temp.low = parseInt(i);
temp.high = parseInt(i)+2;
data.push(temp);
}
return data;
}())
}, {
name: 'T2',
stack: 'Tasks',
color: 'green',
data: (function(){
var data = [];
var temp = {};
for(i in msg.T2){
temp.x = msg.T2[i].x;
// temp.low = new Date(msg.T2[i].low);
// temp.high = new Date(msg.T2[i].high);
temp.low = parseInt(i);
temp.high = parseInt(i)+2;
data.push(temp);
}
return data;
}())
}, {
name: 'T3',
stack: 'Tasks',
color: 'red',
data: (function(){
var data = [];
var temp = {};
for(i in msg.T3){
temp.x = msg.T3[i].x;
// temp.low = new Date(msg.T3[i].low);
// temp.high = new Date(msg.T3[i].high);
temp.low = parseInt(i);
temp.high = parseInt(i)+2;
data.push(temp);
}
return data;
}())
}]
});
The second code, despite throwing no error, does not render the chart.
What is wrong in the data format


The problem is fixed, issue was that the value of x in temp.x, the data object passed to series, should be integer only, no Strings or any other data types are allowed. Fixing that fixed the chart

Related

Sorting of second array of x-axis in a single trace is not working in plotly js

sorting of second array of x-axis in a single trace is not working
The corresponding X2s of X1:2023 are already sorted but when it reaches to Plotly, it got rearranged automatically.
The input we give to the plot :
x = [
x1 ['2022','2022','2022','2023','2023','2023','2023','2023','2023','2023','2023','2023','2023','2023'],
x2 ['OCT', 'NOV', 'DEC','JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV']
];
var x = [['2022','2022','2022','2023','2023','2023','2023','2023','2023','2023','2023','2023','2023','2023'], ['OCT', 'NOV', 'DEC','JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV']];
var trace1 = {
x: x,
y: [20, 14, 23, 50, 20, 20, 14, 23, 50, 20, 20, 14, 28, 50],
marker:{color: '#c44343'},
name: 'trace01',
type: 'bar',
//showscale: false
};
var trace2 = {
x: x,
y: [12, 18, 29, 15 ,25, 12, 18, 29, 15 ,25, 12, 18, 29, 18],
marker:{color: '#93d161', size: 15},
name: 'trace02',
type: 'bar',
//showscale: false
};
var trace3 = {
x: x,
y: [10, 15, 20, 25, 30, 35, 40, 45, 43, 40, 41, 39, 37, 35],
name: 'trace03',
line: {color: '#9cbee9'},
marker: {size:12, color:'#1c69c7', line:{width:2}},
type: 'line'
};
var data = [trace1, trace2, trace3];
var layout = {
barmode: 'stack',
//xaxis: {
// categoryorder: 'array',
// categoryarray: [['2022','2022','2022','2023','2023','2023','2023','2022','2023','2023','2023','2023','2023','2023'], ['OCT', 'NOV', 'DEC','JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV']],
//}
};
var config = {responsive: true, displaylogo: false, locale: 'ko', displayModeBar: true};
Plotly.newPlot('myDiv', data, layout, config);
how can i solve this problem thanks.
Here is the sample
https://codepen.io/peterkim3219/pen/wvmVqGK?editors=1010

Group data by weekdays in Highchart

I'm plotting a graph that needs to combine data of a selected date range to weekdays i mean if i selected a date range from ex: 2021-05-01 to 2021-05-31 in that consider 2021-05-01,2021-05-08,2021-05-15 these days are Friday so i need to combine datas of these dates and show as one data with label friday. With the current options that i used the chart is plotting like this. Is there any ways to display it correctly.
Demo Fiddle
This is the way that i currently getting the result
This is the result that i'm expecting
These are the current configd that i'm using in the highchart.
Highcharts.chart("multistackedbarchart-II", {
chart: {
type: "column",
},
title: {
text: "Sent/Received Comparison",
},
xAxis: {
title: {
text: "Day",
},
categories: [labels],
},
yAxis: {
min: 0,
title: {
text: "",
},
stackLabels: {
enabled: false,
style: {
fontWeight: "bold",
color:
// theme
(Highcharts.defaultOptions.title.style && Highcharts.defaultOptions.title.style.color) ||
"gray",
},
},
},
legend: {
align: "center",
verticalAlign: "bottom",
x: 0,
y: 0,
},
tooltip: {
headerFormat: "<b>{point.x}</b><br/>",
pointFormat: "{series.name}: {point.y}",
},
plotOptions: {
column: {
stacking: "normal",
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
},
},
series: chartdata.multistackedbarchart,
credits: {
enabled: false,
},
});
Highcharts.setOptions({ lang: { noData: "No Data Available" } });

You can make a special function to do this sorting by using Array.map() and Array.filter() methods:
const categories = [
"2021-08-04",
"2021-08-05",
"2021-08-06",
"2021-08-07",
"2021-08-08",
"2021-08-09",
"2021-08-10",
"2021-08-11",
"2021-08-12",
"2021-08-13",
"2021-08-14",
"2021-08-15",
"2021-08-16",
"2021-08-17",
"2021-08-18",
"2021-08-19",
"2021-08-20",
"2021-08-21",
"2021-08-22",
"2021-08-23",
"2021-08-24",
"2021-08-25",
"2021-08-26",
"2021-08-27",
"2021-08-28",
"2021-08-29",
"2021-08-30",
"2021-08-31",
"2021-09-01",
"2021-09-02",
"2021-09-03",
"2021-09-04",
"2021-09-05",
"2021-09-06",
"2021-09-07",
"2021-09-08",
"2021-09-09",
"2021-09-10",
"2021-09-11",
"2021-09-12",
"2021-09-13",
"2021-09-14",
"2021-09-15",
"2021-09-16",
"2021-09-17",
"2021-09-18",
"2021-09-19",
"2021-09-20",
"2021-09-21",
"2021-09-22",
"2021-09-23",
"2021-09-24",
"2021-09-25",
"2021-09-26",
"2021-09-27",
"2021-09-28",
"2021-09-29",
"2021-09-30",
"2021-10-01",
"2021-10-02",
"2021-10-03",
"2021-10-04",
"2021-10-05",
"2021-10-06",
"2021-10-07",
"2021-10-08",
"2021-10-09",
"2021-10-10",
"2021-10-11",
"2021-10-12"]
const messagesSent = [ 32,
60,
71,
3,
1,
25,
16,
23,
28,
25,
2,
1,
43,
49,
32,
35,
26,
2,
1,
8,
36,
47,
15,
20,
2,
1,
2,
18,
20,
30,
43,
4,
4,
15,
14,
48,
39,
3,
2,
0,
48,
34,
15,
9,
1,
3,
1,
85,
27,
72,
11,
4,
2,
0,
29,
13,
21,
15,
32,
2,
0,
58,
37,
37,
24,
5,
1,
0,
0,
0]
const messagesReceived = [29,
79,
80,
7,
2,
24,
32,
23,
44,
42,
3,
1,
65,
69,
46,
47,
23,
3,
1,
28,
35,
65,
22,
19,
4,
1,
7,
10,
32,
31,
13,
8,
2,
4,
48,
53,
46,
7,
4,
0,
48,
40,
23,
18,
2,
6,
2,
79,
25,
86,
9,
8,
5,
0,
25,
18,
18,
14,
37,
2,
0,
52,
70,
27,
25,
17,
1,
0,
0,
0]
const organizeData = (days, sent, received) => {
const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
// get name of weekday
const getDayOfWeek = date => {
const dayOfWeek = new Date(date).getDay();
return isNaN(dayOfWeek) ? null : dayNames[dayOfWeek];
}
return dayNames.map((dayName) => {
let correspondingMessagesSent = []
let correspondingMessagesReceived = []
const matchedDays = days.filter((day, index) => {
if(dayName === getDayOfWeek(day)) {
correspondingMessagesSent.push(sent[index])
correspondingMessagesReceived.push(received[index])
return day
}
})
return { [dayName]: { dates: matchedDays,
sent: correspondingMessagesSent,
received: correspondingMessagesReceived} }
})
}
console.log(organizeData(categories, messagesSent, messagesReceived))
/* This is not a part of answer. It is just to give the output fill height. So IGNORE IT */
.as-console-wrapper { max-height: 100% !important; top: 0; }

Limit x-axis in Apexcharts.js

I want to limit the x-axis in the bar graph I'm using, I have multiple values but I want to show only 7 and then the user can scroll to see the remaining. Does this option exist?

Setting the value of the xaxis.range property should help.
var options = {
series: [
{
name: 'PRODUCT A',
data: [44, 55, 41, 67, 22, 43, 13, 23, 20, 8, 13, 27]
}, {
name: 'PRODUCT B',
data: [13, 23, 20, 8, 13, 27, 11, 17, 15, 15, 21, 14]
}, {
name: 'PRODUCT C',
data: [11, 17, 15, 15, 21, 14, 44, 55, 41, 67, 22, 43]
}
],
chart: {
type: 'bar',
height: 350,
stacked: true,
toolbar: {
show: true
}
},
xaxis: {
range: 7
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

Chart.js Dynamically Updating Chart with X Axis Time

I'm using Chart.js version 2.7.1 and I am dynamically updating my Line chart when temperature data comes in.
The problem is that the lines never pass the halfway mark of the x axis in time. Every time I update, the chart auto scales the right side ( max time ) of the x axis to be further out, so my data never approaches the right side of the chart. What I want is for the line to approach the right side, and only a small margin of time is extended into the future for the x-axis each time I update. How can I accomplish this?
Here is how I configure the chart:
var ctx = document.getElementById('tempChart').getContext('2d');
ctx.canvas.width = 320;
ctx.canvas.height = 240;
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
legend: {
display: true
},
datasets: [{
fill: false,
data: [],
label: 'Hot Temperature',
backgroundColor: "#FF2D00",
borderColor: "#FF2D00",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
},
{
fill: false,
data: [],
label: 'Cold Temperature',
backgroundColor: "#0027FF",
borderColor: "#0027FF",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
}]
},
options: {
animation: false,
responsive: true,
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time ( UTC )'
},
type: 'time',
time: {
tooltipFormat: "hh:mm:ss",
displayFormats: {
hour: 'MMM D, hh:mm:ss'
}
},
ticks: {
maxRotation: 90,
minRotation: 90
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Temperature ( Celcius )'
},
}]
}
}
});
Here is the chart:

as you can see in the following snippet and thanks also to Daniel W Strimpel for creating the initial snippet, you problem is in the hot and cold temperature data.
{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }
both of those arrays have n number of entries in the end missing the y coordinate including the temperature value. I recreated your scenario by deleting the y for the 5 last entries of the cold and hot temperatures data.
The chart will add the date to the x axis, but it will not add a temperature value and the line will not show up.
{x: new Data(2019, 0, 14, 1, 26, 0) }
The code snippet recreates your scenario, you can run it to understand the problem and fix it by adding the y value to the last 5 entries in the getHotTempData and getColdTempData
var ctx = document.getElementById('tempChart').getContext('2d');
ctx.canvas.width = 320;
ctx.canvas.height = 240;
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
legend: {
display: true
},
datasets: [{
fill: false,
data: getHotTempData(),
label: 'Hot Temperature',
backgroundColor: "#FF2D00",
borderColor: "#FF2D00",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
},
{
fill: false,
data: getColdTempData(),
label: 'Cold Temperature',
backgroundColor: "#0027FF",
borderColor: "#0027FF",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
}]
},
options: {
animation: false,
responsive: true,
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time ( UTC )'
},
type: 'time',
time: {
tooltipFormat: "hh:mm:ss",
displayFormats: {
hour: 'MMM D, hh:mm:ss'
}
},
ticks: {
maxRotation: 90,
minRotation: 90
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Temperature ( Celcius )'
},
}]
}
}
});
function getHotTempData() {
return [
{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }
];
}
function getColdTempData() {
return [
{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }
];
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="tempChart"></canvas>

Highcharts stacked column: show total when a stack is hidden

I have a stacked column chart with three stacks per column. See https://jsfiddle.net/Lfvnraqd/1/
The tooltip shows the numbers for the individual stack as well as the total of all three stacks (i.e. the total of all proceedings per year). This works fine as long as all stacks are shown. But when I hide one or two stacks by clicking on the corresponding item in the legend, the total shown in the tooltip is that of all visible stacks, but I want it to still show the total of all three stacks. If possible without the need to have a separate series for the total numbers.
Is there a way to do that?
Code:
$(function () {
Highcharts.setOptions({
colors: ['#f59000', '#2274c1', '#90aaef']
});
$('#container').highcharts({
chart: {
borderColor: '#cccccc',
borderWidth: 2,
marginTop: 43,
type: 'column'
},
xAxis: {
categories: ['2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015'],
tickLength: 20
},
yAxis: {
min: 0,
max: 45,
reversedStacks: false,
tickInterval: 5,
title: {
text: null
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}
},
credits: {
enabled: false
},
title: {
text: 'Number of procedures per year',
y: 18
},
tooltip: {
headerFormat: '<b>Year {point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total procedures: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Resolved before conciliation',
data: [14, 12, 10, 13, 10, 7, 11, 11, 11, 8, 8, 10]
}, {
name: 'Conciliation successful',
data: [2, 4, 5, 1, 2, 7, 6, 4, 1, 1, 3, 0]
}, {
name: 'Expert\'s decision',
data: [7, 13, 20, 10, 20, 19, 20, 26, 25, 19, 18, 17]
}]
});
});

Summing of the points values need to be done manually because the chart operate only on visible data.
Before you set data in the chart, you calculate its sum:
var data1 = [14, 12, 10, 13, 10, 7, 11, 11, 11, 8, 8, 10];
var data2 = [2, 4, 5, 1, 2, 7, 6, 4, 1, 1, 3, 0];
var data3 = [7, 13, 20, 10, 20, 19, 20, 26, 25, 19, 18, 17]
var sums = Object.keys(data1).map(i => {
return data1[i] + data2[i] + data3[i];
});
and access the propert sum in tooltip.pointFormatter
pointFormatter: function () {
return this.series.name + ': ' + this.y + '<br/>Total procedures: ' + sums[this.x];
}
Example: https://jsfiddle.net/Lfvnraqd/2/

Categories

Resources