[Support] Multiples X-Axis

[EugenioVLopes]

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.

[MatthiasMert]

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

[EugenioVLopes]

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

[MatthiasMert]

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?

[EugenioVLopes]

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?

When I try to adapt the code from the example, they all end up with the same behavior.

[MatthiasMert]

By default echarts places a second xAxis at the top of the grid. All further xAxes need to placed manually by specifying the offset.

Example

[EugenioVLopes]

Thanks for your help with the graph! Your new example was super helpful, and I really appreciate it. Thank you!