You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "EugenioVLopes (via GitHub)" <gi...@apache.org> on 2024/05/01 18:18:40 UTC
[I] [Support] Multiples X-Axis [echarts]
EugenioVLopes opened a new issue, #19887:
URL: https://github.com/apache/echarts/issues/19887
### What problem does this feature solve?
Hi, how can I improve this code to plot multiple X-Axis on the same chart? Right now, the graph is being plotted, but the behavior is not as expected. Am I doing something wrong? Below is part of the code.
setGraph(): void {
const colors = ["#5470C6", "#EE6666", "#FF9E4A", "#2B821D", "#005CAF"];
const series: any[] = [];
const grids: any[] = [];
if (this.selected_sensor.length > 0) {
for (const sensor of this.selected_sensor) {const i: number = this.sensor_list.indexOf(sensor);const graph_type: string =this.chart_type[i] == "line" ? "line" : "bar";const data_graph: any[] = [];
// Configuring graph data
if (Array.isArray(this.selected_graph_data.data)) {
for (const sample of this.selected_graph_data.data) {
data_graph.push({
x: sample[i],
y: sample[2],
});
}
console.log("Graph data: ", data_graph);
} else {
console.error("this.selected_graph_data.data is not an array");
}
// Configuring sensor series
const serie: any = {
name: sensor,
dataset: {
source: data_graph,
dimensions: ["x", "y"],
},
type: graph_type,
showSymbol: false,
barMinWidth: "90%",
itemStyle: {
color: colors[i % colors.length],
},
};
series.push(serie);
// Configuring chart grids
grids.push({
right: "5%",
left: "5%",
});
if (sensor == this.selected_sensor[this.selected_sensor.length - 1]) {
if (this.selected_sensor.length > 4) {
grids[grids.length - 1].bottom = "9%";
}
}
}
// Configuring Y axis of the chart
const yAxis: any[] = [
{
type: "value",
scale: true,
splitNumber: 8,
axisLabel: {
fontSize: 10,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
name: "Altitude (Km)",
nameGap: 40,
nameRotate: 90,
nameLocation: "middle",
nameTextStyle: {
textAlign: "right",
verticalAlign: "middle",
fontWeight: "bold",
fontSize: 15,
overflow: "hidden",
},
},
];
// Setting chart height
this.chart_height = { height: "100%" };
// Adding chart options settings
this.options = {
color: colors,
tooltip: {
trigger: "none",
axisPointer: {
type: "cross",
},
},
legend: {},
grid: grids,
xAxis: [],
yAxis: yAxis,
series: series,
};
// Adding individual X axis for each sensor
for (let i = 0; i < this.selected_sensor.length; i++) {
const sensorData: any[] = []; // Array for current sensor data
const sensorIndex = this.sensor_list.indexOf(
this.selected_sensor[i]
);
console.log("Selected Sensor: ", this.selected_sensor[i]);
for (const sample of this.selected_graph_data.data) {
sensorData.push(sample[sensorIndex]);
}
console.log("Sensor Data: ", sensorData);
this.options.xAxis.push({
type: "category",
axisTick: {
alignWithLabel: true,
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[sensorIndex % colors.length],
},
},
axisPointer: {
label: {
formatter: (params: any) => {
return (
"Sensor " +
(params.seriesData.length
? "：" + params.seriesData[0].data
: "")
);
},
},
},
data: sensorData.map((value: any) => ({ value })), // Sensor values on X axis
});
// Adding current sensor data to corresponding series
this.options.series.push({
name: this.selected_sensor[i],
data: this.selected_graph_data.data.map(
(sample: any) => sample[2]
),
type: this.chart_type[sensorIndex] == "line" ? "line" : "bar",
showSymbol: false,
barMinWidth: "90%",
itemStyle: {
color: colors[sensorIndex % colors.length],
},
yAxisIndex: i,
});
}
### What does the proposed API look like?
I want the behavior to be correct and I can add multiple x axes, the data apparently arriving correctly at:
however, when the graph is plotted it always stays on a straight line which is not its expected behavior.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Support] Multiples X-Axis [echarts]
Posted by "EugenioVLopes (via GitHub)" <gi...@apache.org>.
EugenioVLopes commented on issue #19887:
URL: https://github.com/apache/echarts/issues/19887#issuecomment-2110256288
Thanks for your help with the graph! Your new example was super helpful, and I really appreciate it. Thank you!
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Support] Multiples X-Axis [echarts]
Posted by "EugenioVLopes (via GitHub)" <gi...@apache.org>.
EugenioVLopes closed issue #19887: [Support] Multiples X-Axis
URL: https://github.com/apache/echarts/issues/19887
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Support] Multiples X-Axis [echarts]
Posted by "MatthiasMert (via GitHub)" <gi...@apache.org>.
MatthiasMert commented on issue #19887:
URL: https://github.com/apache/echarts/issues/19887#issuecomment-2092349808
In the example you shared, echarts moves the second x-axis to the top of the grid. So the axis is present. I still dont quite understand whats the goal of using different x-axes?
Do you want to use [different grids](https://echarts.apache.org/examples/en/editor.html?c=scatter-anscombe-quartet)?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Support] Multiples X-Axis [echarts]
Posted by "MatthiasMert (via GitHub)" <gi...@apache.org>.
MatthiasMert commented on issue #19887:
URL: https://github.com/apache/echarts/issues/19887#issuecomment-2090309753
Its not at all clear to me what you are trying to achieve.
Pls provide a working (= with data) minimal exmaple in the [echarts editor](https://echarts.apache.org/examples/en/editor.html?c=line-simple)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Support] Multiples X-Axis [echarts]
Posted by "MatthiasMert (via GitHub)" <gi...@apache.org>.
MatthiasMert commented on issue #19887:
URL: https://github.com/apache/echarts/issues/19887#issuecomment-2095269965
By default echarts places a second xAxis at the top of the grid. For all further xAxes you need to places them manually by specifying the [offset](https://echarts.apache.org/en/option.html#xAxis.offset).
[Example](https://echarts.apache.org/examples/en/editor.html?c=multiple-x-axis&code=MYewdgzgLgBAJgQygmBeGBtAUDGBvATwC4YBGABnIBoYAPUkgFgFYbaAmE09gOgDY2AZi492jAL5Uc-YjACc1OgxiCA7G05k-POQLrCY5Hs1WTphEgA5F9JqQ1c5OoSSONTU3BZiqbyxoIOMGI86vquoh7msnx-THJB7Lys4YY8llFessxxMMyBdJrspOkuaXJyZllMuXxhHCTsgqFlRnKkVTIkgrmqCYWNqjyMZSWkHZ5dwb0jAyol9QYlchKT3hRsynwpDcFOBbQGzZaVa7K17Inas4ckzOlRALoA3FigkLCgADYgAE4QaEwAHIAEZfBDAADWQJoQN-AFM4DCYKCvgBXeFAl5YLAgAAOUAAluBAXhpN8_iQKf9JgBzX6EuAkPBQfFcdjkTqIZAQeFQZkQEBo37AeEkbkITq0ACCtEJEBI2FwXjACAAtmKUQAxQn_WCy-XI1UagAyIGASGJYBIQNFYCg8N-RvV8IA4gg8d1FAg5RATYSwJq8F8A_CAMpQAhfIPUqkgH7_DDkR7iVOTFUum1h-HvOAwA0QZ2m82W8A2u0Op00Y1uj1emg--X-wPMkOBiNRmPxykwakQDCkFNp6QZjU2gAqAAtdXmC0X4WaLUSyyiK475-7PSpFCAAGa73n8nze33NoNt8OR6PM2O97uJ9hD8TSR6TAgF5k1m3v33zxel61V3he1106XkGXhBVMBHfAYNwSM8U1IELxhOD4CQBBDwASTAOB4VoVx02VGVfRwvCCMMIjcAgNUQBAKBJxIKBfgxKiYGA0A8OZNDcAooF6FQ5UhJgWQgQIIE0OfITOi8NCEKQlC2IlbDcPwwi0JI-UyLUsg2JouiGKYlj4TYjiQC42DhOIm0OEEqyRO_CSrKk5UZMs4T5JtRS0OUvltIo6gNILf
zGj02j6MYmBmNYtCzIssl7LoGzBDsqzRPEySYJcx4sHEIA)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Support] Multiples X-Axis [echarts]
Posted by "EugenioVLopes (via GitHub)" <gi...@apache.org>.
EugenioVLopes commented on issue #19887:
URL: https://github.com/apache/echarts/issues/19887#issuecomment-2110255422
Thanks for your help with the graph! Your new example was super helpful, and I really appreciate it. Thank you!
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Support] Multiples X-Axis [echarts]
Posted by "EugenioVLopes (via GitHub)" <gi...@apache.org>.
EugenioVLopes commented on issue #19887:
URL: https://github.com/apache/echarts/issues/19887#issuecomment-2090609465
I'm currently working on implementing a feature that allows the display of different data on the x-axis while sharing the same y-axis. In the function above, when a sensor is selected, its values are plotted on the graph using different x-axes. However, upon attempting to visualize the behavior, I noticed that the plot always appears to be the same, showing a straight line.
To address this issue, I've tried following the example provided at this link:
[Multiple X-Axis Example](https://echarts.apache.org/examples/en/editor.html?c=multiple-x-axis)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Support] Multiples X-Axis [echarts]
Posted by "EugenioVLopes (via GitHub)" <gi...@apache.org>.
EugenioVLopes commented on issue #19887:
URL: https://github.com/apache/echarts/issues/19887#issuecomment-2094793146
I'm trying to reproduce this type of behavior on the chart. When the user clicks and requests data from another sensor, a new x-axis is created, but they all share the same y-axis. However, with the current code, trying to follow the example, I'm not succeeding. Is it possible to achieve what I'm trying to do?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org