title: Populate multi-dimension array through ajax
body: <p><strong>Update</strong></p>
  
  <p>I get an error <code>syntax error, unexpected '{', expecting ']'</code> on the line below:</p>
  
  <pre><code>&lt;?php
  $data['datasets'] = [{
                          label: 'Quotation',
                          backgroundColor: '#96ccf1',
                          borderWidth: 1,
                          data: [
                              100,500,5000,800,500
                          ]
                      },{
                          label: 'Purchase Order',
                          backgroundColor: '#96ccf1',
                          borderWidth: 1,
                          data: [
                              100,500,5000,800,500
                          ]
                      },{
                          label: 'Invoice',
                          backgroundColor: '#96ccf1',
                          borderWidth: 1,
                          data: [
                              100,500,5000,800,500
                          ]
                      }];
  ?&gt;
  </code></pre>
  
  <p>I have the original js code which I want to change into dynamic data retrieval. I'm able to change the <code>labels</code> part but unable to change the <code>datasets</code> part. </p>
  
  <p>Given the original data looks like (refer below), how to amend my PHP code so that when passed through ajax it can successfully display the correct data? Am I missing some quotes here and there??</p>
  
  <p>Thank you.</p>
  
  <p><strong>Original JS code (static)</strong></p>
  
  <pre><code>$.ajax({
      url: "action.php",
      type: "POST",
      data: {'action':'RetrieveData'},
      dataType: "json",
      success: function(data) {
          console.log(data);
  
          if(data.status=='success'){
              var barChartData = {
                  labels: ["01-Oct-2017","07-Oct-2017","14-Oct-2017","21-Oct-2017","28-Oct-2017"],
                  datasets: [{
                              label: 'Quotation',
                              backgroundColor: '#96ccf1',
                              borderWidth: 1,
                              data: [
                                  100,500,5000,800,500
                              ]
                          }, {
                              label: 'Purchase Order',
                              backgroundColor: '#FAD84E',
                              borderWidth: 1,
                              data: [
                                  100,500,2500,800,500
                              ]
                          }, {
                              label: 'Invoice',
                              backgroundColor: '#9FFA4E',
                              borderWidth: 1,
                              data: [
                                  100,500,2000,800,0
                              ]
                          }]
              };
  
              var ctx = document.getElementById("canvas").getContext("2d");
              window.myBar = new Chart(ctx, {
                  type: 'bar',
                  data: barChartData,
                  options: {
                      responsive: true,
                      title: {
                          display: true,
                          text: data.title_text
                      },
                      tooltips: {
                          mode: 'index',
                          intersect: false
                      }
                  }
              });
          }
      },
      error: function(data){
          console.log('Error occurred');
      }
  });
  </code></pre>
  
  <p><strong>Amended JS code (dynamic)</strong></p>
  
  <pre><code>$.ajax({
      url: "action.php",
      type: "POST",
      data: {'action':'RetrieveData'},
      dataType: "json",
      success: function(data) {
          console.log(data);
  
          if(data.status=='success'){
              var barChartData = {
                  labels: data.labels, // &lt;-- This is correct
                  datasets: data.datasets // &lt;-- I need help on this part
              };
  
              var ctx = document.getElementById("canvas").getContext("2d");
              window.myBar = new Chart(ctx, {
                  type: 'bar',
                  data: barChartData,
                  options: {
                      responsive: true,
                      title: {
                          display: true,
                          text: data.title_text
                      },
                      tooltips: {
                          mode: 'index',
                          intersect: false
                      }
                  }
              });
          }
      },
      error: function(data){
          console.log('Error occurred');
      }
  });
  </code></pre>
  
  <p>PHP code</p>
  
  <pre><code>$data['labels'] = ["01-Oct-2017","07-Oct-2017","14-Oct-2017","21-Oct-2017","28-Oct-2017"];
  $data['datasets'] = [{
                          label: 'Quotation',
                          backgroundColor: '#96ccf1',
                          borderWidth: 1,
                          data: [
                              100,500,5000,800,500
                          ]
                      },{
                          label: 'Purchase Order',
                          backgroundColor: '#96ccf1',
                          borderWidth: 1,
                          data: [
                              100,500,5000,800,500
                          ]
                      },{
                          label: 'Invoice',
                          backgroundColor: '#96ccf1',
                          borderWidth: 1,
                          data: [
                              100,500,5000,800,500
                          ]
                      }];
  
  echo json_encode($data); 
  </code></pre>