CODEWITHSUNDEEP
reactjschartsgoogle-visualizationreact-google-charts
Mohammad I
Mohammad I

Reputation: 90

Hide column in react google charts

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} />
  );
}

enter image description here

Upvotes: 2

Views: 798

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

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]);
}

Upvotes: 1

Related Questions