Laravel 5 Chart Js rendering multiple charts in blade template error

Question

i am trying to add multiple charts to the blade template unfortunately without success.

Laravel Version: 5.6 Package: https://github.com/fxcosta/laravel-chartjs

     $chartjs = app()->chartjs
            ->name('lineChartTest')
            ->type('line')
            ->size(['width' => 400, 'height' => 200])
            ->labels($date)
            ->datasets([
                [
                    "label" => "Gesammelte Coins",
                    'backgroundColor' => "rgba(38, 185, 154, 0.31)",
                    'borderColor' => "rgba(38, 185, 154, 0.7)",
                    "pointBorderColor" => "rgba(38, 185, 154, 0.7)",
                    "pointBackgroundColor" => "rgba(38, 185, 154, 0.7)",
                    "pointHoverBackgroundColor" => "#fff",
                    "pointHoverBorderColor" => "rgba(220,220,220,1)",
                    'data' => $coins,
                ]
            ])
            ->options([]);

  $chartjs2 = app()->chartjs
          ->name('lineChartTest')
          ->type('line')
          ->size(['width' => 400, 'height' => 200])
          ->labels($date2)
          ->datasets([
              [
                  "label" => "Gesammelte Coins",
                  'backgroundColor' => "rgba(38, 185, 154, 0.31)",
                  'borderColor' => "rgba(38, 185, 154, 0.7)",
                  "pointBorderColor" => "rgba(38, 185, 154, 0.7)",
                  "pointBackgroundColor" => "rgba(38, 185, 154, 0.7)",
                  "pointHoverBackgroundColor" => "#fff",
                  "pointHoverBorderColor" => "rgba(220,220,220,1)",
                  'data' => $coins2,
              ]
          ])
          ->options([]);    


      return view('vendor/voyager/dashboard', [

                                                 'chartjs' => $chartjs,
                                                 'chartjs2' => $chartjs2
     ]);

 //blade template
       <div style="background:#FFF; margin-top:20px;" class="col-md-6">
                   {!! $chartjs->render() !!}
                </div>
                <div style="background:#FFF; margin-top:20px;" class="col-md-6">
                  {!! $chartjs2->render() !!}
               </div>

I can add one chart successfully but when i try to add both than i get a blank chart.

Thamer · Accepted Answer · 2018-05-03 11:30:22Z

I think u need to change the name property of chartjs.

in ur example above u have the same name for the 2 chartjs.

so, just change the name property :

and the first chart gives her the name: lineChartTestOne

 $chartjs = app()->chartjs
        ->name('lineChartTestOne')
        ->type('line')
        ->size(['width' => 400, 'height' => 200])
        ->labels($date)
        ->datasets([
            [
                "label" => "Gesammelte Coins",
                'backgroundColor' => "rgba(38, 185, 154, 0.31)",
                'borderColor' => "rgba(38, 185, 154, 0.7)",
                "pointBorderColor" => "rgba(38, 185, 154, 0.7)",
                "pointBackgroundColor" => "rgba(38, 185, 154, 0.7)",
                "pointHoverBackgroundColor" => "#fff",
                "pointHoverBorderColor" => "rgba(220,220,220,1)",
                'data' => $coins,
            ]
        ])
        ->options([]);

and the second chart gives her the name: lineChartTestTow

$chartjs2 = app()->chartjs
        ->name('lineChartTestTow')
        ->type('line')
        ->size(['width' => 400, 'height' => 200])
        ->labels($date)
        ->datasets([
            [
                "label" => "Gesammelte Coins",
                'backgroundColor' => "rgba(38, 185, 154, 0.31)",
                'borderColor' => "rgba(38, 185, 154, 0.7)",
                "pointBorderColor" => "rgba(38, 185, 154, 0.7)",
                "pointBackgroundColor" => "rgba(38, 185, 154, 0.7)",
                "pointHoverBackgroundColor" => "#fff",
                "pointHoverBorderColor" => "rgba(220,220,220,1)",
                'data' => $coins,
            ]
        ])
        ->options([]);

Collectives™ on Stack Overflow

Laravel 5 Chart Js rendering multiple charts in blade template error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related