2016-08-29 13 views
0

こんにちは私のウェブサイトのダッシュボードを構築するのに忙しく、過去7日間のセッションを示すグラフを追加したいと思います。私はすでにサービスアカウントをセットアップしており、データを受け取っています。ここで私が受け取る出力されます。Chart.jsでLaravel Analyticsを実装するにはどうすればいいですか

[ 
    {"date":{"date":"2016-08-22 15:38:36.000000","timezone_type":3,"timezone":"UTC"},"visitors":"0","pageViews":"0"}, 
    {"date":{"date":"2016-08-23 15:38:36.000000","timezone_type":3,"timezone":"UTC"},"visitors":"0","pageViews":"0"}, 
    {"date":{"date":"2016-08-24 15:38:36.000000","timezone_type":3,"timezone":"UTC"},"visitors":"0","pageViews":"0"}, 
    {"date":{"date":"2016-08-25 15:38:36.000000","timezone_type":3,"timezone":"UTC"},"visitors":"0","pageViews":"0"}, 
    {"date":{"date":"2016-08-26 15:38:36.000000","timezone_type":3,"timezone":"UTC"},"visitors":"0","pageViews":"0"}, 
    {"date":{"date":"2016-08-27 15:38:36.000000","timezone_type":3,"timezone":"UTC"},"visitors":"0","pageViews":"0"}, 
    {"date":{"date":"2016-08-28 15:38:36.000000","timezone_type":3,"timezone":"UTC"},"visitors":"0","pageViews":"0"}, 
    {"date":{"date":"2016-08-29 15:38:36.000000","timezone_type":3,"timezone":"UTC"},"visitors":"1","pageViews":"5"} 
] 

私のコントローラの機能は、このようなものです:

<?php 

namespace App\Http\Controllers; 

use Illuminate\Http\Request; 

use App\Http\Requests; 
use LaravelAnalytics; 

class AdminController extends Controller 
{ 

    public function index(){ 
     $analytics = LaravelAnalytics::getVisitorsAndPageViews(7); 
     return view('admin.index') 
      ->with(json_encode($analytics)); 
    } 
} 

私はSpatie \ Laravel-解析ライブラリを使用していますことを言及するのを忘れてしまいました。 私のJavascriptはデモチャートをレンダリングするためにこのように見えます。

var ctx = document.getElementById("sessions"); 
var sessions = new Chart(ctx, { 
    type: 'line', 
    data: { 
     labels: ["Sunday","Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], 
     datasets: [{ 
      label: 'Sessions Last 7 Days', 
      data: [4,8, 19, 3, 5, 4, 3], 
      backgroundColor: [ 
       'rgba(52, 73, 94,0.2)' 
      ], 
      borderColor: [ 
       'rgba(52, 73, 94,1)' 
      ], 
      borderWidth: 1 
     }] 
    }, 
    options: { 
     responsive: true, 
     legend: { 
      display: false 
     }, 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    } 
}); 

私の質問は、jsonから受け取ったデータをグラフに表示するにはどうすればよいですか?

答えて

0

json.parse(json var)でデータを取得できるjsonオブジェクト/ファイルが既にある場合は、データを返します。

関連する問題