cURL method imageGraph garbage characters

Support & Bugs
1

Does anyone see anything in the following code that would cause the requested information to be returned as junk characters, rather than the intended graph?

$url = 'https://.../matomo/index.php?
    module=API
  &method=ImageGraph.get
  &idSite=1
  &apiModule=Referrers
  &apiAction=getReferrerType
  &token_auth=...my token...
  &period=day
  &date=2018-04-10,2018-05-09';

  $curl_request = curl_init();
  curl_setopt($curl_request, CURLOPT_URL, $url);
  curl_setopt($curl_request, CURLOPT_ENCODING, '');
  curl_exec($curl_request);
  curl_close($curl_request);

Sample of displayed characters returned:

�PNG  IHDR"�f� IDATx���yxde�����T����JR�=�N��Jw�4-�� ��(�sQ��(W�Gň���s�ޙ+à>W��� "nW����(([c�F���IwW��$U���>��-���V...

Roddy

2

Hi,

The URL seems correct (same URL on the demo instance), but I am not sure I get what garbage characters you are referring to. What you see is the PNG file displayed as a text.

If you want the browser to display the image, you need to tell him that it is an image:

header ('Content-Type: image/png');
3

Thanks, Lucas. It is not quite what I am trying to do, but you did remind me of what I need to do. It is part of an AJAX call and needs to to be loaded into the src attribute of an tag.

By the way, what is the best format for the cURL call to the Matomo reporting API when using AJAX to fill the src attribute of an img tag?

And, why do you think that it is the best?

Roddy

4

OK. Here is what I have done. Although I am able to get the ALT message of the <img> tag to appear, I am unable to display the image. Any suggestions?

The PHP

$url ='https://.../matomo/index.php
	?module=API
	&method=ImageGraph.get
	&idSite=1
	&apiModule=Referrers
	&apiAction=getReferrerType
	&token_auth= ...
	&period=day
	&date=2018-04-10,2018-05-09';
$curl_request = curl_init();
curl_setopt($curl_request, CURLOPT_URL, $url);
curl_exec($curl_request);
curl_close($curl_request);

The HTML

<div id='referral_types'>
    <img src='' alt='Line Chart of Referral Types' />
</div>

The Javascript

$(document).ready(function() {
    $.ajax({
        method: 'GET',
        url: "./practice.php",
        cache: false,
        contentType: 'image/png',
        success: function(response) {
            console.log(response);
            var graphic_src = response;
            $('#referral_types').find('img').attr('src', graphic_src);
        }
    });
});

The console shows the same character nonsense as before, so I know that the .php file is being read.

Roddy

5

Hi,

As mentioned above you need a Content-Type header. When I add it at the beginning of your PHP I can access the image in the browser.

What do you need the AJAX request for? Wouldn’t this do the same?

<div id='referral_types'>
    <img src='./practice.php' alt='Line Chart of Referral Types' />
</div>
6

As mentioned above you need a Content-Type header. When I add it at the beginning of your PHP I can access the image in the browser.

At your intimation I added the content-type to the AJAX statement as follows:

contentType: ‘image/png’,

Apparently you missed it.

What do you need the AJAX request for? Wouldn’t this do the same?

Yes, it does achieve the embedded graph, but then I would have to create a new file for each and every graph that I wish to display.

My eventual goal is to allow visitors some flexibility in what they see, and for this I need AJAX calls to send their requests to the PHP file that generates their response.

Roddy

7

I am not too familiar, but I think the server needs to send the correct MIME type.