Hide column in react google charts

Question

In regular google charts I used to hide a column in google charts that didn't want to appear with below steps.

view = new google.visualization.DataView(data);
view.hideColumns([2]);
chart.draw(view, options)

now that I am developing react Application and using (React google charts) but can't find an option to hide a specific column e.g column ID in chart graph, I could remove it from Json data but I need that value later on when the user click the chart for drill down.

import React from "react";
import { Chart } from "react-google-charts";

const data = [
      {
        Element: "Copper",
        Density: 12,
        Id: 1,
      },
      {
        Element: "Silver",
        Density: 18,
        Id: 2,
      },
      {
        Element: "Gold",
        Density: 13,
        Id: 3,
      },
      {
        Element: "Platinum",
        Density: 9,
        Id: 4,
      }
    ];

    const result = [["Element", "Density", "Id"]];

    for (let i = 0; i < data.length; i++) {
      result.push([data[i].Element, data[i].Density, data[i].Id]);
    }

export function App() {
  return (
    <Chart chartType="ColumnChart" width="100%" height="400px" data={result} />
  );
}

when you say drill down, what is the column used for exactly? do you just need to be able to get the value upon selection? — WhiteHat, Mar 29 '22 at 15:55
@WhiteHat: by saying drill down I mean when the user click a specific part of the chart it navigate the user to another page based on ID, so if I remove the ID from my Json data then not possible to go to detail page but if I keep all data as its show above then the google chart will display both ID and Density for every Elements — Mohammad I, Mar 30 '22 at 13:50

WhiteHat · Accepted Answer · 2022-04-01T14:12:30.827

you could use a cell property to store the id.
then use the getProperty method to retrieve the value.

use object notation to provide the column value.
you could use any column.
where v: is the column value, and p: is the cell's properties.

[{v: "Copper", p: {"Id": 1}}, 100]

later...

data.getProperty(0, 0, "Id")

see following working snippet,
although not react, works the same.
click on a chart column to see the id in the console...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {

  var data = [
    ["Element", "Density"],
    [{v: "Copper", p: {"Id": 1}}, 100],
    [{v: "Silver", p: {"Id": 2}}, 100],
    [{v: "Gold", p: {"Id": 3}}, 100],
    [{v: "Platinum", p: {"Id": 4}}, 100]
  ];

  var dataTable = google.visualization.arrayToDataTable(data);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart'));

  google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getSelection();
    if (selection.length > 0) {
      var row = selection[0].row;
      var id = dataTable.getProperty(row, 0, "Id");
      console.log("id =", id);
    }
  });

  chart.draw(dataTable);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

EDIT

when building the data, use object notation as described above...

const data = [
  {
    Element: "Copper",
    Density: 12,
    Id: 1,
  },
  {
    Element: "Silver",
    Density: 18,
    Id: 2,
  },
  {
    Element: "Gold",
    Density: 13,
    Id: 3,
  },
  {
    Element: "Platinum",
    Density: 9,
    Id: 4,
  }
];

const result = [["Element", "Density"]];

for (let i = 0; i < data.length; i++) {
  // use object notation to provide value and id property
  result.push([{v: data[i].Element, p: {Id: data[i].Id}}, data[i].Density]);
}

@WhiteHat- thank you for providing a solution that works good with vanilla Js and JQuery but not compatible with react google charts ```google.visualization.arrayToDataTable(data)``` so I have to manually map them to datatable above that I updated my question and therefore can't use ```dataTable.getProperty(row, 0, "Id")``` as well. — Mohammad I, Apr 01 '22 at 14:08
not sure I follow, react google charts uses `arrayToDataTable` behind the scenes to create the data table, so if your data is in the format above, it should work. or am I missing something else? — WhiteHat, Apr 01 '22 at 14:13
as for `getProperty`, you should be able to get to the data table to use that method, can you share the code for the event(s) you are using in react? — WhiteHat, Apr 01 '22 at 14:15
Thank you @WhiteHat, this trick worked for me [{v: "Copper", p: {"Id": 1}}, 100] — Mohammad I, Apr 19 '22 at 21:53

Hide column in react google charts

1 Answers1