GoogleWebComponents / google-chart

Google Charts API web components
https://www.webcomponents.org/element/@google-web-components/google-chart/elements/google-chart
Apache License 2.0
358 stars 130 forks source link

Column Header names/titles are empty/blank (datatable/table visualization) #228

Closed ceevee830 closed 2 years ago

ceevee830 commented 5 years ago

Using google-chart v1.x (https://github.com/GoogleWebComponents/google-chart/archive/1.x.zip)

When creating a google.visualization.DataTable() inside a google.visualization.Table(), I see a fully functioning table. BUT, I do not see the column header names/titles.

IMAGE (see my hand-drawn red squigglies where the column header names/titles should be). image

CODE

    google.charts.load('current', {
      callback: drawChart,
      packages: ['bar', 'corechart', 'table']
    });

    // Callback that creates and populates a data table,
    function drawChart() {

      var options = {
        'showRowNumber': true,
        'allowHtml': true,
        width: '100%',
        height: '100%'
      };

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'WAR');      // workaround to show column names?
      data.addColumn('string', 'Node Name');
      data.addColumn('string', 'Node Op');
      data.addColumn('boolean', 'blah hdr');
      data.addColumn('number', 'count1 hdr');
      data.addColumn('number', 'count2 hdr');

      for (var node in graph.nodes) {
          data.addRow(
            [
              1,
              nodeName,
              nodeOp,
              (blah > 0 ? true : false),
              count1,
              count2
            ]
          );
        }
      }

      var table = new google.visualization.Table(document.getElementById('chart_div'));
      table.draw(data, options);

I can see the 'column sort direction' image in 2nd column header, but where are the column header names?

rslawik commented 5 years ago

Hi Chris,

It looks like you are using the Google Charts library directly rather than the <google-chart> web component, so I am not sure it is the correct place to report the problem (perhaps google-visualization-issues is).

Are the column header names missing if you try the example from Google Charts docs? Do you have any CSS that might override the headers? Does it only happen if <google-chart> is imported?

ceevee830 commented 5 years ago

Hi @rslawik thanks for reply and sry for late response.

[did you] try google chart docs? Yes, I inspected the docs and HTML/CSS of the column header in the browser and the text is just not there. I can add the text into the HTML directly using firefox inspector and can then see the text in the column header. I also tried the setColumnLabel() API to no avail.

I'll try the google-visulation next. Thanks again.