Pass array to ChartJS

Hello

I have an array in PHP which I would like to pass to Chart.JS, I need it to look like this: https://imgur.com/9e3jKuk Can anyone help me with this?

array:1 [▼
  "2022-08-19" => array:6 [▶
    "Seller 1" => 16.9
    "Seller 2" => 19.0
    "Seller 3" => 18.0
  ]
 "2022-08-18" => array:6 [▶
    "Seller 1" => 15.9
    "Seller 2" => 19.0
    "Seller 3" => 18.0
  ]
]

var chart = new Chart(chartCtx, {
                type: 'line',
                data: {
                    labels: ['2022-08-17', '2022-08-18', '2022-08-19'],
                    datasets: [
                        {
                            label: 'Seller 1',
                            backgroundColor: CHART_COLORS.red,
                            borderColor: CHART_COLORS.grey,
                            data: @json([5.30,5.99,5.70]),
                        },
                        {
                            label: 'Seller 2',
                            backgroundColor: CHART_COLORS.blue,
                            borderColor: CHART_COLORS.grey,
                            data: @json([5.30,5.89,6.00]),
                        },
                        {
                            label: 'Seller 3',
                            backgroundColor: CHART_COLORS.green,
                            borderColor: CHART_COLORS.grey,
                            data: @json([5.45,5.85,6.20]),
                        },
                    ],
                },
            });

OussamaMater

3 years ago

Level 37

Simply pass the array to the view and use {{ Js::from($variableyoupassed) }} Example:

{
   # in controller
   // the array you want, make sure to pluck the values only.
   return view('someview', ['variableyoupassed' => $variableyoupassed]); 

    # in the view
    label: 'Seller 1',
    backgroundColor: CHART_COLORS.red,
    borderColor: CHART_COLORS.grey,
    data: {{ Js::from($variableyoupassed) },
},

And there is a fresh tutorial on this specific topic I highly recommend you watch, might be what you need:

https://laracasts.com/series/laravel-cookbook/episodes/1 (minute 11)

Edit: I recommend sorting the array by the sellers and not the dates, because you will need the whole dataset of seller X as the dates represent the labels, so it will be much easier if you do so, an example to make it clear:

[
'seller_1' => [ // this way you 5, 7, 10 will be matching the labels exactly if you do $variable['seller_1']
    0 => 5, // represents date one, after a bit of cleaning
    1 => 7, // represents date two
    2 => 10 // represents date three
   ],
'seller_2' => [
      ..
   ],
'seller_3' => [
     ..
   ],
]

1 like

jpmg

3 years ago

Level 13

Hello @liamseys , I do it like this. Example

   $data = User::where('id',2)
                 ->orwhere('id',193)
                ->select('name','id')
                ->get();

$arraydata = $data->toArray();


	 array:2 [▼
         0 => array:2 [▼
        "name" => "Mikey"
        "id" => 1
    ]
	 1 => array:2 [▼
    	  "name" => "Pluto"
          "id" => 2
      ]
  ]

 return view('someview', ['variableyoupassed' => $arraydata]);

1 like

phermidex

3 years ago

Level 2

@jpmg thank you so much!

Please or to participate in this conversation.