Getting a Rendered Panel Via API

I’m trying to download a rendered png of a panel from a dashboard via the API. I can get the link just fine on the webpage, but I get a 404 error when I make the api call. The link on the website looks something like this:

http://<HOST>:<PORT>/render/dashboard-solo/db/log-relays?from=1495988568967&to=1498580568967&panelId=2&width=1000&height=500

I have tried making the API call with the extension as it is, as well as with /api/render/dashboard-solo/db/log-relays

I have also encoded the “from” and “to” parameters as “now-24h” and “now” as opposed to the numerical codes above.

I am using basic auth and not an API key for this. Although that has worked fine for all the other API calls I have made, I am wondering if this is an issue? The final URL that actually gets shipped off is in the form:

http://<USER>:<PASS>@<HOST>:<PORT>/render/dashboard-solo/db/log-relays?from=1495988568967&to=1498580568967&panelId=2&width=1000&height=500

I’m pretty stumped, so I’d appreciate any help I can get very much. Thanks!

1 Like

That should work, using curl I could get a png with the following call:

curl "http://admin:admin@localhost:3000/render/dashboard-solo/db/big-dashboard?orgId=1&panelId=4&from=1495998275442&to=1498590275443&width=1000&height=500" > test.png

You can try yourself by rendering a png from the Grafana demo site:

curl "http://play.grafana.org/render/dashboard-solo/db/grafana-play-home?orgId=1&panelId=4&from=1498583548146&to=1498590748147&width=1000&height=500&tz=UTC%2B02%3A00" > testdemo.png

Rendering a PNG from the demo site works fine. I think that it’s something to do with the way the Grafana instance is set up on our server, so I’m going to talk to the administrator. Thanks for your help!

1 Like

Do you get an error message and http error code?

Yes, the HTTP response is 404: Page not found

Sorry for hijacking this thread, but I have the same issue - cannot render my dashboards, while Grafana demo works fine.
I’m running Grafana 4.4.2 on Ubuntu. When I trying to render, I do see rendering process

/usr/share/grafana/vendor/phantomjs/phantomjs --ignore-ssl-errors=true --web-security=false /usr/share/grafana/vendor/phantomjs/render.js url=http://localhost:3000/dashboard/db/my-dashboard?orgId=2 width=800 height=400 png=/var/lib/grafana/png/OxKZglOSyOOD2EVAExmi.png domain=localhost timeout=60 renderKey=CwN4pzGA2R4R3Uh4ECIke70TG1RresxR

but nothing happens.
/var/lib/grafana/png wasn’t exist, but after I created it, nothing changed.

Browser shows “… took too long to respond. HTTP ERROR 504” . Increasing timeout doesn’t help.
Nothing interesting into logs…

Hard to say what the problem is. Is this in Docker? Or is there a proxy involved that could be causing a problem? Could be an Out of Memory issue causing phantomjs to crash?

Are you using basic auth? This was the issue for me. When I authenticated with an API key it worked fine. That being said, you are getting a 504 and I got a 404 so it could be a different issue…

  • No, it’s not Docker - just EC2 Ubuntu instance
  • Yes, there is ELB for access Grafana via 80/443 ports. But reach Grafana directly via 300 port provides the same results
  • RAM is not an issue - phantomjs usage is just about 350M

But just now I tried to render a few another dashboards, and this works!
For problematic dashboards I tried to increase timeout up to 10 minutes - it doesn’t help.
And at a glance problematic dashboards aren’t bigger than others.

Yes, I saw 404 when tried basic auth using curl.
But in general on this step I’m using browser.

Is there anything different about the problematic dashboards? Anything in the query string parameters in the url that looks strange?

I would like to download the render to a PNG file with curl. But my Grafana use password. The curl can use HTTP POST data, but the downloaded file is not PNG.

My syntax is:

curl --data "username=WEBUSERNAME&password=WEBPASSWORD" "http://localhost:3000/render/dashboard/db/test?from=now-1d%2Fd&to=now-1d%2Fd&width=1280" >test.png

