将Laravel5.0中的谷歌图表与来自mysql数据库的数据集成

时间:2016-05-04 11:12:23

标签: javascript php mysql laravel-5 google-chartwrapper

我想在我的laravel5.0应用程序中集成谷歌图表。数据在mysql数据库中。到目前为止,我已经完成了对互联网的研究

控制器部分

    public function index(){

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

但它显示&#34;表没有列&#34; 。我知道我还没有创建任何专栏,而且我也明白只需编写此google.visualization.DataTable(<?=$bar?>)就不会创建任何专栏。我已经尝试了很多方法来创建列,但找不到任何解决方案。如何从中创建数据表?

我也试过了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>

这也不起作用,因为我无法正确获得dataTable[]的价值。

1 个答案:

答案 0 :(得分:0)

您可以使用@Test public void testFindByStatus() throws ParseException { for (PersonStatus status : PersonStatus.values()) { List<Person> personlist = PersonRepository.findByStatus(status); assertThat(personlist, notNullValue()); } } 将数据加载到数据表中。

参见以下示例......

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']
});