Search code examples
javascriptchartsgoogle-visualization

Data points on google scatter chart with static polygon

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: enter image description here

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);
      }
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>

Fiddle

Solution

  • 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);
});
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>