Display API results in a grafana text panel

grafana-text-panel-api.html

<!--
 Heavily based on https://github.com/grafana/grafana/issues/1816#issuecomment-137827966, 
 with some simplification and modifications for newer version of Grafana
-->
<div>
    <script type="text/javascript">

    (function() {
      // get a reference to the result container (this is a div at the bottom of this script)
      var elem = $('#myPanel')
      
      function refreshMyPanel() {
        $.ajax({
          // api url and options...
          url: "http://example.com/api/query",
          jsonp: "callback",
          dataType: "jsonp",
 
          success: function( response ) {
            // show loading spinner...
            elem.parent().closest(".panel-container").find('.panel-loading').removeClass("ng-hide");

            // handle the response...
            elem.text(response);

            // hide loading spinner...
            setTimeout(function() { elem.parent().closest(".panel-container").find('.panel-loading').addClass("ng-hide"); }, 1000);
          }

        })
      }

      $(document).ready(function() {

        // initial load
        refreshMyPanel()

        // hook into the dashboard refresh event
        angular.element(elem).injector().get('$rootScope').$on('refresh', function() {
          refreshMyPanel()
        })
      });
    })();
    </script>
    <div id="myPanel" /> 
</div>