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.

obviously you should look into the chart.js documentation for how labels are passed. The way they are passed now is invalid — Nikos M.
– Nikos M., Commented Dec 4, 2018 at 13:17

markmoxx · Accepted Answer · 2018-12-04 13:33:37Z

2

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
                }
            }]
        }
    }
});
}

edited Dec 4, 2018 at 13:33

answered Dec 4, 2018 at 13:28

markmoxx

1,5521 gold badge11 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Haider Akbar Over a year ago

Thank you so much. I did not know how to break array.

markmoxx Over a year ago

No problem. This might come in handy for future reference: 10 JavaScript array methods you should know

Collectives™ on Stack Overflow

how get data from given string in javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related