Unexpected Identifier

I want to send a dynamically generated image, created with quickChart, with email in php. For testing i created the chartConfig in the quickChart Sandbox, everything is fine. When i copypaste the config to my php an start it, then i get ChartError: Error: unexpected identifier - 18:26. I don’t get it what the problem is. Here is my code:

$chartConfig = '{
  type: "horizontalBar",
  data: {
    labels: ["Sei perfekt", "Streng dich an", "Sei schnell", "Sei gefaellig", "Sei stark"],
    datasets: [
      {
        backgroundColor: ["#97cc64", "#97cc64", "#97cc64", "#97cc64", "#97cc64"],
        data: [26, 30, 25, 26, 25],
        barThickness: 30,
      },
      {
        backgroundColor: ["#ffd050", "#ffd050", "#ffd050", "#ffd050", "#ffd050"],
        data: [null, 10, null, null, null],
        barThickness: 30,
      },
      {
        backgroundColor: ["#fd5a3e", "#fd5a3e", "#fd5a3e", "#fd5a3e", "#fd5a3e"],
        data: [null, 5, null, null, null],
        barThickness: 30,
      },
    ],
  },
  options: {
    legend: {
      position: "bottom",
      labels: {
        generateLabels: (chart) => [
          {
            text: "Gesund",
            fillStyle: "#97cc64",
          },
          {
            text: "Uebermaessig",
            fillStyle: "#ffd050",
          },
          {
            text: "Negativ",
            fillStyle: "#fd5a3e",
          },
        ],
      },
    },
    scales: {
      xAxes: [
        {
          stacked: true,
          ticks: { min: 0, max: 50, display: true },
          gridLines: { display: true },
        },
      ],
      yAxes: [{ stacked: true, gridLines: { drawBorder: false } }],
    },
  },
}';
 
$chartUrl = 'https://quickchart.io/chart?w=500&h=300&c=' . Urlencode($chartConfig);

$chartUrl is then added to my html. But instead the chart, i get the error image in the email.

Thank you!

Hi @dwdrums,

The config looks ok at a glance. Could you please share the full chart URL that produces this error?

Ian

Thanks for your answer…

https://quickchart.io/chart?w=500&h=300&c=%7B%0A++type%3A+%22horizontalBar%22%2C%0A++data%3A+%7B%0A++++labels%3A+%5B%22Sei+perfekt%22%2C+%22Streng+dich+an%22%2C+%22Sei+schnell%22%2C+%22Sei+gefaellig%22%2C+%22Sei+stark%22%5D%2C%0A++++datasets%3A+%5B%0A++++++%7B%0A++++++++backgroundColor%3A+%5B%22%2397cc64%22%2C+%22%2397cc64%22%2C+%22%2397cc64%22%2C+%22%2397cc64%22%2C+%22%2397cc64%22%5D%2C%0A++++++++data%3A+%5B26%2C+30%2C+25%2C+26%2C+25%5D%2C%0A++++++++barThickness%3A+30%2C%0A++++++%7D%2C%0A++++++%7B%0A++++++++backgroundColor%3A+%5B%22%23ffd050%22%2C+%22%23ffd050%22%2C+%22%23ffd050%22%2C+%22%23ffd050%22%2C+%22%23ffd050%22%5D%2C%0A++++++++data%3A+%5Bnull%2C+10%2C+null%2C+null%2C+null%5D%2C%0A++++++++barThickness%3A+30%2C%0A++++++%7D%2C%0A++++++%7B%0A++++++++backgroundColor%3A+%5B%22%23fd5a3e%22%2C+%22%23fd5a3e%22%2C+%22%23fd5a3e%22%2C+%22%23fd5a3e%22%2C+%22%23fd5a3e%22%5D%2C%0A++++++++data%3A+%5Bnull%2C+5%2C+null%2C+null%2C+null%5D%2C%0A++++++++barThickness%3A+30%2C%0A++++++%7D%2C%0A++++%5D%2C%0A++%7D%2C%0A++options%3A+%7B%0A++++legend%3A+%7B%0A++++++position%3A+%22bottom%22%2C%0A++++++labels%3A+%7B%0A++++++++generateLabels%3A+%28chart%29+%3D%3E+%5B%0A++++++++++%7B%0A++++++++++++text%3A+%22Gesund%22%2C%0A++++++++++++fillStyle%3A+%22%2397cc64%22%2C%0A++++++++++%7D%2C%0A++++++++++%7B%0A++++++++++++text%3A+%22Uebermaessig%22%2C%0A++++++++++++fillStyle%3A+%22%23ffd050%22%2C%0A++++++++++%7D%2C%0A++++++++++%7B%0A++++++++++++text%3A+%22Negativ%22%2C%0A++++++++++++fillStyle%3A+%22%23fd5a3e%22%2C%0A++++++++++%7D%2C%0A++++++++%5D%2C%0A++++++%7D%2C%0A++++%7D%2C%0A++++scales%3A+%7B%0A++++++xAxes%3A+%5B%0A++++++++%7B%0A++++++++++stacked%3A+true%2C%0A++++++++++ticks%3A+%7B+min%3A+0%2C+max%3A+50%2C+display%3A+true+%7D%2C%0A++++++++++gridLines%3A+%7B+display%3A+true+%7D%2C%0A++++++++%7D%2C%0A++++++%5D%2C%0A++++++yAxes%3A+%5B%7B+stacked%3A+true%2C+gridLines%3A+%7B+drawBorder%3A+false+%7D+%7D%5D%2C%0A++++%7D%2C%0A++%7D%2C%0A%7D

