Laravel5.0にgoogle chartをmysqlデータベースのデータと統合する

Question

laravel5.0アプリケーションにGoogleグラフを統合したい。データはmysqlデータベースにあります。私は$バーを印刷する場合は私の知る限り

コントローラ部怒鳴る与えられているインターネット上での研究をやった

public function index(){ 

    $barChart= DB::table('clients') 
     ->select('clients.ClientName','clients.Price') 
     ->get(); 
    $bar = json_encode($barChart); 
    return view('home') 
     ->with('bar', $bar); 
} 

は、結果が

[{"ClientName":"nayeem","Price":1000},{"ClientName":"Tusher","Price":1000}, 
{"ClientName":"Nirjon","Price":1000},{"ClientName":"Remon","Price":1000}, 
{"ClientName":"Navid","Price":1000},{"ClientName":"Erfan","Price":1000}, 
{"ClientName":"Sazzad","Price":1000},{"ClientName":"Farin","Price":2000}, 
{"ClientName":"Arman","Price":1000},{"ClientName":"Sohan","Price":1000}, 
{"ClientName":"romi vai","Price":9000},{"ClientName":"tasif","Price":1000}, 
{"ClientName":"trina","Price":1000},{"ClientName":"Nuru Vai","Price":1000}] 

ビューの一部

<div class="panel-body" id="barChart"> </div> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load('visualization', '1', {'packages':['corechart']}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
     var data = new google.visualization.DataTable(<?=$bar?>); 
     var options = { 
     title: 'My Bar chart', 
     is3D: 'true' 
    }; 
    var chart = new google.visualization.PieChart(document.getElementById('barChart')); 
    chart.draw(data, options); 
    } 

です

しかし、 "テーブルには列がありません"と表示されます。私はどの列も作成していないことを知っており、これを単に書くことはgoogle.visualization.DataTable(<?=$bar?>)は列を作成しないことを理解しています。私は列を作成する多くの方法を試したが、解決策を見つけることができません。これでデータテーブルを作成するにはどうすればよいですか？

また、私はきちんとdataTable[]の値を持つことができないようchartWraper

<script type="text/javascript"> 
    google.load('visualization', '1.0'); 
    function drawInventoryChart() { 
     var wrapper = new google.visualization.ChartWrapper({ 
      chartType: 'ColumnChart', 
      dataTable: [], //don't know how to put $bar here 
      option: {title: 'test'} 
     }); 
     wrapper.draw('barChart'); 
    } 
    google.setOnLoadCallback(drawInventoryChart); 
</script> 

これはまた、動作しませんみました。

Answer 1

array.forEachを使用すると、データをデータテーブルにロードできます。たとえば、次の

見る

google.charts.load('current', { 
 
    callback: function() { 
 

 
    // use the following 
 
    //var sqlData = <?=$bar?>; 
 

 
    // for example 
 
    var sqlData = [ 
 
     {"ClientName":"nayeem","Price":1000},{"ClientName":"Tusher","Price":1000}, 
 
     {"ClientName":"Nirjon","Price":1000},{"ClientName":"Remon","Price":1000}, 
 
     {"ClientName":"Navid","Price":1000},{"ClientName":"Erfan","Price":1000}, 
 
     {"ClientName":"Sazzad","Price":1000},{"ClientName":"Farin","Price":2000}, 
 
     {"ClientName":"Arman","Price":1000},{"ClientName":"Sohan","Price":1000}, 
 
     {"ClientName":"romi vai","Price":9000},{"ClientName":"tasif","Price":1000}, 
 
     {"ClientName":"trina","Price":1000},{"ClientName":"Nuru Vai","Price":1000} 
 
    ]; 
 

 
    // create data table 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Client'); 
 
    data.addColumn('number', 'Price'); 
 

 
    // load data table 
 
    sqlData.forEach(function(row) { 
 
     data.addRow([row.ClientName, row.Price]); 
 
    }); 
 

 
    var chart = new google.visualization.BarChart(document.getElementById('barChart')); 
 
    chart.draw(data, { 
 
     title: 'My Bar chart', 
 
     is3D: 'true' 
 
    }); 
 
    }, 
 
    packages: ['corechart'] 
 
});

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