I have 3 queries returning aggregated monthly values, which I would like to display as stacked bar graph.

The data looks like this

The display I would like to achieve is https://echarts.apache.org/v4/examples/en/editor.html?c=bar-brush with the column names derived from the query.

Currently I'm completely lost on this approach. Turning it into a simple bar graph works but dividing the data too differently styled bars just ends up with errors.

Currently my definition looks like:

const series = data.series.map((s) => {
  const sData = s.fields.find((f) => f.type === 'number').values.buffer;
  const sTime = s.fields.find((f) => f.type === 'time').values.buffer;

  return {
    data: sData.map((d, i) => [sTime[i], d.toFixed(2)]),
  };
});

console.log(data.series);

const axisOption = {
  axisTick: {
    show: false,
  },
  axisLine: {
    show: false,
  },
  axisLabel: {
    color: 'rgba(128, 128, 128, .9)',
  },
  splitLine: {
    lineStyle: {
      color: 'rgba(128, 128, 128, .2)',
    },
  },
};

return {
  backgroundColor: '#eee',
  legend: {
    data: ['bar', 'bar2', 'bar3'],
    left: 10
  },
  brush: {
    toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
    xAxisIndex: 0
  },
  toolbox: {
    feature: {
      magicType: {
        type: ['stack', 'tiled']
      },
      dataView: {}
    }
  },
  tooltip: {},
  xAxis: {
    data: xAxisData,
    name: 'X Axis',
    axisLine: { onZero: true },
    splitLine: { show: false },
    splitArea: { show: false }
  },
  yAxis: {
    inverse: true,
    splitArea: { show: false }
  },
  grid: {
    left: 100
  },
  visualMap: {
    type: 'continuous',
    dimension: 1,
    text: ['High', 'Low'],
    inverse: true,
    itemHeight: 200,
    calculable: true,
    min: -2,
    max: 6,
    top: 60,
    left: 10,
    inRange: {
      colorLightness: [0.4, 0.8]
    },
    outOfRange: {
      color: '#bbb'
    },
    controller: {
      inRange: {
        color: '#2f4554'
      }
    }
  },
  series: [
    {
      name: 'bar',
      type: 'bar',
      stack: 'one',
      emphasis: emphasisStyle,
      data: data.series[0]
    },
    {
      name: 'bar2',
      type: 'bar',
      stack: 'one',
      emphasis: emphasisStyle,
      data: data.series[1]
    },
    {
      name: 'bar3',
      type: 'bar',
      stack: 'two',
      emphasis: emphasisStyle,
      data: data.series[2]
    },
  ]
};

Any helping hand would be very much appreciated. Thanks in advance

Hi! I am facing some issue to install the echart plugin. I donwoladed the ZIP file from grafana repository and extracted it into grafana path. Then I restarted grafana service and I can see the echart plugin in Grafana, but when I want to create a new panel and select the plugin, Grafana show me the following error message:

Error loading: volkovlabs-echarts-panel

The name of the ZIP from Grafana repository is: volkovlabs-echarts-panel-4.0.0.zip

Some suggestion to solve this issue?

BR Jorge

Hi, I found your amazing plug-in and a started to study and watch many YouTube video on your channel. I'm very interested to this graph https://echarts.apache.org/examples/en/editor.html?c=treemap-drill-down

I didn't understand how to render dynamic my data source... Is there some video or web page to study?

Naturally on my grafana test page I got... (it's clear to me 'cause into example there is a json file) ECharts Execution Error ROOT_PATH is not defined

Thanks ALEN

const uploadedDataURL = ROOT_PATH + '/data/asset/data/ec-option-doc-statistics-201604.json';
myChart.showLoading();
$.getJSON(uploadedDataURL, function (rawData) {
  myChart.hideLoading();
  function convert(source, target, basePath) {
    for (let key in source) {
      let path = basePath ? basePath + '.' + key : key;
      if (!key.match(/^\$/)) {
        target.children = target.children || [];
        const child = {
          name: path
        };
        target.children.push(child);
        convert(source[key], child, path);
      }
    }
    if (!target.children) {
      target.value = source.$count || 1;
    } else {
      target.children.push({
        name: basePath,
        value: source.$count
      });
    }
  }
  const data = {
    children: []
  };
  convert(rawData, data, '');
  myChart.setOption(
    (option = {
      title: {
        text: 'ECharts Options',
        subtext: '2016/04',
        left: 'leafDepth'
      },
      tooltip: {},
      series: [
        {
          name: 'option',
          type: 'treemap',
          visibleMin: 300,
          data: data.children,
          leafDepth: 2,
          levels: [
            {
              itemStyle: {
                borderColor: '#555',
                borderWidth: 4,
                gapWidth: 4
              }
            },
            {
              colorSaturation: [0.3, 0.6],
              itemStyle: {
                borderColorSaturation: 0.7,
                gapWidth: 2,
                borderWidth: 2
              }
            },
            {
              colorSaturation: [0.3, 0.5],
              itemStyle: {
                borderColorSaturation: 0.6,
                gapWidth: 1
              }
            },
            {
              colorSaturation: [0.3, 0.5]
            }
          ]
        }
      ]
    })
  );
});

