Data Sources

Below is a code snippet demonstrating how you can retrieve data from your data source to use in the Apache ECharts visualization panel.

data.series.map((s) => {
  if (s.refId === "logo") {
    images = s.fields.find((f) => f.name === "body").values.buffer;
  } else if (s.refId === "connections") {
    sources = s.fields.find((f) => f.name === "source").values.buffer;
    targets = s.fields.find((f) => f.name === "target").values.buffer;
  } else if (s.refId === "nodes") {
    titles = s.fields.find((f) => f.name === "title").values.buffer;
    descriptions = s.fields.find((f) => f.name === "description").values.buffer;
  }
});

• You can use .map() and .find() JavaScript functions,
• refId is the name of the query retrieving data from the data source. By default, the names are A, B and so forth. The code above works with three queries - logo,connections, and nodes.
• name is the data frame column name. The code above references body,source,target,title,and description columns.

How to use Data Source in Apache ECharts in 90 seconds.

Array of Arrays

Convert one-dimensional arrays into many-dimensional arrays if needed:

• get values for each field
• combine in an array of arrays
• use as series[0] to access first query, series[1] to access second query, etc.

const series = data.series.map((s) => {
  const rates = s.fields.find((f) => f.name === "Rate").values.buffer;
  const calls = s.fields.find((f) => f.name === "Calls").values.buffer;
  const names = s.fields.find((f) => f.name === "Name").values.buffer;

  return rates.map((d, i) => [d, calls[i], names[i]]);
})[0];

Display Pie Chart using Data Source

Visualize Pie Chart using Data Source.

Visualization panel's function:

const pieData = data.series.map((s) => {
  const models = s.fields.find((f) => f.name === "Model").values.buffer;
  const values = s.fields.find((f) => f.name === "Value").values.buffer;

  return values.map((d, i) => {
    return { name: models[i], value: d };
  });
})[0];

return {
  tooltip: {
    trigger: "item",
  },
  legend: {
    top: "5%",
    left: "center",
  },
  series: [
    {
      name: "Pie Chart",
      type: "pie",
      radius: ["40%", "70%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2,
      },
      label: {
        show: false,
        position: "center",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: "40",
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: pieData,
    },
  ],
};