My Google Gauge is showing blank on thing speak

this is the JavaScript code i have written on under Thingspeak plugin > Google Guage

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>

  // set your channel id here
  var channel_id = 1264170;
  // set your channel's read api key here
  var api_key = '8YD9SX9ZU17OEQ5N';
  // list of name off the gauge and value
  var value_names = ['','ON','BLOCK','TAPE'];
  var gauge_names = ['OFF','Normal','Abnormal', 'Alert!'];

  // global variables
  var chart, charts, data;

  // load the google gauge visualization
  google.load('visualization', '1', {packages:['gauge']});
  google.setOnLoadCallback(initChart);

  // display the data
  function displayData(point) {
    data.setValue(0, 0, gauge_names[point]);
    data.setValue(0, 1, point); 
    data.setFormattedValue(0, 1, value_names[point]);    //Formatting font and font size is not possible in gauge chart
    chart.draw(data, options);
  }

  // load the data
  function loadData() {
    // variable for the data point
    var p;

    // get the data from thingspeak
    $.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/feed/last.json?api_key=' + api_key, function(data) {

      // get the data point
      p = data.field3;

      // if there is a data point display it
      if (p) {
        displayData(p);
      }

    });
  }

  // initialize the chart
  function initChart() {

    data = new google.visualization.DataTable();
    data.addColumn('string', 'Label');
    data.addColumn('number', 'Value');
    data.addRows(1);
    
    chart = new google.visualization.Gauge(document.getElementById('gauge_div'));
    options = {width: 240, height: 240, max: 3, redFrom: 1.5, redTo: 3, greenFrom:0.5, greenTo: 1.5, minorTicks: 0, majorTicks: ["Off","","","Bad"]};

    loadData();

    // load new data every 1 second
    setInterval('loadData()', 1000);
  }

</script>

Answer 1

[Vinod]

Why not use the gauge widget? Any particular reason you want the Google gauge, specifically?

[Aniket Manjare]

No, reason. can you please guide me to create a guage widget for the above code

[Vinod]

The point of us providing the built in gauges was to eliminate the need for you to write custom code. I'd strongly recommend you use the built in gauge. If there is some functionality that does not provide and is the reason you need to write your own gauge, please let us know so we can consider adding it.

[Christopher Stapels]

@Aniket In your channel view press the "add Widgets" button near the top of the channel view.

Select the Gauge widget. You can see more help in the documentation for widgets.

[Aniket Manjare]

Hello, i am using the guage provided by the Thingspeak only. i have made some changes in the code , the problem is when i am use thr default code i can see the guage and when i am using the the above code its not appearing , can you please tell why i am getting this error.