this query return 3 values about cpu usage but nothing work about the y axis, there is a way to work with multiple _value at the same time?

i attach the Echart code for a better visualization

`let Interrupt = []; let User = []; let DCP = []; data.series.map((s) => { Interrupt = s.fields.find((f) => f.name === 'Percent_Interrupt_Time').values.buffer; DCP = s.fields.find((f) => f.name === 'Percent_Interrupt_Time').values.buffer; User = s.fields.find((f) => f.name === 'Percent_Interrupt_Time').values.buffer; });

const series = data.series.map((s) => { const sData = s.fields.find((f) => f.type === 'number').values.buffer; const sTime = s.fields.find((f) => f.type === 'time').values.buffer;

return { name: s.name, type: 'line', showSymbol: false, areaStyle: { opacity: 0.1, }, lineStyle: { width: 1, }, data: sData.map((d, i) => [sTime[i], d.toFixed(2)]), }; });

const axisOption = { axisTick: { show: false, }, axisLine: { show: false, }, axisLabel: { color: 'rgba(128, 128, 128, .9)', }, splitLine: { lineStyle: { color: 'rgba(128, 128, 128, .2)', }, }, };

return { backgroundColor: 'transparent', tooltip: { trigger: 'axis', }, legend: { left: '0', bottom: '0', data: data.series.map((s) => s.name), textStyle: { color: 'rgba(128, 128, 128, .9)', }, }, xAxis: Object.assign( { type: 'time', }, axisOption ), yAxis: Object.assign( { data: Interrupt,DCP,User, type: 'value', }, axisOption ), grid: { left: 0, right: 16, top: 6, bottom: 24, containLabel: true, }, series, };`

Hi, I want to create a map on grafana use examples : https://echarts.apache.org/examples/en/editor.html?c=map-polygon I view https://echarts.apache.org/examples/en/editor.html?c=map-polygon and copy codes from it. But I got some error .

