2

I am having trouble getting the legend labels and the y-axis labels to show up on a google line chart. It works fine if the chart is not inside a google map infowindow but as soon as I put it inside a infowindow I can't get the labels to appear on the y-axis and the legend. Below is my function that creates the chart:

function drawChart(marker, title, description) {

historySets = [{
    "windSpeed": 0,
    "windGust": 0,
    "pressure": 29.34000015258789,
    "time": "2021-04-14T09:48:00"
}, {
    "windSpeed": 0,
    "windGust": 5,
    "pressure": 29.329999923706055,
    "time": "2021-04-14T09:43:00"
}, {
    "windSpeed": 1,
    "windGust": 5,
    "pressure": 29.329999923706055,
    "time": "2021-04-14T09:38:00"
}, {
    "windSpeed": 2,
    "windGust": 4,
    "pressure": 29.329999923706055,
    "time": "2021-04-14T09:32:55"
}];
console.log(historySets);

// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn({
    type: 'datetime',
    id: 'time',
    label: 'Date'
});
data.addColumn({
    type: 'number',
    id: 'windSpeed',
    label: 'Wind Speed'
});
data.addColumn({
    type: 'number',
    id: 'windGust',
    label: 'Gust Speed'
});

var rows = [];

historySets.forEach(element => {
    var date = new Date(element.time);
    rows.push([date, element.windSpeed, element.windGust]);
});

data.addRows(rows);

var options = {
    title: 'Last 6 Hours',
    hAxis: {
        format: 'hh',
        gridlines: {
            count: 10
        }
    },
    legend: {
        position: 'bottom'
    },
};

var formatDate = new google.visualization.DateFormat({
    prefix: 'Time: ',
    pattern: "dd MMM HH:mm",
});

formatDate.format(data, 0);

var infoWindowNode = document.createElement('div'); // for info window
var chartnode = document.createElement('div'); // for chart
var textNode = document.createElement('div'); // for text
textNode.innerHTML = '<h4>' + title + '</h4>' + '<p>' + description + '</p>';

infoWindowNode.appendChild(textNode);

var infoWindow = new google.maps.InfoWindow();
var chart = new google.visualization.LineChart(chartnode);

infoWindowNode.appendChild(chartnode);

chart.draw(data, options);
infoWindow.setContent(infoWindowNode);
infoWindow.open(marker.getMap(), marker);
}

Chart with no labels

This is the current output of the chart in the infoWindow. The legend labels and the y-axis labels are missing. I have tried setting the size to bigger width and height of 1000 each but everything I have tried wont make the labels appear.

seanmt13
  • 302
  • 1
  • 7
  • 17
  • 1
    this is the result of drawing the chart while its container is hidden, wait until the info window is shown before drawing for the first time... – WhiteHat Apr 14 '21 at 18:47
  • I tried moving "chart.draw(data, options);" after my "infoWindow.open(marker.getMap(), marker);" call but got the same result. Is there a better way to wait until the infoWindow is shown? – seanmt13 Apr 14 '21 at 19:12
  • 1
    InfoWindow has a `domready` event. – MrUpsidown Apr 14 '21 at 19:21
  • related question: [google maps api v3 infowindow + flot](https://stackoverflow.com/questions/12665108/google-maps-api-v3-infowindow-flot) – geocodezip Apr 15 '21 at 00:42

1 Answers1

3

As stated in the comments. It was a result of me drawing the chart while it's container is hidden. Fortunately, there is a domready event. Changing my function to listen for the even then call chart.draw() fixed it.

infoWindow.setContent(infoWindowNode);
infoWindow.open(marker.getMap(), marker);

google.maps.event.addListener(infoWindow, 'domready', function () {
    chart.draw(data, options);
});
seanmt13
  • 302
  • 1
  • 7
  • 17