-
What Grafana version and what operating system are you using?
9.x -
What are you trying to achieve?
I want draw bar chart and automatically change with each items (same properties):
Refer: Examples - Apache ECharts -
What happened?
We got error from Grafana but I can’t fix “ECharts Execution Error: Cannot read properties of undefined (reading ‘coordinateSystem’)” -
Can you copy/paste the configuration(s) that you are having problems with?
This is my error:
And this is my data:
And that is my code:
var dataMap = {};
function kFormatter(num) {
return Math.abs(num) > 999 ? Math.sign(num) * ((Math.abs(num) / 1000).toFixed(1)) + 'k' : Math.sign(num) * Math.abs(num);
}
var var_proclist = [];
data.series.forEach((s) => {
if (s.refId === "WV_P") {
var_proclist =
s.fields.find((f) => f.name === "PROCNAME").values.buffer || s.fields.find((f) => f.name === "PROCNAME").values;
}
});
console.log(var_proclist)
var modelList = ['WV_J', 'WV_P'];
var dataByModel = {
'WV_J': {
wipqty_st_h: [],
prod_pln_h: [],
archive_rate_h: [],
wipqty_st_d: [],
proc_pln_d: [],
archive_rate_d: [],
percent100_var: []
},
'WV_P': {
wipqty_st_h: [],
prod_pln_h: [],
archive_rate_h: [],
wipqty_st_d: [],
proc_pln_d: [],
archive_rate_d: [],
percent100_var: []
}
};
modelList.forEach((model) => {
data.series.forEach((s) => {
if (s.refId === model) {
dataByModel[model].wipqty_st_h =
s.fields.find((f) => f.name === "WIPQTY_ST_H").values.buffer || s.fields.find((f) => f.name === "WIPQTY_ST_H").values;
dataByModel[model].prod_pln_h =
s.fields.find((f) => f.name === "PROC_PLN_H").values.buffer || s.fields.find((f) => f.name === "PROC_PLN_H").values;
dataByModel[model].archive_rate_h =
s.fields.find((f) => f.name === "ARCH_RATE_H").values.buffer || s.fields.find((f) => f.name === "ARCH_RATE_H").values;
dataByModel[model].wipqty_st_d =
s.fields.find((f) => f.name === "WIPQTY_ST_D").values.buffer || s.fields.find((f) => f.name === "WIPQTY_ST_D").values;
dataByModel[model].proc_pln_d =
s.fields.find((f) => f.name === "PROC_PLN_D").values.buffer || s.fields.find((f) => f.name === "PROC_PLN_D").values;
dataByModel[model].archive_rate_d =
s.fields.find((f) => f.name === "ARCH_RATE_D").values.buffer || s.fields.find((f) => f.name === "ARCH_RATE_D").values;
dataByModel[model].percent100_var =
s.fields.find((f) => f.name === "PERCENT_PROD").values.buffer || s.fields.find((f) => f.name === "PERCENT_PROD").values;
}
});
});
let dataInbaseOption = modelList.map((model) => ({
value: model
}));
let dataOption = modelList.map((model) => ({
title: {
text: model,
left: 'center',
textStyle: {
color: 'white'
}
},
series: [
{ data: dataByModel[model].wipqty_st_h },
{ data: dataByModel[model].prod_pln_h },
{ data: dataByModel[model].wipqty_st_d },
{ data: dataByModel[model].proc_pln_d },
{ data: dataByModel[model].archive_rate_h },
{ data: dataByModel[model].archive_rate_d },
// { data: dataByModel[model].percent100_var }
]
}));
return {
baseOption: {
timeline: {
axisType: 'category',
show: false,
autoPlay: true,
playInterval: 2000,
controlStyle: {
position: 'left'
},
data: dataInbaseOption,
label: {
formatter: function (s) {
return s;
}
}
},
legend: {
top: 'center',
data: ['Actual', 'Plan', 'Actual today', 'Plan today', 'Archive Rate (%)', 'Archive Rate Day (%)'],
textStyle: {
color: 'white'
},
position: 'top',
show: false
},
calculable: true,
grid: {
top: 40,
bottom: 20,
right: 120,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
formatter: function (params) {
return params.value.replace('\n', '');
}
}
}
}
},
xAxis: [
{
type: 'category',
axisLabel: { 'interval': 0 },
data: var_proclist,
axisLine: { show: false },
axisTick: { show: false }
},
{
gridIndex: 1,
type: 'category',
data: var_proclist,
position: 'top',
show: false
}
],
yAxis: [
{
name: 'by Hour(s)',
nameLocation: 'middle',
nameGap: 40,
type: 'value',
position: 'left',
alignTicks: false,
axisLine: {
show: false,
lineStyle: {
color: '#FFFFFF'
}
},
axisLabel: {
formatter: '{value}k'
}
},
{
type: 'value',
position: 'right',
show: false
},
{
type: 'value',
name: 'Accum',
nameLocation: 'middle',
nameGap: 45,
gridIndex: 1,
position: 'right',
inverse: true,
alignTicks: false,
axisLine: {
show: false,
lineStyle: {
color: '#FFFFFF'
}
},
axisLabel: {
formatter: '{value}k'
}
},
{
gridIndex: 1,
type: 'value',
position: 'left',
show: false,
inverse: true
}
],
series: [
{
name: 'Actual',
type: 'bar',
yAxisIndex: 0,
xAxisIndex: 0,
color: '#000080',
label: {
show: true,
rotate: 90,
align: 'insideLeft',
formatter: '{c}k'
}
},
{
name: 'Plan',
type: 'bar',
yAxisIndex: 0,
xAxisIndex: 0,
color: '#333333',
label: {
show: true,
rotate: 90,
align: 'left',
formatter: '{c}k'
}
},
{
name: 'Actual today',
type: 'bar',
yAxisIndex: 2,
xAxisIndex: 1,
color: '#800080',
label: {
show: true,
formatter: '{c}k'
}
},
{
name: 'Plan today',
type: 'bar',
yAxisIndex: 2,
xAxisIndex: 1,
color: '#333333',
label: {
show: true,
formatter: '{c}k'
}
},
{
name: 'Archive Rate (%)',
type: 'line',
xAxisIndex: 0,
yAxisIndex: 1,
color: '#FF0000',
label: {
show: true,
formatter: '{c}%'
}
},
{
name: 'Archive Rate Day (%)',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 3,
color: '#FF0000',
label: {
show: true,
formatter: '{c}%'
}
},
// {
// type: 'line',
// yAxisIndex: 1,
// // data: percent100_var
// }
]
},
options: dataOption
};
Plz someone can help me solve with this problem. Tks u so much
