Adding data dynamically in javascript array

Question

I have this controller:

public function main()
{
    $user=User::find(1);
    return view('home')->with('user',$user);
}

And in the home.blade.php view, i need to get the user's attributes travel, food, misc. I can get those using $user->travel , $user->food , $user->misc which are integers. but, i have to show these expenses in pie chart. So, i use chart.js

    Travel Expenses:{{$user->travel}}<br>
    Food Expenses:{{$user->food}}<br>
    Miscellaneous Expenses:{{$user->misc}}<br>

    <canvas id="myChart"></canvas>

    <script>
     var ctx = document.getElementById("myChart");
            var data = {
                labels: [
                    "Travel",
                    "Food",
                    "Miscellaneous"
                ],
                datasets: [
                    {
                        data: [300, 50, 100],
                        backgroundColor: [
                            "#FF6384",
                            "#36A2EB",
                            "#FFCE56"
                        ],
                        hoverBackgroundColor: [
                            "#FF6384",
                            "#36A2EB",
                            "#FFCE56"
                        ]
                    }]
            };
        </script>

This will show static data 300,50, and 100. How can i add these data dynamically? I need data: [300, 50, 100] , to be something like data: [$user->travel, $user->food, $user->misc],

Answer 1

You can do something like that in your controller:

public function main()
{
    $user = User::find(1);
    $data = [
        'user'      => $user,
        'dataChart' => [$user->travel, $user->food, $user->misc]
    ];
    return view('home', $data);
}

and in your view:

<script>
var ctx = document.getElementById("myChart");
var data = {
    labels: [
      "Travel",
      "Food",
      "Miscellaneous"
    ],
    datasets: [{
        data: {{$dataChart}},
        backgroundColor: [
            "#FF6384",
            "#36A2EB",
            "#FFCE56"
        ],
        hoverBackgroundColor: [
            "#FF6384",
            "#36A2EB",
            "#FFCE56"
        ]
    }]
};
</script>

That's resolves your problem.

Answer 2

Use the same notation:

data: [{{$user->travel}}, {{$user->food}}, {{$user->misc}}]

That way the template engine will render the values and when loaded in browser then javascript will use it.

Answer 3

Try :

<?php

$travel = $user->travel;
$food = $user->food;
$misc =  $user->misc;

$data = "[$travel,$food,$misc]";
?>

Travel Expenses:{{$travel}}<br>
    Food Expenses:{{$food}<br>
    Miscellaneous Expenses:{{$misc}}<br>

    <canvas id="myChart"></canvas>

    <script>
     var ctx = document.getElementById("myChart");
            var data = {
                labels: labels: [
                "Travel",
                "Food",
                "Miscellaneous",
                datasets: [
                    {
                        data: {{$data}},
                        backgroundColor: [
                            "#FF6384",
                            "#36A2EB",
                            "#FFCE56"
                        ],
                        hoverBackgroundColor: [
                            "#FF6384",
                            "#36A2EB",
                            "#FFCE56"
                        ]
                    }]
            };
        </script>

Answer 4

        Travel Expenses:<span id='travel'>{{$user->travel}}</span><br>
 Food Expenses:<span id='food'>{{$user->food}}</span><br>
 Miscellaneous Expenses:<span id='misc'>{{$user->misc}}</span>

        <canvas id="myChart"></canvas> <script> 
        var ctx = document.getElementById("myChart");

        var data = { 
           labels: [
              "Travel", 
              "Food", 
              "Miscellaneous"
           ], 
          datasets: [ { 
             data: [
                document.getElementById('travel').innerHTML, 
    document.getElementById('food').innerHTML, 
    document.getElementById('misc').innerHTML],
             backgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ], 
             hoverBackgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ] 
           }] 
        }; 
    </script>


Try this.