ECharts - "Execution Error: data is not defined"

Grafana Dashboards
1

Hello, I´m having this error: “ECharts Execution Error: data is not defined” when using “ECharts Basic Radar Chart” panel with grafana echarts plugin.

It seems that the data object is not being found.

let my_map = data.series.map((s) => {
gender_concept_id = s.fields.find((f) => f.name === ‘gender_concept_id’).values;
year_of_birth = s.fields.find((f) => f.name === ‘year_of_birth’).values;
month_of_birth = s.fields.find((f) => f.name === ‘month_of_birth’).values;
day_of_birth = s.fields.find((f) => f.name === ‘day_of_birth’).values;
race_concept_id = s.fields.find((f) => f.name === ‘race_concept_id’).values;
});

Query inspector:

image
image1537×621 116 KB

Table view:

image
image1197×776 74.5 KB

Thank´s. I look forward to your reply.

Álvaro

2

@amconde In the latest version of ECharts panel we introduced Visual editor, which provides access to the parameters using context object.

It also allows automatically parse the data source and create series in a data set format. We will explain it in the upcoming video and release blog post. You can see examples how to use it on Volkov Labs

Alternatively, you can switch to the native Code mode and it will work as expected.

3

Working now :slight_smile:

Thank you very much.

1 Like
4

Could you please share the code that worked for you. I am having trouble modifying my code to meet the new requirements.

5

I have dashboard using Apache EChart plugin and working fine.
When I upgraded the pluging to Business Charts, in same code I have the ERROR message: ReferenceError: data is not defined

let RAW_it = ,
FIN_it = ,
TOTAL_it = ,
WIP_it = ;
Transit_it = ;
Target_it = ;

const datablock = data.series.map((s) => {
const RAW_it = s.fields.find((f) => f.name === ‘RAW’).values.buffer || s.fields.find((f) => f.name === ‘RAW’).values;
const FIN_it = s.fields.find((f) => f.name === ‘FIN’).values.buffer || s.fields.find((f) => f.name === ‘FIN’).values;
const WIP_it = s.fields.find((f) => f.name === ‘WIP’).values.buffer || s.fields.find((f) => f.name === ‘WIP’).values;
const Transit_it = s.fields.find((f) => f.name === ‘transit’).values.buffer || s.fields.find((f) => f.name === ‘transit’).values;
const Target_it = s.fields.find((f) => f.name === ‘target’).values.buffer || s.fields.find((f) => f.name === ‘target’).values;
const PN = s.fields.find((f) => f.name === ‘d’).values.buffer || s.fields.find((f) => f.name === ‘d’).values;
const P2 = s.fields.find((f) => f.name === ‘d’).values.buffer || s.fields.find((f) => f.name === ‘d’).values;
return PN.map((d, i) => [d, RAW_it[i].toFixed(2), FIN_it[i].toFixed(2), WIP_it[i].toFixed(2), Transit_it[i].toFixed(2), ((RAW_it[i] + FIN_it[i] + WIP_it[i]) * 0), (RAW_it[i] + FIN_it[i] + WIP_it[i] + Transit_it[i]).toFixed(2), Target_it[i].toFixed(2), Target_it[i] - (RAW_it[i] + FIN_it[i] + WIP_it[i] + Transit_it[i])]);

})[0];

someone could support me to findout the issue.
I need same working with the pluging to Business Charts.

Attempt to build Node Graph using Business Charts. ECharts Execution Error data is not defined
6

I found the solution (“context.panel.”)
ADDED
const datablock = context.panel.data.series.map((s)

INSTEAD OF:
const datablock = data.series.map((s)

thanks!

1 Like
7

We updated documentation to reflect latest features and breaking changes in the Business Charts:

1 Like
8

Hi @mikhailvolkov ,
in my previous working version of the charts I was using this code, which works:

let wind;
data.series.map((s) => {
  const time = s.fields.find((f) => f.name === 'Time').values;
  const value = s.fields.find((f) => f.name === 'wind_speed').values;
  const rotate = s.fields.find((f) => f.name === 'wind_direction').values;

  /**
  Set Wind from 3 arrays
  */
  wind = time.map((id, index) => {
    return {
      symbolRotate: -rotate[index] - 180.0,
      value: [time[index], value[index]]
    };
  });

});

/**
 * Enable Data Zoom by default
 */
setTimeout(() => echartsInstance.dispatchAction({
  type: 'takeGlobalCursor',
  key: 'dataZoomSelect',
  dataZoomSelectActive: false,
}), 500);

/**
 * Update Time Range on Zoom
 */
echartsInstance.on('datazoom', function (params) {
  const startValue = params.batch[0]?.startValue;
  const endValue = params.batch[0]?.endValue;
  locationService.partial({ from: startValue, to: endValue });
});

return {
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      let currtime = echarts.format.formatTime('dd-MM-yyyy hh:mm:ss', params.data.value[0]);
      let speed = params.data.value[1].toFixed(3); // Format speed to two decimals
      let direction = (-params.data.symbolRotate - 180.0).toFixed(1); // Format direction to two decimals

      return `Time: ${currtime} <br/>
              Speed: ${speed} kn<br/>
              Direction: ${direction} °`;
    }
  },
  textStyle: {
    color: '#324148',
    fontFamily: '"Poppins", sans-serif',
    fontSize: 22,
    fontWeight: 'bold'
  },
  legend: {
    left: '0',
    bottom: '0',
    data: ['Current Speed & Angle'],
    textStyle: {
      color: 'rgba(128, 128, 128, .9)',
    },
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none',
        icon: {
          zoom: 'path://',
          back: 'path://',
        },
      },
      saveAsImage: {
        name: 'Current speed & direction',
        backgroundColor: 'white'
      },
    }
  },
  xAxis: {
    type: 'time'
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} kn'
    },
  },
  grid: {
    left: '2%',
    right: '2%',
    top: '2%',
    bottom: 24,
    containLabel: true,
  },
  visualMap: {
    orient: 'horizontal',
    left: 'center',
    min: 0,
    max: 1.5,
    text: ['strong', 'weak'],
    dimension: 1,
    inRange: {
      color: ['#add8e6', '#00bfff', '#00008b']
    }
  },
  series: [
    {
      data: wind,
      type: 'line',
      symbol: 'path://M31 24.7343L21.7917 24.7343V0L9.20826 0L9.20826 24.7343H0L15.5 45L31 24.7343Z',
      symbolSize: 20,
      areaStyle: {
        opacity: 0.3,
      },
      lineStyle: {
        width: 1
      }
    }
  ]
};

This does not work now with the Charts upgrade.
Could you please indicate how should I treat the data source and if I should use “Code” or “Visual” tab?

Appreciated.

Cheers

9

@adallolio Please take a look at the breaking changes in v6

10

Found my solutions in that link, thanks!

1 Like