comment puis-je transformer mes données josn_encode en tableau dans google bar chart?

Question

Ceci est mon json_encoded données

$encoded_data = json_encode($data); 

echo $encoded_data; 

[{"cols":"2017-09-02 11:01:55","rows":"1186.55"},{"cols":"2017-09-03 11:31:35","rows":"1311.45"},{"cols":"2017-09-06 15:22:38","rows":"90000.00"},{"cols":"2017-09-06 16:39:16","rows":"90000.00"},{"cols":"2017-09-06 16:40:09","rows":"630.00"},{"cols":"2017-09-06 17:25:26","rows":"1311.45"},{"cols":"2017-09-06 17:54:50","rows":"1311.45"},{"cols":"2017-09-07 09:28:57","rows":"1311.45"},{"cols":"2017-09-07 10:20:16","rows":"1575.00"},{"cols":"2017-09-07 10:22:28","rows":"1311.45"},{"cols":"2017-09-07 10:27:52","rows":"1311.45"},{"cols":"2017-09-07 10:34:00","rows":"1311.45"},{"cols":"2017-09-07 10:39:46","rows":"91575.00"},{"cols":"2017-09-07 10:40:48","rows":"91311.45"},{"cols":"2017-09-07 10:47:34","rows":"1575.00"},{"cols":"2017-09-07 10:50:53","rows":"1575.00"},{"cols":"2017-09-07 10:51:18","rows":"1575.00"}] 

<!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 

     // Load the Visualization API and the corechart package. 
     google.charts.load('visualization', '1', {'packages':['corechart']}); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.charts.setOnLoadCallback(drawChart); 

     // Callback that creates and populates a data table, 
     // instantiates the pie chart, passes in the data and 
     // draws it. 
     function drawChart() { 

     // Create the data table. 

     var jsonData = <?php echo $encoded_data; ?> 

     var data = new google.visualization.DataTable(jsonData); 




     // Set chart options 
     var options = {'title':'sales chart', 
         'width':400, 
         'height':300}; 

     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     } 
    </script> 



    <!--Div that will hold the pie chart--> 
    <div id="chart_div"></div> 

Il me donne une erreur de la table n'a aucune colonne.

Answer 1

JSON est pas dans le format correct pour créer la table de données directement,
voir la structure de l'objet littéral JavaScript described here ...

si vous ne voulez pas changer le format, il peut être transformé en utilisant javascript

voir ci-dessous extrait de travail ...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var jsonData = [{"cols":"2017-09-02 11:01:55","rows":"1186.55"},{"cols":"2017-09-03 11:31:35","rows":"1311.45"},{"cols":"2017-09-06 15:22:38","rows":"90000.00"},{"cols":"2017-09-06 16:39:16","rows":"90000.00"},{"cols":"2017-09-06 16:40:09","rows":"630.00"},{"cols":"2017-09-06 17:25:26","rows":"1311.45"},{"cols":"2017-09-06 17:54:50","rows":"1311.45"},{"cols":"2017-09-07 09:28:57","rows":"1311.45"},{"cols":"2017-09-07 10:20:16","rows":"1575.00"},{"cols":"2017-09-07 10:22:28","rows":"1311.45"},{"cols":"2017-09-07 10:27:52","rows":"1311.45"},{"cols":"2017-09-07 10:34:00","rows":"1311.45"},{"cols":"2017-09-07 10:39:46","rows":"91575.00"},{"cols":"2017-09-07 10:40:48","rows":"91311.45"},{"cols":"2017-09-07 10:47:34","rows":"1575.00"},{"cols":"2017-09-07 10:50:53","rows":"1575.00"},{"cols":"2017-09-07 10:51:18","rows":"1575.00"}]; 
 

 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'x'); 
 
    data.addColumn('number', 'y'); 
 

 
    jsonData.forEach(function (row) { 
 
    data.addRow([ 
 
     row.cols, 
 
     parseFloat(row.rows) 
 
    ]); 
 
    }); 
 

 
    var options = { 
 
    title: 'sales chart', 
 
    width: 400, 
 
    height: 300, 
 
    chartArea: { 
 
     left: 140 
 
    } 
 
    }; 
 

 
    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>