The result is:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <meta name="theme-color" content="#000">

    <title>Grafana</title>

                <link href='/public/css/fonts.min.css' rel='stylesheet' type='text/css'>


                  <link rel="stylesheet" href="/public/css/grafana.dark.min.ae7bca12.css">


    <link rel="icon" type="image/png" href="/public/img/fav32.png">
    <link rel="mask-icon" href="/public/grafana_mask_icon.svg" color="#F05A28">
                <base href="/" />

        </head>

        <body ng-cloak>
                <grafana-app class="grafana-app">

                        <aside class="sidemenu-wrapper">
                                <sidemenu ng-if="contextSrv.sidemenu"></sidemenu>
                        </aside>

                        <div class="page-alert-list">
                                <div ng-repeat='alert in dashAlerts.list' class="alert-{{alert.severity}} alert">
                                        <div class="alert-icon"><i class="{{alert.icon}}"></i></div>
                                        <div class="alert-body">
                                                <div class="alert-title">{{alert.title}}</div>
                                                <div class="alert-text" ng-bind='alert.text'></div>
                                        </div>
                                        <button type="button" class="alert-close" ng-click="dashAlerts.clear(alert)">
                                                <i class="fa fa fa-remove"></i>
                                        </button>
                                </div>
                        </div>

                        <div ng-view class="main-view"></div>
                        <footer class="footer">
                                <div class="row text-center">
                                        <ul>
                                                <li>
                                                        <a href="http://docs.grafana.org" target="_blank">
                                                                <i class="fa fa-file-code-o"></i>
                                                                Docs
                                                        </a>
                                                </li>
                                                <li>
                                                        <a href="https://grafana.com/services/support" target="_blank">
                                                                <i class="fa fa-support"></i>
                                                                Support Plans
                                                        </a>
                                                </li>
                                                <li>
                                                        <a href="https://community.grafana.com/" target="_blank">
                                                                <i class="fa fa-comments-o"></i>
                                                                Community
                                                        </a>
                                                </li>
                                                <li>
                                                        <a href="https://grafana.com" target="_blank">Grafana</a>
                                                        <span>v4.5.2 (commit: ec2b0fe)</span>
                                                </li>

                                        </ul>
                                </div>
                        </footer>
                </grafana-app>

        <script>
                window.grafanaBootData = {
                        user:{"isSignedIn":false,"id":0,"login":"","email":"","name":"","lightTheme":false,"orgId":0,"orgName":"","orgRole":"","isGrafanaAdmin":false,"gravatarUrl":"","timezone":"browser","locale":"en-US","helpFlags1":0},
                        settings: {"alertingEnabled":true,"allowOrgCreate":false,"appSubUrl":"","authProxyEnabled":false,"buildInfo":{"buildstamp":1506069243,"commit":"ec2b0fe","env":"production","hasUpdate":false,"latestVersion":"4.5.2","version":"4.5.2"},"datasources":{"-- Grafana --":{"meta":{"type":"datasource","name":"-- Grafana --","id":"grafana","info":{"author":{"name":"","url":""},"description":"","links":null,"logos":{"small":"public/img/icn-datasource.svg","large":"public/img/icn-datasource.svg"},"screenshots":null,"version":"","updated":""},"dependencies":{"grafanaVersion":"*","plugins":[]},"includes":null,"module":"app/plugins/datasource/grafana/module","baseUrl":"public/app/plugins/datasource/grafana","annotations":true,"metrics":true,"alerting":false,"builtIn":true,"routes":null},"name":"-- Grafana --","type":"datasource"},"-- Mixed --":{"meta":{"type":"datasource","name":"-- Mixed --","id":"mixed","info":{"author":{"name":"","url":""},"description":"","links":null,"logos":{"small":"public/img/icn-datasource.svg","large":"public/img/icn-datasource.svg"},"screenshots":null,"version":"","updated":""},"dependencies":{"grafanaVersion":"*","plugins":[]},"includes":null,"module":"app/plugins/datasource/mixed/module","baseUrl":"public/app/plugins/datasource/mixed","annotations":false,"metrics":true,"alerting":false,"builtIn":true,"mixed":true,"routes":null},"name":"-- Mixed --","type":"datasource"}},"defaultDatasource":"-- Grafana --","disableLoginForm":false,"disableSignoutMenu":false,"externalUserMngInfo":"","externalUserMngLinkName":"","externalUserMngLinkUrl":"","googleAnalyticsId":"","ldapEnabled":false,"panels":{"alertlist":{"baseUrl":"public/app/plugins/panel/alertlist","hideFromList":false,"id":"alertlist","info":{"author":{"name":"Grafana Project","url":"https://grafana.com"},"description":"","links":null,"logos":{"small":"public/app/plugins/panel/alertlist/img/icn-singlestat-panel.svg","large":"public/app/plugins/panel/alertlist/img/icn-singlestat-panel.svg"},"screenshots":null,"version":"","updated":""},"module":"app/plugins/panel/alertlist/module","name":"Alert List","sort":6},"dashlist":{"baseUrl":"public/app/plugins/panel/dashlist","hideFromList":false,"id":"dashlist","info":{"author":{"name":"Grafana Project","url":"https://grafana.com"},"description":"","links":null,"logos":{"small":"public/app/plugins/panel/dashlist/img/icn-dashlist-panel.svg","large":"public/app/plugins/panel/dashlist/img/icn-dashlist-panel.svg"},"screenshots":null,"version":"","updated":""},"module":"app/plugins/panel/dashlist/module","name":"Dashboard list","sort":7},"gettingstarted":{"baseUrl":"public/app/plugins/panel/gettingstarted","hideFromList":true,"id":"gettingstarted","info":{"author":{"name":"Grafana Project","url":"https://grafana.com"},"description":"","links":null,"logos":{"small":"public/app/plugins/panel/gettingstarted/img/icn-dashlist-panel.svg","large":"public/app/plugins/panel/gettingstarted/img/icn-dashlist-panel.svg"},"screenshots":null,"version":"","updated":""},"module":"app/plugins/panel/gettingstarted/module","name":"Getting Started","sort":100},"graph":{"baseUrl":"public/app/plugins/panel/graph","hideFromList":false,"id":"graph","info":{"author":{"name":"Grafana Project","url":"https://grafana.com"},"description":"","links":null,"logos":{"small":"public/app/plugins/panel/graph/img/icn-graph-panel.svg","large":"public/app/plugins/panel/graph/img/icn-graph-panel.svg"},"screenshots":null,"version":"","updated":""},"module":"app/plugins/panel/graph/module","name":"Graph","sort":1},"heatmap":{"baseUrl":"public/app/plugins/panel/heatmap","hideFromList":false,"id":"heatmap","info":{"author":{"name":"Grafana Project","url":"https://grafana.com"},"description":"","links":null,"logos":{"small":"public/app/plugins/panel/heatmap/img/icn-heatmap-panel.svg","large":"public/app/plugins/panel/heatmap/img/icn-heatmap-panel.svg"},"screenshots":null,"version":"","updated":""},"module":"app/plugins/panel/heatmap/module","name":"Heatmap","sort":5},"pluginlist":{"baseUrl":"public/app/plugins/panel/pluginlist","hideFromList":false,"id":"pluginlist","info":{"author":{"name":"Grafana Project","url":"https://grafana.com"},"description":"","links":null,"logos":{"small":"public/app/plugins/panel/pluginlist/img/icn-dashlist-panel.svg","large":"public/app/plugins/panel/pluginlist/img/icn-dashlist-panel.svg"},"screenshots":null,"version":"","updated":""},"module":"app/plugins/panel/pluginlist/module","name":"Plugin list","sort":100},"singlestat":{"baseUrl":"public/app/plugins/panel/singlestat","hideFromList":false,"id":"singlestat","info":{"author":{"name":"Grafana Project","url":"https://grafana.com"},"description":"","links":null,"logos":{"small":"public/app/plugins/panel/singlestat/img/icn-singlestat-panel.svg","large":"public/app/plugins/panel/singlestat/img/icn-singlestat-panel.svg"},"screenshots":null,"version":"","updated":""},"module":"app/plugins/panel/singlestat/module","name":"Singlestat","sort":2},"table":{"baseUrl":"public/app/plugins/panel/table","hideFromList":false,"id":"table","info":{"author":{"name":"Grafana Project","url":"https://grafana.com"},"description":"","links":null,"logos":{"small":"public/app/plugins/panel/table/img/icn-table-panel.svg","large":"public/app/plugins/panel/table/img/icn-table-panel.svg"},"screenshots":null,"version":"","updated":""},"module":"app/plugins/panel/table/module","name":"Table","sort":3},"text":{"baseUrl":"public/app/plugins/panel/text","hideFromList":false,"id":"text","info":{"author":{"name":"Grafana Project","url":"https://grafana.com"},"description":"","links":null,"logos":{"small":"public/app/plugins/panel/text/img/icn-text-panel.svg","large":"public/app/plugins/panel/text/img/icn-text-panel.svg"},"screenshots":null,"version":"","updated":""},"module":"app/plugins/panel/text/module","name":"Text","sort":4}}},
                        mainNavLinks: [{"text":"Dashboards","icon":"icon-gf icon-gf-dashboard","url":"/","children":[{"text":"Home","url":"/"},{"text":"Playlists","url":"/playlists"},{"text":"Snapshots","url":"/dashboard/snapshots"}]}]
                };
        </script>

        <script src="/public/app/boot.e4836696.js"></script>



        </body>