That’s the whole url…copied to my browser, all is fine.

<td style='width:auto;'>
   <img height='auto' src='$chartUrl' style='border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;' width='100' />
</td>

That’s the part in the mail php part. But there wasn’t always a problem with other configs.

Thanks!

Unfortunately hard to say what’s wrong if the generated URL is loading fine in the browser. Maybe there’s something strange about how you’re constructing the email, or perhaps the email client itself.

See if you can copy the URL directly out of the email, or provide the raw email. At some level a syntax error (perhaps an issue related to encoding) is being introduced.

So, that’s the whole code:

<?php

$chartConfig = '{
  type: "horizontalBar",
  data: {
    labels: ["Sei perfekt", "Streng dich an", "Sei schnell", "Sei gefaellig", "Sei stark"],
    datasets: [
      {
        backgroundColor: ["#97cc64", "#97cc64", "#97cc64", "#97cc64", "#97cc64"],
        data: [26, 30, 25, 26, 25],
        barThickness: 30,
      },
      {
        backgroundColor: ["#ffd050", "#ffd050", "#ffd050", "#ffd050", "#ffd050"],
        data: [null, 10, null, null, null],
        barThickness: 30,
      },
      {
        backgroundColor: ["#fd5a3e", "#fd5a3e", "#fd5a3e", "#fd5a3e", "#fd5a3e"],
        data: [null, 5, null, null, null],
        barThickness: 30,
      },
    ],
  },
  options: {
    legend: {
      position: "bottom",
      labels: {
        generateLabels: (chart) => [
          {
            text: "Gesund",
            fillStyle: "#97cc64",
          },
          {
            text: "Uebermaessig",
            fillStyle: "#ffd050",
          },
          {
            text: "Negativ",
            fillStyle: "#fd5a3e",
          },
        ],
      },
    },
    scales: {
      xAxes: [
        {
          stacked: true,
          ticks: { min: 0, max: 50, display: true },
          gridLines: { display: true },
        },
      ],
      yAxes: [{ stacked: true, gridLines: { drawBorder: false } }],
    },
  },
}';
 
$chartUrl = 'https://quickchart.io/chart?w=500&h=300&c=' . Urlencode($chartConfig);
echo $chartUrl;


// Make email
$to = 'bla@bla.at';
$subject = "Hallo, hier ist dein Testergebnis!";

$message = "
<!doctype html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:v='urn:schemas-microsoft-com:vml' xmlns:o='urn:schemas-microsoft-com:office:office'>

<head>
  <title>
  </title>
  <!--[if !mso]><!-->
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <!--<![endif]-->
  <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style type='text/css'>
    #outlook a {
      padding: 0;
    }

    body {
      margin: 0;
      padding: 0;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }

    table,
    td {
      border-collapse: collapse;
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }

    img {
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
      -ms-interpolation-mode: bicubic;
    }

    p {
      display: block;
      margin: 13px 0;
    }
  </style>
  <!--[if mso]>
        <noscript>
        <xml>
        <o:OfficeDocumentSettings>
          <o:AllowPNG/>
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
        </xml>
        </noscript>
        <![endif]-->
  <!--[if lte mso 11]>
        <style type='text/css'>
          .mj-outlook-group-fix { width:100% !important; }
        </style>
        <![endif]-->
  <style type='text/css'>
    @media only screen and (min-width:480px) {
      .mj-column-per-100 {
        width: 100% !important;
        max-width: 100%;
      }
    }
  </style>
  <style media='screen and (min-width:480px)'>
    .moz-text-html .mj-column-per-100 {
      width: 100% !important;
      max-width: 100%;
    }
  </style>
  <style type='text/css'>
    @media only screen and (max-width:480px) {
      table.mj-full-width-mobile {
        width: 100% !important;
      }

      td.mj-full-width-mobile {
        width: auto !important;
      }
    }
  </style>
</head>

<body style='word-spacing:normal;'>
  <div style=''>
    <!--[if mso | IE]><table align='center' border='0' cellpadding='0' cellspacing='0' class='' style='width:600px;' width='600' ><tr><td style='line-height:0px;font-size:0px;mso-line-height-rule:exactly;'><![endif]-->
    <div style='margin:0px auto;max-width:600px;'>
      <table align='center' border='0' cellpadding='0' cellspacing='0' role='presentation' style='width:100%;'>
        <tbody>
          <tr>
            <td style='direction:ltr;font-size:0px;padding:20px 0;text-align:center;'>
              <!--[if mso | IE]><table role='presentation' border='0' cellpadding='0' cellspacing='0'><tr><td class='' style='vertical-align:top;width:600px;' ><![endif]-->
              <div class='mj-column-per-100 mj-outlook-group-fix' style='font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;'>
                <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='vertical-align:top;' width='100%'>
                  <tbody>
                    <tr>
                      <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                        <table border='0' cellpadding='0' cellspacing='0' role='presentation' style='border-collapse:collapse;border-spacing:0px;'>
                          <tbody>
                            <tr>
                              <td style='width:auto;'>
                                <img height='auto' src='$chartUrl' style='border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;' width='100' />
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                    <tr>
                      <td align='center' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                        <p style='border-top:solid 4px #F45E43;font-size:1px;margin:0px auto;width:100%;'>
                        </p>
                        <!--[if mso | IE]><table align='center' border='0' cellpadding='0' cellspacing='0' style='border-top:solid 4px #F45E43;font-size:1px;margin:0px auto;width:550px;' role='presentation' width='550px' ><tr><td style='height:0;line-height:0;'> &nbsp;
</td></tr></table><![endif]-->
                      </td>
                    </tr>
                    <tr>
                      <td align='left' style='font-size:0px;padding:10px 25px;word-break:break-word;'>
                        <div style='font-family:helvetica;font-size:20px;line-height:1;text-align:left;color:#F45E43;'>Hello World</div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]></td></tr></table><![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]></td></tr></table><![endif]-->
  </div>
</body>

</html>
"; 

// Always set content-type when sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";

// More headers
$headers .= 'From: "Bla von bla@bla.at" <bla@bla.at>' . "\r\n";

// Mail abschicken
mail($to,$subject,$message,$headers);

?>

In my outlook i get this error…as text, not as an image. What do the numbers at the end mean?

Thanks.

If you right click the image in Outlook, is it possible to copy that link? I want to see if Outlook is mangling it somehow :thinking:

As mentioned before between the images, outlook doesn’t show an image, it’s text.

When i change my chartConfig to the example from the homepage:

$chartConfig = '{
  type: "bar",
  data: {
    labels: ["Q1", "Q2", "Q3", "Q4"],
    datasets: [{
      label: "Users",
      data: [50, 60, 70, 180]
    }, {
      label: "Revenue",
      data: [100, 200, 300, 400]
    }]
  }
}';

only changed the single quotes to double quotes and everything works fine! I get a normal image and with right click…open in browser it opens in browser. perfect.


That’s why i can’t understand the problem :smiley: If you say that my chartConfig is fine and with the chartConfig from the homepage the email is fine…everything should be fine?! :smiley:

Thank you!

