3 months ago

Dynamic graph with chart.js and vue.js

Posted 3 months ago by rjruiz

I have the following bar graph:


As you can see I am showing all work orders in finished state that were assigned to users with the operator role. To this graph I have added a select that allows me to filter by operator name and then graph, that is, if I choose the operator Luis and press the search button, I should only graph Luis operator with all his completed orders, which in this case, you only have 2 orders in finished state.

I have the query, I have the graph working, I have the select.

My problem is not knowing how to graph again once the operator is selected from the input select, showing only the orders that the selected operator has. I suppose that the solution to this will be done within the script from where I am giving my variables, making the query to the url, etc.

How can I solve this problem?.

For the graph I am using the library chart.js and vue.js. So far everything stated above:


With this GetOperator () method I get the users with the operator role in the input select.

public function GetOperator()
        $operator = User::NotRole(['Admin', 'Supervisor'])->get();

        $data = [];
        $data[0] = [
            'id'   => 0,
            'text' =>'Seleccione',
        foreach ($operator as $key => $value) {
            $data[$key+1] =[
                'id'   => $value->id,
                'text' => $value->name,
            # code...
        return response()->json($data);

With this getOrders method ($ user = null, $ status = null, $ month = null), I query the database.

public function getOrders($user=null, $status=null, $month=null)

        $_orders = DB::table('users')
                        ->join('model_has_roles', 'users.id', '=', 'model_has_roles.model_id')                        
                        ->select('users.id','users.name', DB::raw('COUNT(orders.id) as orders_by_user'), 'model_has_roles.role_id as rol')                   
                        ->where('model_has_roles.role_id', '2');
            $_orders->where('orders.status', $status);
        if($user!=0){ // suponiendo que viene id de usuario
            $_orders->where('users.id', $user);

        if($month!=0){ // suponiendo que viene id de usuario
            // $query->where('title', "LIKE", "%$title%");
            $_orders->where('orders.date', 'LIKE', "%-{$month}-%");
                        $_orders->groupBy('orders.user_id', 'users.id',  'users.name',  'model_has_roles.role_id');

        return ['orders' => $orders, 'users'=> User::NotRole(['Admin', 'Supervisor'])->get()];




Here I show the graph and the select

<div class="row">
    <div class="col-md-6">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">Ordenes por operario</h3>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
            <div class="box-body"> 
                <div class="card card-chart">
                    <div class="card-header">
                        <h4>Seleccione Operario</h4>                                          
                        <form class="form-inline">
                            <div class="form-group mx-sm-3">
                                <label for="exampleFormControlSelect1" class="sr-only">Operario</label>                                                        
                                <select class="form-control" id="select_users">

                            <button type="submit" class="btn btn-primary">Buscar</button>
                    <div class="card-content">
                        <div class="ct-chart">
                            <canvas id="order">
                    <div class="card-footer">


Well inside the script in data, I define my variables, in the getOperarios method I make the query to the url '/ admin / dashboard / getOrders /' + user + '/' + status + '/' + month; I fill the select with the names of users with the role of operator and in turn I invoke the loadOperarios () method that will graph based on the past data.


    export default {          
        data (){
            return {                    


        methods : {

                let me=this;
                var url= '/admin/dashboard/getOrders/'+user+'/'+status+'/'+month;
                axios.get(url).then(function (response) {
                    //  console.log(response);
                    var respuesta = response.data;
                    me.orders = respuesta.orders;
                    me.users = respuesta.users;
                    var select_users = document.getElementById("select_users");
                    $.each(me.users, function(key, value) {

                        var option = document.createElement("option");
                        option.text = value.name;
                        option.value = value.id;
                    // //cargamos los datos del chart
                .catch(function (error) {

                let me=this;
                    // me.varUser_id.push(x.user_id);


                me.charOrders = new Chart(me.varOrders, {
                    type: 'bar',
                    data: {
                        labels: me.varMesOrders, 
                        datasets: [{
                            label: 'Ordenes',
                            data: me.varTotalOrders,
                            backgroundColor: 'rgba(25, 111, 61, 0.5)',
                            borderColor: 'rgba(25, 111, 61, 0.5)',                         
                            borderWidth: 1
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {


        mounted() {





I honestly don't have much knowledge in vue.js so I need to move forward, I need someone to guide me with the solution, I think you can also get the same result by implementing char.js alongside jajax and jquery if necessary I am willing to change my mind.

Please sign in or create an account to participate in this conversation.