How to use json_encode to format PHP to javascript for Chart? Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How to use json_encode to format PHP to javascript for Chart? without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I would like to convert a PHP array with json_encode to use values in javascript Chart.js

What I have is:

$dataSets = [ 0 => [
    'type' => 'line',
    'data' => json_encode(array_values($val_ca_1), JSON_NUMERIC_CHECK),
    'backgroundColor' => 'transparent',
    'borderColor' => '#007bff',
    'pointBorderColor' => '#007bff',
    'pointBackgroundColor' => '#007bff',
    'fill' => false
  ],

];

With $val_ca_1 = array('2021-02-01' => 10, '2021-02-02' => 14, '2021-02-03' => 8);

What I do in javascript:

new Chart($visitorsChart, {
data: {
  labels: ['2021-02-01', '2021-02-02', '2021-02-03'],
  datasets: <?php echo json_encode($dataSets); ?>
},
options: {
  maintainAspectRatio: false,
  tooltips: {
    mode: mode,
    intersect: intersect
  },

But it displays:

data: {
  labels: ['2021-02-01', '2021-02-02', '2021-02-03'],
  datasets: [{
     "type": "line",
     "data": "[10,14,8]"
     "backgroundColor": "transparent",
     "borderColor": "#007bff",
     "pointBorderColor": "#007bff",
     "pointBackgroundColor": "#007bff",
     "fill": false
  }]
},

And there is a problem with ‘data’, it has to be:

"data": [10,14,8]

(without double quotes) Any idea? Thanks!

Answer

You’re double-encoding some of the data. Look at this:

json_encode(array_values($val_ca_1), JSON_NUMERIC_CHECK)

That will pre-encode that part of the data as a string inside $dataSets. So it’s already JSON. When you come to convert the whole of $dataSets to JSON, it treats it as the simple string it’s already been converted to, rather than an array.

The solution is simple – don’t encode different parts of the data separartely. Keep it all in PHP variables and then turn all of it into a JSON string right at the last moment, when you actually need to.

In practical terms, in your code, just change

'data' => json_encode(array_values($val_ca_1), JSON_NUMERIC_CHECK)

to

'data' => array_values($val_ca_1)
We are here to answer your question about How to use json_encode to format PHP to javascript for Chart? - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji