CODEWITHSUNDEEP
chartsgoogle-visualization
Carlos Henrique Biazin Esteves
Carlos Henrique Biazin Esteves

Reputation: 567

Google chart legends - Overlapping text

I'm using google chart in my page but the legend text is Overlapped, as the image bellow:

enter image description here

This is my code:

var dataTable = new google.visualization.DataTable();

dataTable.addColumn("date", "Data");
dataTable.addColumn("number", "Ton./Hora");
dataTable.addColumn("number", "Ton./Hora Equiv.");
dataTable.addColumn("number", "Peso (Ton.)");

for (var i = 0; i < dados.length; i++) {
  var temp = new Date(dados[i].DT_FIM);

  dataTable.addRow([new Date(temp.getFullYear(), temp.getMonth())
                    ,dados[i].TON_HORA
                    ,dados[i].TON_HORA_EQUIV
                    ,dados[i].PES_LIQUI_UNMET]);
}

var date_formatter = new google.visualization.DateFormat({
  pattern: "MMM/yyyy"
});

date_formatter.format(dataTable, 0);

var options = {
  hAxis: {title: 'Período (mês/ano)'},
  series: {0: {type: 'line', targetAxisIndex:0},
           1: {type: 'line', targetAxisIndex:0},
           2: { type: 'bars', targetAxisIndex: 1 }
          },
  legend: { position: "top", textStyle: { fontSize: 14 } },
  width: 1200,
  height: 500
};

var chart = new google.visualization.ComboChart(document.getElementById("div-Equipamento-Produtividade"));
chart.draw(dataTable, options);

My charts is on bootstrap tab nav:

<div id="div-Graficos" class="panel-collapse in">
  <div class="panel-body">
    <ul id="tab-Graficos" class="nav nav nav-tabs nav-justified" role="tablist">
      <li role="presentation" class="active"><a href="#div-Grafico-OEE" aria-controls="div-Grafico-OEE" role="tab" data-toggle="tab">Equipamento - OEE</a></li>
      <li role="presentation"><a href="#div-Grafico-T2" aria-controls="div-Grafico-T2" role="tab" data-toggle="tab">Equipamento - T2</a></li>
      <li role="presentation"><a href="#div-Grafico-Produtividade" aria-controls="div-Grafico-Produtividade" role="tab" data-toggle="tab">Equipamento - Produtividade</a></li>
    </ul>
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane fade in active" id="div-Grafico-OEE">
        <div id="div-Equipamento-OEE" style="width: 900px; height: 500px"></div>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="div-Grafico-T2">
        <div id="div-Equipamento-T2" style="width: 900px; height: 500px"></div>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="div-Grafico-Produtividade">
        <div id="div-Equipamento-Produtividade" style="width: 1200px; height: 500px"></div>
      </div>
    </div>
  </div>
</div>

I tried to change the position to "bottom" but the problem continue

What i'm making wrong?

Upvotes: 6

Views: 5001

Answers (2)

Mauricio Roberto Marim
Mauricio Roberto Marim

Reputation: 11

Every framework or code that hides the chart DIV using "display: none" will make legends to overlap when the chart is draw inside an inactive DIV.

Hidding the chart DIV with "visibility: hidden" works fine, with no overlapping.

I had this issue and only solved it coding the NAV features by myself, without using Bootstrap/JQuery/etc...

Upvotes: 1

WhiteHat
WhiteHat

Reputation: 61222

check that the chart is not being drawn while hidden

see the following snippet, the chart is hidden by default,
then shown once the chart's 'ready' event fires

notice, it produces the same result as posted in the question... 

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn("date", "Data");
    dataTable.addColumn("number", "Ton./Hora");
    dataTable.addColumn("number", "Ton./Hora Equiv.");
    dataTable.addColumn("number", "Peso (Ton.)");

    for (var i = 0; i < 12; i++) {
      var temp = new Date();

      dataTable.addRow([new Date(temp.getFullYear(), i)
                        ,(i + 2) * 6
                        ,(i + 1) * 12
                        ,(i + 0) * 18]);
    }

    var date_formatter = new google.visualization.DateFormat({
      pattern: "MMM/yyyy"
    });

    date_formatter.format(dataTable, 0);

    var options = {
      hAxis: {title: 'Período (mês/ano)'},
      series: {0: {type: 'line', targetAxisIndex:0},
               1: {type: 'line', targetAxisIndex:0},
               2: { type: 'bars', targetAxisIndex: 1 }
              },
      legend: { position: "top", textStyle: { fontSize: 14 } },
      width: 1200,
      height: 500
    };

    var container = document.getElementById("div-Equipamento-Produtividade");
    var chart = new google.visualization.ComboChart(container);
    google.visualization.events.addListener(chart, 'ready', function () {
      container.style.display = null;
    });
    chart.draw(dataTable, options);
  },
  packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div-Equipamento-Produtividade" style="display: none;"></div>

however, if the container is shown before drawing the chart,
the legend turns out nicely... 

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn("date", "Data");
    dataTable.addColumn("number", "Ton./Hora");
    dataTable.addColumn("number", "Ton./Hora Equiv.");
    dataTable.addColumn("number", "Peso (Ton.)");

    for (var i = 0; i < 12; i++) {
      var temp = new Date();

      dataTable.addRow([new Date(temp.getFullYear(), i)
                        ,(i + 2) * 6
                        ,(i + 1) * 12
                        ,(i + 0) * 18]);
    }

    var date_formatter = new google.visualization.DateFormat({
      pattern: "MMM/yyyy"
    });

    date_formatter.format(dataTable, 0);

    var options = {
      hAxis: {title: 'Período (mês/ano)'},
      series: {0: {type: 'line', targetAxisIndex:0},
               1: {type: 'line', targetAxisIndex:0},
               2: { type: 'bars', targetAxisIndex: 1 }
              },
      legend: { position: "top", textStyle: { fontSize: 14 } },
      width: 1200,
      height: 500
    };

    var container = document.getElementById("div-Equipamento-Produtividade");
    container.style.display = null;
    var chart = new google.visualization.ComboChart(container);
    chart.draw(dataTable, options);
  },
  packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div-Equipamento-Produtividade" style="display: none;"></div>

Upvotes: 9

Related Questions