influxdata/giraffe

Table graph not rendering

benidi opened this issue · 3 comments

Hi,

I'm trying to plot a table but the following error occurs in the browser: TypeError: Cannot read properties of undefined (reading 'data'). When I change to "type : line" everything is working fine.
I found this entry with the same problem on stackoverflow but there is no solution.
https://stackoverflow.com/questions/69653830/reactjs-influxdata-giraffe-table-graph-not-rendering

Anyone can give a hint what could be the problem?

From the stackoverflow link your code looked like this:

    const tableLayer = {
    type: "table",
    timeZone: "America/Phoenix",
    tableTheme: "light",
    properties: {
      colors: DEFAULT_TABLE_COLORS,
      tableOptions: {
        fixFirstColumn: false,
        verticalTimeAxis: false,
        sortBy: {
          internalName: "_time",
          displayName: "_time",
          visible: true,
        },
      },
      fieldOptions: {
        internalName: "_time",
        displayName: "_time",
        visible: true,
      },
      timeFormat: "YYYY-MM-DD HH:mm:ss ZZ",
      decimalPlaces: {
        isEnforced: true,
        digits: 3,
      },
    },
  };

  let config = {
    table: fluxResponse.table,
    layers: [tableLayer],
  };

@benidi Sorry for the very late response.

The confusion here is because you are using the table property in the config. It is confusing but a Table graph does not use the table property. They are not the same thing. Note the difference is the uppercase and lowercase. The Table graph is uppercase since it is the name of a type of visualization. While the property table is a data structure that some visualizations can use, but not the Table graph visualization. Again, i acknowledge this is very confusing. We may consider renaming the Table graph in the future (but more likely, it will just deleted in favor of Simple Table).

Instead, please use the fluxResponse property. Thus, you can pass your fluxResponse directly into the fluxResponse property and this should work.

Thank you very much for your comment. It works now :)