TypeError: api.coord is not a function
    at renderItem (eval at <anonymous> (http://metrics.lunz.cn/public/plugins/volkovlabs-echarts-panel/module.js), <anonymous>:410:21)
    at eval (http://metrics.lunz.cn/public/plugins/volkovlabs-echarts-panel/module.js:2:2475521)
    at t.eval [as _add] (http://metrics.lunz.cn/public/plugins/volkovlabs-echarts-panel/module.js:2:2470868)
    at t._performRestAdd (http://metrics.lunz.cn/public/plugins/volkovlabs-echarts-panel/module.js:2:1418281)
    at t._executeOneToOne (http://metrics.lunz.cn/public/plugins/volkovlabs-echarts-panel/module.js:2:1417418)
    at t.execute (http://metrics.lunz.cn/public/plugins/volkovlabs-echarts-panel/module.js:2:1416984)
    at e.render (http://metrics.lunz.cn/public/plugins/volkovlabs-echarts-panel/module.js:2:2471036)

Thanks for you help.

Hi, is it possible to render websocket data into an apache echart. Data are coming from grafana websocket plugin. For example i have 2 columns. category and count. category has fixed 5 values. I want to create a bar chart which updates with the latest counts of websocket incoming records

@mikhail-vl Adding clock chart defaults in the module. Here is the example.

This defaults in the console

Uncaught ReferenceError: myChart is not defined at eval (eval at <anonymous> (module.js:1:1), <anonymous>:206:3) eval @ VM4093:206

Which points to this line myChart.setOption<echarts.EChartsOption>({

It is worth mentioning that the sample panel on eCharts site also has this code with <echarts.EChartsOption> which can be removed without any effect on the chart.

clock-panel.txt

Hi, When i was trying to install this plugin. i found out below error log from my /var/log/grafana/grafana.log, BTW: I already configureate this allow_loading_unsigned_plugins = volkovlabs-echarts-panel in my grafana.ini

logger=plugin.manager t=2022-07-04T10:59:28.958393913+08:00 level=info msg="Plugin registered" pluginId=input

logger=plugin.loader t=2022-07-04T10:59:29.082900685+08:00 level=warn msg="Could not find root URL that matches running application URL" plugin=volkovlabs-echarts-panel appUrl=http://xxxxxx:8080/ rootUrls="unsupported value type"

logger=plugin.loader t=2022-07-04T10:59:29.082991956+08:00 level=warn msg="Skipping loading plugin due to problem with signature" pluginID=volkovlabs-echarts-panel status=invalid```

Hello,

Really like your plugin for Grafana, but have problems rendering bar3D chart. The chart I am after is categorical chart over time. That is, I have time series for multiple sensor readings, something like this: | time1 | sensor1 | value1 | | time1 | sensor2 | value2 | | time2 | sensor1 | value3 |

I would like to get the 3D bar chart with X axis being time, Y axis being sensor and Z axis the sensor reading value. However, I am not table to get it rendered on Grafana using your Echarts plugin.

Things I've tried:

1. Copy the code from Echarts example and update the code as in your Youtube videos. This resulted in the blue-ish screen on Grafana with no data visible.
2. I've removed data object and instead used the code to extract data into arrays (as in your previous example), but that gave me the same result.
3. Converting time column to text as a categorical value for X axis, but that got me the same result as before

Other chart type (using Echarts) works as expected, for instance I can get time series plot on the same data.

I've attached the screenshot and the code:

const series = data.series.map((s) => {
  const y_axis_value = s.fields.find((f) => f.name === 'y_axis_value').values.buffer;
  const z_axis_value = s.fields.find((f) => f.name === 'z_axis_value').values.buffer;
  const date_values = s.fields.find((f) => f.name === 'time').values.buffer;
  return [date_values, y_axis_value, z_axis_value];
});
return {
  grid3D: {},
  tooltip: {},
  xAxis3D: {
    type: 'category',
    data: series[0]
  },
  yAxis3D: {
    type: 'category',
    data: series[1]
  },
  zAxis3D: {
    data: series[2]
  },
  visualMap: {
    max: 1000,
    dimension: series[2]
  },
  series: [
    {
      type: 'bar3D',
      shading: 'lambert',
      encode: {
        x: series[0],
        y: series[1],
        z: series[2]
      }
    }
  ]
};

Any hints and help would be highly appreciated :)

I am doing a map where I want to show the status of some gauges.

My problem is that the map does not expand to the whole available space:

I would like for it to show as big as possible keeping the same aspect ratio of course. Any idea why there are those big margins and how to solve the issue?

My code:

var option;
$.ajax({
  async: false,
  type: 'GET',
  url: 'https://control.ifae.es/scheme_bluefors.svg',
  success: function (svg) {
    console.log(echarts);
    echarts.registerMap('scheme_bluefors', { svg: svg });
    option = {
      tooltip: {},
      visualMap: {
        show: false,
        left: 'center',
        bottom: '10%',
        min: 0,
        max: 1,
        realtime: true,
        calculable: true,
        inRange: {
          color: ['#f33', '#23f']
        }
      },
      series: [
        {
          name: 'Bluefors Scheme',
          type: 'map',
          map: 'scheme_bluefors',
          roam: true,
          emphasis: {
            label: {
              show: false
            }
          },
          selectedMode: false,
          data: [
            { name: 'V21', value: 0 },
            { name: 'V22', value: 1 },
          ]
        }
      ]
    };
  }
});

return option;

Here I still have to do the connection with the data from influxdb.

Thank you very much!

We can use Baidu map now. The ak for test is wINcgFmL1HyM7gWoQ5uPu6Xt9szz3chV , I will delete it after merged. The options for test is

option = {
        tooltip: {
          trigger: "item",
        },
        bmap: {
          // 地图展示的中心，即加载时首先出现在人眼前的点
          center: [104.114129, 37.550339], 
          // 当前地图缩放的大小，如果是一个省内的一些地方，那么zoom值应该设置得大点
          // 设置的初始值大小应根据要展示的数据而定
          zoom: 5, 
          roam: true, //允许缩放
          // 个性化地图
          mapStyleV2: {},
        },
      };
return option;

I can convert one-dimensional arrays into many-dimensional arrays (like the example at https://volkovlabs.io/plugins/volkovlabs-echarts-panel/datasources/ ) . The arrays are based on a table (as a result from a query), for example with 3 columns: year, valueX, valueY
My query filters on country by using a variable in grafana. Now I have to rerun my query to filter the data to new table values if I change the variable to another country. This takes query calculationtime.

If I add the country column to my table, I only have to run my query ones. But then I have to filter in grafana/echarts on the variable (column) 'countries', is this possible?

grafana query annotations (Vertical dashed lines ) that are displayed for standard grafana time series panels are not displayed for Echarts panels.

is there a solution or is not currently supported?

I am thinking to add a Panel Option for Themes: 'Auto', 'Dark', 'Light', 'Custom'.

With a 'Custom' Theme you can specify your own theme for all components. It will be a great feature!