Related
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
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; }
I am trying to show data labels only for the line chart in a mixed/combo chart type (line & bar) but I couldn't find a way to disable it for the bar series.
it is possible to visualize the code in this link
Here is my existing code.
var options = {
chart: {
height: 310,
type: 'line',
stacked: false,
},
series: [{
name: 'Series Column',
type: 'column',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
}, {
name: 'Series Area',
type: 'area',
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
}, {
name: 'Series Line',
type: 'line',
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
}],
markers: {
size: 0
},
dataLabels: {
enabled: true
},
xaxis: {
type:'datetime'
},
yaxis: {
title: {
text: 'Points',
},
min: 0
},
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
Is there an option to turn off data-labels for specific series in a mixed chart?
Currently, there is no option to turn on/off data-labels series wise. It is enabled for all series.
I am opening an issue on GitHub to implement it in the next release.
EDIT: A new option enabledOnSeries is shipped in v3.5.0. You can use it like
options = {
dataLabels: {
enabled: true,
enabledOnSeries: [1, 2]
}
}
The above will show data-labels only for series with index 1,2 and disable data-labels on series with index 0 (in your example - the column series)
Disclaimer: I am the author of ApexCharts.
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
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>"