Google Visualization highlight single grid line

Viewed 1072

how can I highlight a single grid line? I would like to set an optical temperature limit at 35 ° C.

enter image description here

Thanks! I have now added it to my code, but it does not work .... do you see my mistake? Or did I not understand something in your explanation? Here is the edited version :

  //Google Chart
   google.charts.load('current', {
   callback: function drawChart(peanut) {
     const div = document.createElement('div');
     div.id = peanut.color + peanut.mac.split(':').join('');
     $('#charts').appendChild(div);
     peanut.data = new google.visualization.DataTable();
     peanut.data.addColumn('datetime', 'Time');
     peanut.data.addColumn('number', ' ' + peanut.label);
     for (var i = 0, len = localStorage.length; i < len; i++) {
       let dateTime = new Date(parseInt(localStorage.key(i)));
       let item = JSON.parse(localStorage.getItem(localStorage.key(i)));
       if (item.peanutMac === peanut.mac) {
         if (item.temperatureCelsius) {
           let temperature = parseFloat(item.temperatureCelsius);
           peanut.data.addRows([ [dateTime, temperature] ]);
         } else if (item.alert) {
           let data = parseInt(item.alert);
           peanut.data.addRows([ [dateTime, data] ]);
         }
       }
     }
     if (peanut.type == 'thermo') {
     peanut.chart = new google.visualization.LineChart($('#' + div.id));

       peanut.chartOptions = {
         interpolateNulls: true,
         fontName: 'Roboto',
         curveType: 'function',
         colors: [peanut.rgbColor],
         width: document.body.clientWidth,
         height: (window.innerHeight - 224) / 2,
         legend: 'none',
          lineWidth: 3,
          vAxis: { 
            format: '#.## °C',
            ticks: [15.00, 20.00, 25.00, 30.00, 35.00, 40.00]
          },
          hAxis: {
            gridlines: { 
             color: '#fff'
           }
         }
       };

      peanut.viewColumns = [];
      $.each(new Array(data.getNumberOfColumns()), function (colIndex) {
      peanut.viewColumns.push(colIndex);
      });
      peanut.viewColumns.push({
      calc: function () {
       return 35;
       },
           label: 'optical temperature limit',
           type: 'number'
       });
     } 

    peanut.view = new google.visualiation.DataView(data);
    peanut.view.setColumns(viewColumns);

     if (peanut.data.getNumberOfRows()) {
       peanut.chart.draw(peanut.view, peanut.chartOptions);
     }
   }
     packages:['corechart', 'table']
 });
3 Answers
Related