how to display database data using javascript

Question

 <script type="text/javascript"> var data = { labels: ['January', 'February', 'March', 'April'], datasets: [ { fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [30, 50, 75, 59] }, ] }; var context = document.querySelector('#graph').getContext('2d'); new Chart(context).Line(data); </script>

 <canvas id="graph" width="400" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

 public function tracker() { $statistics = DiraStatistics::all(); return view('AltHr.Chatbot.tracker', compact('statistics')); }

Hi guys so im new to javascript i would like to know how can i view the data replacing "labels(jan,feb,march)" and "data(30,50,75)".

im doing this in laravel but so in my controller ive called the database values as:

i need the labels from column : date_access and data from column : question_asked

I would appreciate your help thanks

id | date_access | question_asked

1 | 2017-09-25 | 9

2 | 2017-09-26 | 5

..

Answer 1

Using the fetch api your code can look something like this:

fetch("someurl")//assuming get request, you need post then you need to pass a config object
.then(response => response.json())
.then(
  json => ({
    labels: json.months,//this depends on your json data

    datasets: [
      {
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: json.data//this depends on your json data
      }
    ]
  })
)
.then(
  data => {
    var context = document.querySelector('#graph').getContext('2d');    
    new Chart(context).Line(data);        
  }
)

If you want to support older browsers you need a polyfill

Examples of fetch api can be found here .

Your data can come from laravel restfull resource controllers

Answer 2

Can you Try this one buddy.

Controller

    public function tracker()
      {
        $statistics = DiraStatistics::all();
        labels = [];
        data =[];
        foreach ($statistics as $key => $statistic) {
            labels=  $statistic->date_access;
            data =  $statistic->question_asked;
        }
         return view('AltHr.Chatbot.tracker', compact('labels','data'));
      }

js in blade.

<script type="text/javascript">

      var data = {
      labels: ['{{ $labels[0] }}', '{{ $labels[1] }}', '{{ $labels[2] }}', '{{ $labels[3] }}'],

      datasets: [
        {
          fillColor: "rgba(220,220,220,0.2)",
          strokeColor: "rgba(220,220,220,1)",
          pointColor: "rgba(220,220,220,1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(220,220,220,1)",
          data: ['{{ $data[0] }}', '{{ $data[0] }}', '{{ $data[0] }}', '{{ $data[0] }}']
        },
      ]
    };

    var context = document.querySelector('#graph').getContext('2d');

    new Chart(context).Line(data);

</script>