jchris jchris -4 years ago 176
jQuery Question

Position icon after Google line chart title

I have a page with a Google Chart Gauge and a Google Chart Linechart.
I would like to place an icon just after the line chart title.
I use the following code to do this:

var e = $("text:contains('CHART TITLE')");
var off = e.offset();
$("#refreshIcon").css({
left: off.left + e.width() + 10,
top: off.top - e.height(),
position: "absolute",
'z-index': 999
});


Somehow the linechart conflicts with the gauge. Scenarios tested:

1) Gauge on top, line chart below: incorrect placement of icon

2) Line chart on top, gauge below: works fine

3) disable gauge drawing (just doing a return in drawGauge()): works fine

Any suggestions? Fiddle is here

Answer Source

using position() instead of offset() will give you top,
relative to the document, rather than the offset parent

also, since the gauge chart will affect where to position the image,
need to wait until both charts have finished drawing before setting placement

see following working snippet...

google.charts.load('current', {
  callback: drawCharts,
  packages: ['gauge', 'corechart']
});

function drawCharts() {
  drawChart();
  drawGauges();
}

function drawGauges() {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Memory', 80],
    ['CPU', 55],
  ]);

  var w = $(window).width();
  var x = Math.floor(w * 0.3);
  var h = $(window).height();
  var y = Math.floor(h * 0.3);

  var options = {
    redFrom: 90,
    redTo: 100,
    yellowFrom: 75,
    yellowTo: 90,
    minorTicks: 5,
    width: x,
    height: y,
  };

  var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
  google.visualization.events.addListener(chart, 'ready', moveImage);
  chart.draw(data, options);
}

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2004', 1000, 400],
    ['2005', 1170, 460],
    ['2006', 660, 1120],
    ['2007', 1030, 540]
  ]);

  var options = {
    title: 'CHART TITLE',
    curveType: 'function',
    legend: {
      position: 'bottom'
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
  google.visualization.events.addListener(chart, 'ready', moveImage);
  chart.draw(data, options);
}

function moveImage() {
  var e = $("text:contains('CHART TITLE')");
  var off = e.position();
  $("#refreshIcon").css({
    left: off.left + e.width() + 10,
    top: off.top - e.height() + 10,
    position: "absolute",
    'z-index': 999
  });
}

$(window).resize(drawCharts);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>

<i id="refreshIcon" class="fa fa-refresh" aria-hidden="true"></i>
<div class="container" id="container">
  <div class="row">
    <div id="chart_div"></div>
  </div>
  <div class="row" id="row1">
    <div id="curve_chart">
    </div>
  </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download