It is actually an image of text :slight_smile: If you can grab that URL or the raw email, we’ll be able to tell what’s wrong with the chart configuration in the email.

ah ok, i thought it would be only text because i am able to mark the text :smiley:

I was able to copy the url on my iphone email browser…

https://quickchart.io/chart?w=500&h=300&c=%7B%0A++type%3A+%22horizontalBar%22%2C%0A++data%3A+%7B%0A++++labels%3A+%5B%22Sei+perfekt%22%2C+%22Streng+dich+an%22%2C+%22Sei+schnell%22%2C+%22Sei+gefaellig%22%2C+%22Sei+stark%22%5D%2C%0A++++datasets%3A+%5B%0A++++++%7B%0A++++++++backgroundColor%3A+%5B%22%2397cc64%22%2C+%22%2397cc64%22%2C+%22%2397cc64%22%2C+%22%2397cc64%22%2C+%22%2397cc64%22%5D%2C%0A++++++++data%3A+%5B26%2C+30%2C+25%2C+26%2C+25%5D%2C%0A++++++++barThickness%3A+30%2C%0A++++++%7D%2C%0A++++++%7B%0A++++++++backgroundColor%3A+%5B%22%23ffd050%22%2C+%22%23ffd050%22%2C+%22%23ffd050%22%2C+%22%23ffd050%22%2C+%22%23ffd050%22%5D%2C%0A++++++++data%3A+%5Bnull%2C+10%2C+null%2C+null%2C+null%5D%2C%0A++++++++barThickness%3A+30%2C%0A++++++%7D%2C%0A++++++%7B%0A++++++++backgroundColor%3A+%5B%22%23fd5a3e%22%2C+%22%23fd5a3e%22%2C+%22%23fd5a3e%22%2C+%22%23fd5a3e%22%2C+%22%23fd5a3e%22%5D%2C%0A++++++++data%3A+%5Bnull%2C+5%2C+null%2C+null%2C+null%5D%20%2C%0A++++++++barThickness%3A+30%2C%0A++++++%7D%2C%0A++++%5D%2C%0A++%7D%2C%0A++options%3A+%7B%0A++++legend%3A+%7B%0A++++++position%3A+%22bottom%22%2C%0A++++++labels%3A+%7B%0A++++++++generateLabels%3A+%28chart%29+%3D%3E+%5B%0A++++++++++%7B%0A++++++++++++text%3A+%22Gesund%22%2C%0A++++++++++++fillStyle%3A+%22%2397cc64%22%2C%0A++++++++++%7D%2C%0A++++++++++%7B%0A++++++++++++text%3A+%22Uebermaessig%22%2C%0A++++++++++++fillStyle%3A+%22%23ffd050%22%2C%0A++++++++++%7D%2C%0A++++++++++%7B%0A++++++++++++text%3A+%22Negativ%22%2C%0A++++++++++++fillStyle%3A+%22%23fd5a3e%22%2C%0A++++++++++%7D%2C%0A++++++++%5D%2C%0A++++++%7D%2C%0A++++%7D%2C%0A++++scales%3A+%7B%0A++++++xAxes%3A+%5B%0A++++++++%7B%0A++++++++++stacked%3A+true%2C%0A++++++++++ticks%3A+%7B+min%3A+0%2C+max%3A+50%2C+display%3A+true+%7D%2C%0A++++++++++gridLines%3A+%7B+display%3A+true+%7D%2C%0A++++++++%7D%2C%0A++++++%5D%2C%0A++++++yAxes%3A+%5B%7B+stacked%3A+true%2C+gridLines%3A+%7B+drawBorder%3A+false+%7D+%7D%5D%2C%0A++++%7D%2C%0A++%7D%2C%0A%257%20D

and the url response from my php…

