Data points on google scatter chart with static polygon

Question

I'm creating a dashboard that needs to show the current temp/humidity of a sensor on a chart and display it in relation to a defined static polygon. The polygon represents the acceptable temp/humidity area. I do not need to show previous values, just current temp/humidity point.

I'm trying to create something like this:

What google chart can accommodate something like this? Is there a better library that can handle this? I can display the data with a scatter chart but I'm not sure how to approach the polygon:

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Humidity', 'Temp'],
          [ 51,      68],
        ]);

        var options = {
          title: 'Temp Humidity ',
          hAxis: {title: 'Relative Humidity', minValue: 45, maxValue: 65},
          vAxis: {title: 'Temperature (F)', minValue: 64, maxValue: 80},
          legend: 'none'
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }

Fiddle

user_5090771 · Answer

you can use the ComboChart, with a line series for the polygon.

add a third column for the polygon's y-axis values.
then add rows for each corner of the poylgon,
with one additional row to connect the polygon back to the first corner.

use null for the column values of the "other" series.

var data = google.visualization.arrayToDataTable([
  ['Humidity', 'Temp', 'poly'],
  // scatter point
  [51, 68, null],

  // polygon
  [54, null, 70],
  [58, null, 70],
  [58, null, 72],
  [54, null, 72],
  [54, null, 70],
]);

in the options, set the series options as follows...

var options = {
  title: 'Temp Humidity ',
  hAxis: {title: 'Relative Humidity', minValue: 45, maxValue: 65},
  vAxis: {title: 'Temperature (F)', minValue: 64, maxValue: 80},
  legend: 'none',
  seriesType: 'scatter',
  series: {
    1: {
      color: '#000000',
      type: 'line'
    }
  }
};

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Humidity', 'Temp', 'poly'],
    // scatter point
    [51, 68, null],

    // polygon
    [54, null, 70],
    [58, null, 70],
    [58, null, 72],
    [54, null, 72],
    [54, null, 70],
  ]);

  var options = {
    title: 'Temp Humidity ',
    hAxis: {title: 'Relative Humidity', minValue: 45, maxValue: 65},
    vAxis: {title: 'Temperature (F)', minValue: 64, maxValue: 80},
    legend: 'none',
    seriesType: 'scatter',
    series: {
      1: {
        color: '#000000',
        type: 'line'
      }
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

Data points on google scatter chart with static polygon

1 Answers