Group data by weekdays in Highchart - javascript

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; }

Related

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();

Google chart multiple series with same scale

I'm looking for a way to have multiple series on my graphics, with the same scales but displayed only once.
as you can see here :
http://jsfiddle.net/Youkoal/d3xwnqdu/
I have 4 séries and the chart display all 4 axis.
I have noted that this properties do not seem to work here:
TextStyle: {color: 'none'}
nor
{format: 'none'}
when included in the axis options.
How can I 'hide' those axis or put all series on same scales?
the first letter in textStyle should be lowercase...
textStyle: {
color: 'none'
}
this will hide the text, but the chart will still allocate room for the labels,
to minimize, reduce the fontSize...
textStyle: {
color: 'none',
fontSize: 1
}
ideally we could use textPosition: 'none', but this option is not supported for material charts.
Tracking Issue for Material Chart Feature Parity
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Semaines', 'Test Region', 'Test2 Region', 'Test SerieNE', 'Test2 SerieNE', 'Test SerieS', 'Test2 SerieS', 'Test SerieO', 'Test2 SerieO'],
['Semaine 1', 0, 0, 0, 0, 0, 0, 0, 0],
['Semaine 2', 0, 0, 0, 0, 0, 0, 0, 0],
['Semaine 3', 0, 0, 0, 0, 0, 0, 0, 0],
['Semaine 4', 24, 0, 21, 0, 0, 0, 3, 0],
['Semaine 5', 122, 0, 21, 0, 52, 0, 49, 0],
['Semaine 6', 361, 0, 23, 0, 325, 0, 13, 0],
['Semaine 7', 51, 0, 21, 0, 11, 0, 19, 0],
['Semaine 8', 81, 3, 3, 0, 64, 3, 14, 0],
['Semaine 9', 711, 22, 81, 3, 527, 9, 103, 10],
['Semaine 10', 139, 13, 26, 5, 104, 5, 9, 3],
['Semaine 11', 255, 12, 139, 2, 33, 4, 83, 6],
['Semaine 12', 256, 10, 23, 4, 15, 5, 218, 1],
['Semaine 13', 145, 26, 84, 7, 58, 16, 3, 3],
['Semaine 14', 112, 15, 51, 0, 34, 11, 27, 4],
['Semaine 15', 122, 27, 29, 8, 53, 14, 40, 5],
['Semaine 16', 98, 18, 17, 6, 31, 7, 50, 5],
['Semaine 17', 87, 21, 12, 6, 37, 3, 38, 12],
]);
var options = {
chart: {
title: 'Suivis hebdo',
subtitle: 'Pilotage',
},
bars: 'vertical',
isStacked: true,
height: 600,
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
},
4: {
targetAxisIndex: 2
},
5: {
targetAxisIndex: 2
},
6: {
targetAxisIndex: 3
},
7: {
targetAxisIndex: 3
}
},
vAxis: {
format: 'decimal',
viewWindow: {
min: 0,
max: 1000
}
},
vAxes: {
1: {
textStyle: {
color: 'none',
fontSize: 1
}
},
2: {
textStyle: {
color: 'none',
fontSize: 1
}
},
3: {
textStyle: {
color: 'none',
fontSize: 1
}
}
},
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
notes:
1) need to use the correct library, jsapi should no longer be used, instead use loader.js
this will only change the load statement, see above snippet...
2) you can use option vAxis to set the scale for all vAxes
3) it isn't necessary to move the first series to another targetAxisIndex

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/

Highcharts, stacked column range with date in y-axis

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

Linking graphs of two Shield UI Charts

I have a question, regarding the shield ui chart library. Essentially, I have two charts on the same page. I would like to co-relate them in the sense that when the user selects a bar from one of the charts, the other control would be populated with data, related to the selection.
Below is an example showing two graphs. On the left are 4 quartery data sets, using the rangebar layout. Clicking on each one of them shows detailed information about the data on the right graph.
<script type=""text/javascript"">
$(function () {
$(""#container1"").shieldChart({
theme: ThemeChooser.theme,
events: {
pointSelect: function pointSelectHandler(args) {
var localData;
var headerText = ""Data For : "" + args.point.name;
if (args.point.x == 0) {
localData = [12, 3, 4, 2, 12, 3, 4, 17, 22, 34, 54, 67];
}
else if (args.point.x == 1) {
localData = [3, 9, 12, 14, 22, 32, 45, 12, 67, 45, 55, 7];
}
else if (args.point.x == 2) {
localData = [23, 19, 11, 134, 242, 352, 435, 22, 637, 445, 555, 57];
}
else {
localData = [13, 19, 112, 114, 212, 332, 435, 132, 67, 45, 55, 7];
}
var containter = $(""#container2"").swidget();
containter.destroy();
$(""#container2"").shieldChart(
{
exportOptions:
{
image: false,
print: false
},
primaryHeader: {
text: headerText
},
dataSeries: [
{
seriesType: 'line',
collectionAlias: 'Q Data',
data: localData
}
]
}
);
}
},
exportOptions:
{
image: false,
print: false
},
seriesSettings: {
rangebar:
{
enablePointSelection: true
}
},
tooltipSettings: {
customPointText: 'Low Value: <b>{point.low}</b></br>High Value:<b> {point.high}</b>'
},
axisY: {
title: {
text: ""Quarterly""
}
},
axisX: {
categoricalValues: [""Q1"", ""Q2"", ""Q3"", ""Q4""]
},
primaryHeader: {
text: ""Quarterly performance""
},
dataSeries: [
{
seriesType: 'rangebar',
collectionAlias: 'Low/High ',
data: [[3, 9], [12, 23], [1, 17], [-3, 12]]
}
]
});
$(""#container2"").shieldChart({
theme: ThemeChooser.theme,
exportOptions:
{
image: false,
print: false
},
primaryHeader: {
text: ""Values for specific quarter""
},
dataSeries: [
{
seriesType: 'line',
collectionAlias: 'Q Data',
data: [12, 3, 4, 2, 12, 3, 4, 17, 22, 34, 54, 67]
}
]
});
});
</script>"

Categories

Resources