https://quickchart.io/chart?w=500&h=300&c=%7B%0A++type%3A+%22horizontalBar%22%2C%0A++data%3A+%7B%0A++++labels%3A+%5B%22Sei+perfekt%22%2C+%22Streng+dich+an%22%2C+%22Sei+schnell%22%2C+%22Sei+gefaellig%22%2C+%22Sei+stark%22%5D%2C%0A++++datasets%3A+%5B%0A++++++%7B%0A++++++++backgroundColor%3A+%5B%22%2397cc64%22%2C+%22%2397cc64%22%2C+%22%2397cc64%22%2C+%22%2397cc64%22%2C+%22%2397cc64%22%5D%2C%0A++++++++data%3A+%5B26%2C+30%2C+25%2C+26%2C+25%5D%2C%0A++++++++barThickness%3A+30%2C%0A++++++%7D%2C%0A++++++%7B%0A++++++++backgroundColor%3A+%5B%22%23ffd050%22%2C+%22%23ffd050%22%2C+%22%23ffd050%22%2C+%22%23ffd050%22%2C+%22%23ffd050%22%5D%2C%0A++++++++data%3A+%5Bnull%2C+10%2C+null%2C+null%2C+null%5D%2C%0A++++++++barThickness%3A+30%2C%0A++++++%7D%2C%0A++++++%7B%0A++++++++backgroundColor%3A+%5B%22%23fd5a3e%22%2C+%22%23fd5a3e%22%2C+%22%23fd5a3e%22%2C+%22%23fd5a3e%22%2C+%22%23fd5a3e%22%5D%2C%0A++++++++data%3A+%5Bnull%2C+5%2C+null%2C+null%2C+null%5D%2C%0A++++++++barThickness%3A+30%2C%0A++++++%7D%2C%0A++++%5D%2C%0A++%7D%2C%0A++options%3A+%7B%0A++++legend%3A+%7B%0A++++++position%3A+%22bottom%22%2C%0A++++++labels%3A+%7B%0A++++++++generateLabels%3A+%28chart%29+%3D%3E+%5B%0A++++++++++%7B%0A++++++++++++text%3A+%22Gesund%22%2C%0A++++++++++++fillStyle%3A+%22%2397cc64%22%2C%0A++++++++++%7D%2C%0A++++++++++%7B%0A++++++++++++text%3A+%22Uebermaessig%22%2C%0A++++++++++++fillStyle%3A+%22%23ffd050%22%2C%0A++++++++++%7D%2C%0A++++++++++%7B%0A++++++++++++text%3A+%22Negativ%22%2C%0A++++++++++++fillStyle%3A+%22%23fd5a3e%22%2C%0A++++++++++%7D%2C%0A++++++++%5D%2C%0A++++++%7D%2C%0A++++%7D%2C%0A++++scales%3A+%7B%0A++++++xAxes%3A+%5B%0A++++++++%7B%0A++++++++++stacked%3A+true%2C%0A++++++++++ticks%3A+%7B+min%3A+0%2C+max%3A+50%2C+display%3A+true+%7D%2C%0A++++++++++gridLines%3A+%7B+display%3A+true+%7D%2C%0A++++++++%7D%2C%0A++++++%5D%2C%0A++++++yAxes%3A+%5B%7B+stacked%3A+true%2C+gridLines%3A+%7B+drawBorder%3A+false+%7D+%7D%5D%2C%0A++++%7D%2C%0A++%7D%2C%0A%7D

Thank you!

Thanks, this is helpful. It looks like there is a slight difference - Outlook appears to be mangling the very last few characters (at least, I’m assuming it’s Outlook if it shows up fine in other email clients).

One workaround would be to use the Short URL API, which will produce a fixed-length URL that does not require URL encoding. The quickchart-php library has built-in support for this via getShortUrl().

Ok, on the standard mail client on iOS it also creates the error.

Mh, i will give it another try…i wanted to use the php library first, but struggled with composer…yes i am a noob :smiley: Composer is already installed on the server, but some librarys are used in a project in another folder…so in my testing folder i didn’t get it running until now.

Thank you very much for your time and help! Really appreciate that!

EDIT: or is it possible to use shortURL also via http? Only difference that the url will become invalid after 3 days?

Hi @dwdrums,

Sorry missed your reply but yes, you can use the Short URL via plain old HTTP. Instructions here: Short URLs and Templates | QuickChart

Hope this helps!

So, the only change is the chart/create enpoint, right?

$chartUrl = 'https://quickchart.io/chart/create?w=500&h=300&c=' . Urlencode($chartConfig);

sorry…

Please can you help formatting the right url for my example? Thank you so much!

Hi @dwdrums,

So sorry for the delay here, I didn’t have my notification settings right for this thread.

