how get data from given string in javascript?

Question

I am using Laravel 5.6. I am trying to create a line chart graph using CHARTJS. Here is the controller.

 public function index()
{
    $currentMonth = date('m');
    $category = Category::where('isActive', 1)->count();
    $product = Product::where('isActive', 1)->count();
    $suppliers = Supplier::where('isActive', 1)->count();
    $saleorderCount = SaleOrderDetail::count();
    $sale_order_detail = SaleOrderDetail::whereRaw('MONTH(created_at) = ?',[$currentMonth])->get(['sale_order', 'grand_total']);
    $data_points = SaleOrderDetail::select('sale_order', 'grand_total')->whereRaw('MONTH(created_at) = ?',[$currentMonth])->get();
    $data_points = str_replace('sale_order', 'x', $data_points);
    $data_points = str_replace('grand_total', 'y', $data_points);
    $data_points = str_replace(',y:', '",y:', $data_points);
    dd($data_points);
           // dd($sale_order_detail);
    return view('welcome', ['category' => $category, 'product' => $product, 'suppliers' => $suppliers, 'salecount' => $saleorderCount, 'sale_order_detail' => $sale_order_detail, 'data_points' => $data_points]);
}

With $data_points , passing value to view. Here is the script

 <script type="text/javascript"> window.onload = function () { var data_point = {!! $data_points !!}; console.log(data_point); var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: data_point, datasets: [{ label: 'Sale of the Month', data: data_point, backgroundColor: [ 'rgba(54, 162, 235, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }); } </script> 

here is the console output of data points.

Here it how it show the chart.

Labels are not showing.

Answer 1

You're passing an array of objects for both your labels and your data. You want to pass an array of strings for the labels and an array of numeric values for your data. Change your code to this:

window.onload = function () {
var data_points = {!! $data_points !!};
//create your new arrays here
var data_labels = data_points.map((index) => index.x);
var data_values = data_points.map((index) => parseInt(index.y));

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        //use data_labels array here
        labels: data_labels,
        datasets: [{
            label: 'Sale of the Month',
            //use data_values array here
            data: data_values,
            backgroundColor: [
                'rgba(54, 162, 235, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
}