</html>

If I try to download it with a desktop browser then it’s working fine, the PNG will generate.

What is the problem? Why can’t generate a PNG from the panel with curl?

Thank you!

You are hitting the login page.

Try this:

curl "http://WEBUSERNAME:WEBPASSWORD@localhost:3000/render/dashboard/db/test?from=now-1d%2Fd&to=now-1d%2Fd&width=1280" > test.png

My password is not htaccess! It is the password of web login. Your tip doesn’t work. :frowning:

Oh, I think I found the solution:

http://docs.grafana.org/http_api/auth/

and an example:

https://github.com/grafana/grafana/issues/2467#issuecomment-130018515

[SOLVED] :slight_smile:

http:///render/dashboard-solo/db/?from=1513036800000&to=1513123199000&panelId=24&width=1700&height=500&refresh=1m&orgId=7
I am hitting this url. But I am getting server side error.Failed to render to png.
http:///dashboard-solo/db/?from=1513036800000&to=1513123199000&panelId=24&width=1700&height=500&refresh=1m&orgId=7

If I hit this url removing render, I can see the image clearly.
Any idea why this is happening?
Thanks in advance.

This url looks strange - where does this format come from? Or is this an edited url where you have removed the host?

Using the play site, here is a render url that works:

http://play.grafana.org/render/dashboard-solo/db/grafana-play-home?orgId=1&panelId=4&from=1513594130815&to=1513601330815&width=1000&height=500&tz=UTC%2B01%3A00

Here is without that works:

http://play.grafana.org/dashboard-solo/db/grafana-play-home?orgId=1&panelId=4&from=1513594130815&to=1513601330815&width=1000&height=500&tz=UTC%2B01:00

Not really sure what your problem is - have you any more information? Does the server side error say anything more than just “Failed to render png”?

Hi @daniellee
Sorry for the wrong URL.Here is the correct URL I am talking about.

http://host-ip/render/dashboard-solo/db/dashboard-name?from=1513036800000&to=1513123199000&panelId=24&width=1700&height=500&refresh=1m&orgId=7

If I hit this URL,I am getting Server Side Error.Failed to render png.

If I remove render from URL I am able to view the whole graph.

if you remove &refresh=1m from the url, does it work then?

What error are you getting on the server side?

Hi @daniellee

http://host-ip/render/dashboard-solo/db/dashboard-name?from=1513036800000&to=1513123199000&panelId=24&width=1700&height=500&orgId=7

As you said, I removed the refresh=1m and hit the above url and I am still getting the same error. I am getting 500 Internal server error while hitting the url.