The /chart/create endpoint is a POST request. Documentation is available here: Short URLs and Templates | QuickChart

My PHP is a bit rusty, but you could do something like this:

<?php

$url = 'https://quickchart.io/chart/create';

// The data you want to send (as a string)
$data = '{
    "chart": {
        "type": "bar",
        "data": {
            "labels": ["Q1", "Q2", "Q3", "Q4"],
            "datasets": [{
                "label": "Users",
                "data": [50, 60, 70, 180]
            }]
        }
    }
}';

// Setup cURL
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type:application/json'));

// Send the request
$response = curl_exec($ch);
if($response === FALSE){
    die(curl_error($ch));
}

// Handle data from the response
$responseData = json_decode($response, TRUE);
print_r($responseData);

// Clean up
curl_close($ch);
?>

Hi, thank you! I got the curl and the first part of my config running. But i don’t get the options part into valid json.

Please can you help me to convert this part? As mentioned in a post earlier…

options: {
    legend: {
      position: "bottom",
      labels: {
        generateLabels: (chart) => [
          {
            text: "Gesund",
            fillStyle: "#97cc64",
          },
          {
            text: "Uebermaessig",
            fillStyle: "#ffd050",
          },
          {
            text: "Negativ",
            fillStyle: "#fd5a3e",
          },
        ],
      },
    },
    scales: {
      xAxes: [
        {
          stacked: true,
          ticks: { min: 0, max: 50, display: true },
          gridLines: { display: true },
        },
      ],
      yAxes: [{ stacked: true, gridLines: { drawBorder: false } }],
    },
  },
}';

i don’t get this part.

until now i got this…

'{
  "chart": {
      "type": "horizontalBar",
      "data": {
          "labels": ["Sei perfekt", "Streng dich an", "Sei schnell", "Sei gefällig", "Sei stark"],
          "datasets": [{
              "backgroundColor": ["#97cc64", "#97cc64", "#97cc64", "#97cc64", "#97cc64"],
              "data": [26, 30, 25, 26, 25],
              "barThickness": 30
          },{
            "backgroundColor": ["#ffd050", "#ffd050", "#ffd050", "#ffd050", "#ffd050"],
            "data": [null, 10, null, null, null],
            "barThickness": 30
          },{
          "backgroundColor": ["#ffd050", "#ffd050", "#ffd050", "#ffd050", "#ffd050"],
          "data": [null, 5, null, null, null],
          "barThickness": 30
          }]
      },

but then the options part begins…

thank you!

In order to include a Javascript function in chart, you’ll have to supply the entire chart as a string rather than a Javascript literal. This is because chart must always be valid JSON. See Using Javascript functions | QuickChart

For example:

<?php

$url = 'https://quickchart.io/chart/create';

// The chart configuration (Javascript literal containing a function)
$chart = '{
    "type": "bar",
    "data": {
        "labels": ["Q1", "Q2", "Q3", "Q4"],
        "datasets": [{
            "label": "Users",
            "data": [50, 60, 70, 180]
        }]
    },
    "options": {
        "legend": {
            "position": "bottom",
            "labels": {
                "generateLabels": (chart) => [
                    {
                        "text": "Gesund",
                        "fillStyle": "#97cc64"
                    },
                    {
                        "text": "Uebermaessig",
                        "fillStyle": "#ffd050"
                    },
                    {
                        "text": "Negativ",
                        "fillStyle": "#fd5a3e"
                    }
                ]
            }
        },
        "scales": {
            "xAxes": [
                {
                    "stacked": true,
                    "ticks": { "min": 0, "max": 50, "display": true },
                    "gridLines": { "display": true }
                }
            ],
            "yAxes": [{ "stacked": true, "gridLines": { "drawBorder": false } }]
        }
    }
}';

// Convert the chart object to a JSON string
$chart = json_encode($chart);

// The data you want to send (as a string)
$data = '{"chart": ' . $chart . '}';

// Setup cURL
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type:application/json'));

// Send the request
$response = curl_exec($ch);
if($response === FALSE){
    die(curl_error($ch));
}

// Handle data from the response
$responseData = json_decode($response, TRUE);
print_r($responseData);

// Clean up
curl_close($ch);
?>

I did it and everything is working fine! Thank you sooo much for your help!

antreibertest

1 Like