Chart Last updated: 2023-09-15
The chart object in my service supports various chart types based on the Chartjs library. You can choose from the following chart types:
Doughnut: A doughnut chart displays data in a circular format, showing the contribution of each category to the whole.
Line: A line chart represents data points connected by lines, illustrating trends or changes over time.
Bar: A bar chart displays data as rectangular bars, allowing for easy comparison between different categories or groups.
PolarArea: A polar area chart represents data in a circular format, with each data point displayed as a segment of the circle.
Radar: A radar chart displays data on multiple axes, showing the relative values of different categories in a spider-web-like pattern.
Scatter: A scatter chart represents individual data points as dots on a graph, showcasing the relationship between two variables.
Bubble: A bubble chart displays data points as bubbles, where the size of each bubble represents a third variable in addition to the x and y coordinates.
Mixed: A mixed chart allows for the combination of different chart types within a single chart, enabling the presentation of multiple data sets or different visualizations in one graph.
These chart types provide versatile options for visualizing data in different formats, enabling you to choose the most suitable representation for your data analysis and presentation needs.
Examples :
and more …
An object can be created using the command
php artisan dash:chart Users
# [app/Dash/Metrics/Charts/Users.php]
# Users Chart generated
# or write --module flag to Create in specific module
php artisan dash:chart Users --module=Users
output:
<?php
namespace App\Dash\Charts;
use Dash\Extras\Metrics\Chart;
class Users extends Chart{
/**
* @method options
* setup your settings in Chart
* @return array
*/
public function options():array{
return [
'column'=>'6',
'elem'=>'YourElementAttributeIDWithoutHash'// do not add hash # just clearname
];
}
/**
* calculate method is short to calc to set dataset in chart
* You Can Set Type Using | doughnut , line , bar ,polarArea , radar, scatter, bubble , mixed
* this chart based on ChartJs visit https://www.chartjs.org/docs/latest
* to get your main setting to set your chart
* for more information about this visit https://phpdash.com/docs/1.x/Metrics/Chart
* @return $this->data method
*
*/
public function calc(){
return $this->data([
'type'=>'bar',
'data'=>[
'labels'=> [/*write some labels */],
'datasets'=>[
[
'label'=>'total groups',
'data'=>[
/* write some values using ORM OR QueryBuilder */
],
]
]
],
/*
you can add more options here after data
*/
]);
}
}
you can add title and icon in options method
public function options():array{
return [
'column'=>'6',
'elem'=>'YourElementAttributeIDWithoutHash'// do not add hash # just clearname,
'title'=>'your chart name',
'icon'=>'font awesom icon here with i tag',
'subTitle'=>'your Subtitle ',
];
}
// or in calcMethod
public function calc(){
return $this->data([
// ...
])
->column(6)
->href(dash('Your Link'),'_blank') // blank or parent or remove this prarm default is parent
->icon('<i class="fa fa-users"></i>')
->title('Your Title')
->subTitle('SubTitle');
}
How to Use ?
You Can Use In Vertex In Resource or Dashboard Class with →render() method like this :-
<?php
namespace App\Dash\Dashboard;
use App\Dash\Metrics\Charts\Users;
use Dash\Resource;
class Help extends Resource {
/**
* add your card here by Card , HTML Class
* or by view instnance render blade file
* @return array
*/
public static function cards() {
return [
(new Users)->render(),
];
}
}