Simple package to facilitate and automate the use of charts in Laravel 5.x using Chartjs v2 library
I've been working with software development for 12 years, graduated in Information Systems and currently I'm CTO and partner at Sotero Tech, where I work as leader of development teams and software architect.
I am passionate about code, quality and software architecture with experience in different market segments. Solving the world's problems and challenges through technology is one of my missions.
In chart-pie-doughnut.blade.php (but also in others) there's a stement which generates a legend for a pie chart:
document.getElementById('js-legend-pie').innerHTML = PizzaChart.generateLegend();There are a couple of problems with this code:
To prevent javascript errors, it would be a solution to check if the element exists:
var legend = document.getElementById('js-legend-pie');
if (legend) {
document.getElementById('js-legend-pie').innerHTML = PizzaChart.generateLegend();
}It's no problem to fix this and create a pull request, but I wanted to discuss this with you first.
Hi costa, i have error when try using sample data
`
<?php
$data = array(
'Jan' => array(33),
'Feb' => array(32),
'Mar' => array(12)
);
?>
{!! app()->chartbar->render("BarChart", $data) !!}`
I'm using laravel 5.1.* , php 7 , and chartjs 1.0.2 , and already using the provider like your suggestion in readme .
HI !
Unfortunately im trying to run $chartjs->render() passing the variables via the controller but only creates the canvas but not the content.
Is created
BUT
->labels
->datasets
->options
Are not being render
I added <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js" ></script>
To my scripts.blade.php but cant manage to make it work.
Please help
I don't know what is the main issue. I have already install laravel-chartjs extension to my laravel . And I attempted to copy the sample code in README to run in my laravel application. This is my code:
When I ran that code, it didn't work. It shows the below error.
I would like to know the exact issue and any possible solutions. Thanks.
realy appreciate to develop this awesome plugins! nice work!.
i would like to ask is that possible using Laravel-Chartjs plugins to get Combined Bar and line charts?
http://plnkr.co/edit/TvY5tz?p=preview
if posible let share the axample
thanks
How can i use toBase64Image on the chart?
Is it possible to change the default view with an attribute to the function?
view/chart-template.blade.php
To
resources/views/custom-chart-template.blade.php
Hi can you please replace
Fx3costa\LaravelchartJs\Providers\ChartjsServiceProvider::class,
with
Fx3costa\LaravelChartJs\Providers\ChartjsServiceProvider::class,
"Call to undefined method Fx3costa\LaravelChartJs\Builder::size()"
There's no size method in the latest tagged release, only in the master branch.
Here's my JS from inspection code:
<script> document.addEventListener("DOMContentLoaded", function(event) { (function() { "use strict"; let ctx = document.getElementById("pneJMhCKKPK"); window.pneJMhCKKPK = new Chart(ctx, { type: 'doughnut', data: { labels: ["Reminder for Monthly Bill (Recurrent Bill)","Password Reset","Device Offline","Car Showing Wrong Location","Invoice Request","Payment Sent","Payment Process Request","Connection Open after Bill Payment","Sales ","Cannot login to App","Not getting App Notifications","Wants to upgrade Device Type","Call Not Receiving from Device","Cannot See Playback ","Device De Install and Re Install","Connection Close for No Payment","Platform Expiry Date cannot be set","Cannot see car from App\/Web","Did not get Expiry SMS and Email","Expiry Date Update","Device off line","Not Getting Geofence Alerts","Car Engine not starting","Not Getting Over-speed Alerts","Wants to discontinue our Service"], datasets: [{"backgroundColor":["#8b520f","#8b5266","#8b52b7","#8b5306","#8b5355","#8b53a3","#8b53f2","#8b5455","#8b54b9","#8b5501","#8b553e","#8b5581","#8b55c1","#8b55ff","#8b563c","#8b567b","#8b56b9","#8b56f7","#8b5735","#8b5783","#8b57c9","#8b5812","#8b585a","#8b58a2","#8b58ea"],"hoverBackgroundColor":["#8b520f","#8b5266","#8b52b7","#8b5306","#8b5355","#8b53a3","#8b53f2","#8b5455","#8b54b9","#8b5501","#8b553e","#8b5581","#8b55c1","#8b55ff","#8b563c","#8b567b","#8b56b9","#8b56f7","#8b5735","#8b5783","#8b57c9","#8b5812","#8b585a","#8b58a2","#8b58ea"],"data":[43,25,24,9,7,7,7,6,5,5,4,3,3,2,2,2,2,2,2,1,1,1,1,1,1]}] }, options: {"legend":{"display":true,"labels":{"fontColor":"#000"}}} }); })(); }); </script>
I think it will be a trivial change to allow this package to be allowed to use with Laravel 5.6.*.
Is there anyone working on making this happen?
Hi, I'm encountering this error, I'm using Laravel 5.3, I did not modify the code but the error persists, can you help me?
<?php
namespace App\Http\Controllers\Admin;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
class DashboardController extends Controller
{
public function index()
{
$graficos['vendas'] = app()->chartjs
->name('lineChartTest')
->type('line')
->size(['width' => 400, 'height' => 200])
->labels(['January', 'February', 'March', 'April', 'May', 'June', 'July'])
->datasets([
[
"label" => "My First dataset",
'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' => [65, 59, 80, 81, 56, 55, 40],
],
[
"label" => "My Second dataset",
'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' => [12, 33, 44, 44, 55, 23, 40],
]
])
->options([]);
$graficos['financas'] = app()->chartjs
->name('pieChartTest')
->type('pie')
->size(['width' => 400, 'height' => 200])
->labels(['Label x', 'Label y'])
->datasets([
[
'backgroundColor' => ['#FF6384', '#36A2EB'],
'hoverBackgroundColor' => ['#FF6384', '#36A2EB'],
'data' => [69, 59]
]
])
->options([]);
$pagina['titulo_pagina'] = "Dashboard";
return view('admin/dashboard/dashboard', compact('graficos', 'pagina'));
}
}
I am trying to create a laravel analytics applications, but after doing all that i was told in the documentation refer to: https://github.com/fxcosta/laravel-chartjs/blob/master/README.md
I am getting the the following error: ReflectionException in Container.php line 749:
Class chartsjs does not exist
How do i solve this?
Please help!
Route::get('/', function () {
//return view('welcome');
$chartjs = app()->chartjs
->name('lineChartTest')
->type('line')
->labels(['January', 'February', 'March', 'April', 'May', 'June', 'July'])
->datasets([
[
"label" => "My First dataset",
'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' => [65, 59, 80, 81, 56, 55, 40],
],
[
"label" => "My Second dataset",
'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' => [12, 33, 44, 44, 55, 23, 40],
]
])
->options([]);
return view('example', compact('chartjs'));
});
I'm using Chartjs 2.4.0 and missing some chart types
'horizontalBar',
'bubble',
'scatter',
Hi, Is the package integrated with Laravel 5.3?
In current impl, number of datasets in any chart is limited to just 3. This seems is due to the colours[] array defined in config/chart.js.
I have workedaround this issue by generating the colors for each dataset at run time. Thought this could be useful to other users of laravel-chartjs. Feel free to use the code below.
Note: I have not done extensive testing but it seems to work for me.
/resources/ChartBar.php (within method 'render')
for($i = 0; $i < $datasetQnt; $i++) {
// Pick a colour for a dataset at run time.
$spread = 25;
$r = rand(0+$spread,255-$spread);
$g = rand(0+$spread,255-$spread);
$b = rand(0+$spread,255-$spread);
$color = "rgba($r, $g, $b, .7)";
$dataset[$i] = array_column($data, $i);
$dataset[$i] = implode(", ", $dataset[$i]);
$colours[$i] = $color; //$this->colours[$i];
}
I am trying to figure out how to write optionas parameters and values properly. For example how can I write this option for chartjs using the options provided by laravel-chartjs?
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
Hi!
Please, add appending of the Chart.js script to the bottom of document with a separate section of instance definition. If i try to create instance and Chart.js is includet at bottom of page, i will get an error.
Hi i am getting this error
FatalErrorException in Builder.php line 51:
syntax error, unexpected ':', expecting ';' or '{'
in Builder.php line 51
and this is my code
public function index()
{
$activities = $this->activities->userActivityForPeriod(
auth()->user()->id,
Carbon::now()->subWeeks(2),
Carbon::now()
)->toArray();
$chartjs = app()->chartjs
->name('lineChartTest')
->type('line')
->element('lineChartTest')
->labels(json_encode(array_keys($activities)))
->datasets([
[
"label" => "Activity (last 30 days)",
'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' => json_encode(array_values($activities)),
],
])
->options([]);
return view('frontend.user.dashboard', compact('chartjs'));
}What im a doing wrong ?
bar and line
Tool tip for Line Chart does not display the color for individual dataset. They always appear to be white though the chart is rendered in proper colors. This is not an issue with Bar and Radar charts.
Sample code:
<div class="container-fluid">
<canvas id="BarChart" style="width:50%;"></canvas>
</div>
<?php
$data = array(
'Jan' => array(33.4, 59, 100),
'Feb' => array(32.8, 45, 150),
'Mar' => array(12, 38.3, 125)
);
?>
{!! app()->chartline->render("BarChart", $data) !!}
How to remove legend?
Hi
I'm using PHP 5.6.29-0 and tried the php56 branch.
FatalErrorException in Builder.php line 118:
Can be easy fixed by removing : self
Hello, Please can you give me some examples of how to work with options??
believe me, I spend hours trying to making work, this is the code that I'm working with
options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } }
I find the way if someone needs ;)
->options( [ 'scales'=>[ 'yAxes'=>[[ 'ticks'=>[ 'beginAtZero' => true ], ]], ], ] );
Could you please provide an English translation in the documentation. Thanks 👍
Hi.
I need to create pdf document with charts, but when i create de document the chart is no render. I use snappy pdf to make the pdf, so it's something to convert the chart to img and use it for the document?
Your composer config leaves out 5.2 is that due to compatability problems are just an oversight / supprised by the release?
Hello friends
I want to draw two chart in one page with this package but just one of them worked
my code is :
<?php
$data = array(
'ta1' => array($modAttendance),
'ta2' => array($modGrade),
);
?>
{!! app()->chartbar->render("BarChart", $data) !!}
<?php
$data = array(
't1' => array(20,27),
't2' => array(25, 100),
);
?>
{!! app()->chartline->render("LineChart", $data) !!}
Hey man, I got this working other than a syntax error.
"
~/fx3costa/laravelchartjs/src/Builder.php line 51:
syntax error, unexpected ':', expecting ';' or '{'
"
I am not sure if others are having this issue. What are your thoughts? The code looks clean to me first time run through. Maybe the issue is on my side. Line 51 is in the name($name) function.
private $types = [
'bar',
'doughnut',
'line',
'pie',
'polarArea',
'radar'
];
public function name($name): self
{
$this->name = $name;
$this->charts[$name] = $this->defaults;
return $this;
}
For maximum browser compatibility, I think we should use var instead.
Hi, when i'm trying out the following Code i get that error
<div class="container-fluid">
<canvas id="BarChart" style="width:50%;"></canvas>
</div>
<?php
$data = array(
'Jan' => array(33),
'Feb' => array(32),
'Mar' => array(12)
);
?>
{!! app()->chartbar->render("BarChart", $data) !!}
Error
FatalErrorException in 8be385e208e531fc8df24170541811c5 line 0:
Method Illuminate\View\View::__toString() must not throw an exception
The strange thing is that a few days ago everything worked
What could cause this error?
edit:
I downgraded to version 1.3.2 and everything worked fine
Hey there, im trying to set ShowTooltips to false like this:
{!! app()->chartpiedoughnut->render("PieChart", $data, ['showTooltips'=>'false'])!!}
But it doesn´t works.
Can u help me?
As per ChartJS doumentation, generating chart legend is as simple as invoking 'generateLegend()' method but how to get this implemented in laravel-chartjs is not documented. This is a important information especially when there are multiple datasets in a single chart.
Line chart works well.
But bar chart and piechart doesn't work.
I inputted code as your example code. But nothing appeared.
I got this error...
Chart.min.js:11 Uncaught TypeError: Cannot read property 'length' of null
at n (Chart.min.js:11)
at new t.Controller (Chart.min.js:11)
at new t (Chart.min.js:12)
at dashboard:84
at dashboard:91
n @ Chart.min.js:11
t.Controller @ Chart.min.js:11
t @ Chart.min.js:12
(anonymous) @ dashboard:84
(anonymous) @ dashboard:91
Please help me
really appreciate for nice plugin.
let me know, how to create a stacked bar chart, I was tried to configure options with optionraw but doesn't work.
thanks
As picture below, we use 2 div to render my chart but there's a problem only the first
PS. I'm not good at english if I spell anything wrong my apologies.
When I try to render multiple charts on tabs in bootstrap using your package it only displays one chart (on the starting active tab) but does not display on other tabs. Thanks.
ul class="nav nav-tabs">
li class="active">a data-toggle="tab" href="#home">Home
li>a data-toggle="tab" href="#menu1">Menu 1
li>a data-toggle="tab" href="#menu2">Menu 2
/ul>
div class="tab-content">
div id="home" class="body tab-pane fade in active" style="width: 95%;">
{!! $chartjs->render() !!}
{{--
How I can define data like money simbol & format ?
add in laravel
composer.json - add composer require fx3costa/laravelchartjs - composer update-?
Hi,
It's not really an issue with the package, it's rather with my insufficient skills.
Can somebody give me an example of rendering data from SQL results into chartjs array in the controller?
I cannot figure out how to put these 2 pieces together.
Thank you in advance
i tried this
$options['scales']['yAxes']['scaleLabel']['display']=true;
$options['scales']['yAxes']['scaleLabel']['labelString']="Data";
$chartjs = app()->chartjs
->name('pieChartUser')
->type('pie')
->size(['width' => 400, 'height' => 200])
->options($options);
When having more than 1 chart displayed in a view/page, X-Axis labels of last chart drawn overwrites the labels of all previous charts. Although data is correct.
Source code of the page displayed is as below:
<!-- Main content -->
<section class="content">
<!-- Your Page Content Here -->
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-x">
<div class="panel-heading">Dummy1</div>
<div class="panel-body">
<script src="/js/moment.js"></script>
<script src="/js/Chart.min.js"></script>
<div class="container-fluid">
<canvas id="BarChart1" width="100px" height="100px"></canvas>
</div>
<script>
/**
* This script is to allow for more than one window.onload in our page,
* in case we need to use more than one chart per page
*/
/**
* The addLoadEvent function.
* @author Willison, Simon (http://simonwillison.net/)
*/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
</script>
<!--suppress BadExpressionStatementJS -->
<script type="text/javascript">
var label = []; // graphic label array
var infor = []; // graphic data array
// incremeting labels array
label.push("Jan");
label.push("Apr");
/**
* This function is responsible for loading the window.load and instantiate our chart.
* The parameters of data and options are passed directly to avoid conflict with the
* variable names when using more than one report.
*/
addLoadEvent(function() {
var BarChart1 = document.getElementById("BarChart1").getContext("2d");
window.myBar = new Chart(BarChart1).Bar(
// ---------------------------------------------------------------
// Data sections
// ---------------------------------------------------------------
{
labels: label,
datasets:
[
{
label: "Dados primários",
fillColor: "rgba(212, 141, 63, .7)",
strokeColor: "rgba(212, 141, 63, .7)",
highlightFill: "rgba(212, 141, 63, .7)",
highlightStroke: "rgba(212, 141, 63, .7)",
data : [333.4, 50]
}, {
label: "Dados primários",
fillColor: "rgba(181, 90, 164, .7)",
strokeColor: "rgba(181, 90, 164, .7)",
highlightFill: "rgba(181, 90, 164, .7)",
highlightStroke: "rgba(181, 90, 164, .7)",
data : [87, 60]
}, {
label: "Dados primários",
fillColor: "rgba(35, 102, 154, .7)",
strokeColor: "rgba(35, 102, 154, .7)",
highlightFill: "rgba(35, 102, 154, .7)",
highlightStroke: "rgba(35, 102, 154, .7)",
data : [100, 70]
}, {
label: "Dados primários",
fillColor: "rgba(86, 160, 59, .7)",
strokeColor: "rgba(86, 160, 59, .7)",
highlightFill: "rgba(86, 160, 59, .7)",
highlightStroke: "rgba(86, 160, 59, .7)",
data : [45, 35]
} ]
},
// End data section
// ---------------------------------------------------------------
// Options section
// ---------------------------------------------------------------
{
responsive:true
});
// End options section
});
</script>
</div>
</div>
<!-- ========================================================= -->
<div class="col-md-4 col-md-offset-x">
<div class="panel-heading">Dummy2</div>
<div class="panel-body">
<script src="/js/moment.js"></script>
<script src="/js/Chart.min.js"></script>
<div class="container-fluid">
<canvas id="BarChart2" width="100px" height="100px"></canvas>
</div>
<script>
/**
* This script is to allow for more than one window.onload in our page,
* in case we need to use more than one chart per page
*/
/**
* The addLoadEvent function.
* @author Willison, Simon (http://simonwillison.net/)
*/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
</script>
<!--suppress BadExpressionStatementJS -->
<script type="text/javascript">
var label = []; // graphic label array
var infor = []; // graphic data array
// incremeting labels array
label.push("Orange");
label.push("Apple");
label.push("Banana");
/**
* This function is responsible for loading the window.load and instantiate our chart.
* The parameters of data and options are passed directly to avoid conflict with the
* variable names when using more than one report.
*/
addLoadEvent(function() {
var BarChart2 = document.getElementById("BarChart2").getContext("2d");
window.myBar = new Chart(BarChart2).Bar(
// ---------------------------------------------------------------
// Data sections
// ---------------------------------------------------------------
{
labels: label,
datasets:
[
{
label: "Dados primários",
fillColor: "rgba(214, 158, 100, .7)",
strokeColor: "rgba(214, 158, 100, .7)",
highlightFill: "rgba(214, 158, 100, .7)",
highlightStroke: "rgba(214, 158, 100, .7)",
data : [23.4, 32.8, 20]
}, {
label: "Dados primários",
fillColor: "rgba(28, 216, 135, .7)",
strokeColor: "rgba(28, 216, 135, .7)",
highlightFill: "rgba(28, 216, 135, .7)",
highlightStroke: "rgba(28, 216, 135, .7)",
data : [47, 45, 23]
}]
},
// End data section
// ---------------------------------------------------------------
// Options section
// ---------------------------------------------------------------
{
responsive:true
});
// End options section
});
</script>
</div>
</div>
</div>
Current Issues:
Forgive me, I am a newb here. How should the controller be set up? Just copy and paste one of the examples from the ExampleController.php examples in the ReadMe? Also, what is meant by "Finnaly, for now, you must install and add to your layouts / templates the Chartjs library that can be easily found for download at: http://www.chartjs.org. This setting will also be improved."? Does that just mean installing chart.js (npm install chart.js --save)? When I follow the instructions I get the error that the variable chargejs is unknown in the view. So do I need to put something in routes? Sorry for being a newb.
Hi guys
I update the package from 2.1.0 to 2.2.1 and it dosen't work again.
so I back to 2.1.0 version
my project works in L5.3
# when i try to print my page that contain a chart the page come without any chart
please help me
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.