PHP code example of maartenpaauw / laravel-charts-css
1. Go to this page and download the library: Download maartenpaauw/laravel-charts-css library. Choose the download type require.
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
maartenpaauw / laravel-charts-css example snippets
namespace App\View\Components;
use Maartenpaauw\Chartscss\Chart;
use Maartenpaauw\Chartscss\Data\Axes\Axes;
use Maartenpaauw\Chartscss\Data\Datasets\Dataset;
use Maartenpaauw\Chartscss\Data\Datasets\Datasets;
use Maartenpaauw\Chartscss\Data\Datasets\DatasetsContract;
use Maartenpaauw\Chartscss\Data\Entries\Entry;
use Maartenpaauw\Chartscss\Data\Entries\Value\Value;
use Maartenpaauw\Chartscss\Data\Label\Label;
class MedalsChart extends Chart
{
protected function id(): string
{
return 'medals-chart';
}
protected function heading(): string
{
return __('Medals Chart');
}
protected function datasets(): DatasetsContract
{
return new Datasets(
new Axes('Country', ['Gold', 'Silver', 'Bronze']),
new Dataset([
new Entry(new Value(46)),
new Entry(new Value(37)),
new Entry(new Value(38)),
], new Label('USA')),
new Dataset([
new Entry(new Value(27)),
new Entry(new Value(23)),
new Entry(new Value(17)),
], new Label('GBR')),
new Dataset([
new Entry(new Value(26)),
new Entry(new Value(18)),
new Entry(new Value(26)),
], new Label('CHN')),
);
}
}
use Maartenpaauw\Chartscss\Data\Axes\Axes;
use Maartenpaauw\Chartscss\Data\Datasets\Dataset;
use Maartenpaauw\Chartscss\Data\Datasets\Datasets;
use Maartenpaauw\Chartscss\Data\Datasets\DatasetsContract;
use Maartenpaauw\Chartscss\Data\Entries\Entry;
use Maartenpaauw\Chartscss\Data\Entries\Tooltip\Tooltip;
use Maartenpaauw\Chartscss\Data\Entries\Value\Value;
use Maartenpaauw\Chartscss\Data\Label\Label;
// ...
protected function datasets(): DatasetsContract
{
return new Datasets(
new Axes('Type', 'Amount'),
new Dataset([
new Entry(
new Value(46),
new Label('Gold'),
new Tooltip('46 gold medals!'), // <--
),
new Entry(
new Value(37),
new Label('Silver'),
new Tooltip('37 silver medals!'), // <--
),
new Entry(
new Value(38),
new Label('Bronze'),
new Tooltip('38 bronze medals!'), // <--
),
]),
);
}
use Maartenpaauw\Chartscss\Data\Axes\Axes;
use Maartenpaauw\Chartscss\Data\Datasets\Dataset;
use Maartenpaauw\Chartscss\Data\Datasets\Datasets;
use Maartenpaauw\Chartscss\Data\Datasets\DatasetsContract;
use Maartenpaauw\Chartscss\Data\Entries\Entry;
use Maartenpaauw\Chartscss\Data\Entries\Value\Value;
use Maartenpaauw\Chartscss\Data\Label\Label;
// ...
protected function datasets(): DatasetsContract
{
return new Datasets(
new Axes('Type', 'Amount'),
new Dataset([
new Entry(new Value(46), new Label('Gold')),
new Entry(new Value(37), new Label('Silver')),
new Entry(new Value(38), new Label('Bronze')),
]),
);
}
use Maartenpaauw\Chartscss\Data\Axes\Axes;
use Maartenpaauw\Chartscss\Data\Datasets\Dataset;
use Maartenpaauw\Chartscss\Data\Datasets\Datasets;
use Maartenpaauw\Chartscss\Data\Datasets\DatasetsContract;
use Maartenpaauw\Chartscss\Data\Entries\Entry;
use Maartenpaauw\Chartscss\Data\Entries\Value\Value;
use Maartenpaauw\Chartscss\Data\Label\Label;
// ...
protected function datasets(): DatasetsContract
{
return new Datasets(
new Axes('Type', 'Amount'),
new Dataset([
(new Entry(new Value(46), new Label('Gold')))
->hideLabel(), // <--
new Entry(new Value(37), new Label('Silver')),
new Entry(new Value(38), new Label('Bronze')),
]),
);
}
use Maartenpaauw\Chartscss\Data\Axes\Axes;
use Maartenpaauw\Chartscss\Data\Datasets\Dataset;
use Maartenpaauw\Chartscss\Data\Datasets\Datasets;
use Maartenpaauw\Chartscss\Data\Datasets\DatasetsContract;
use Maartenpaauw\Chartscss\Data\Entries\Entry;
use Maartenpaauw\Chartscss\Data\Entries\Value\Value;
use Maartenpaauw\Chartscss\Data\Label\Label;
// ...
protected function datasets(): DatasetsContract
{
return new Datasets(
new Axes('Type', 'Amount'),
new Dataset([
(new Entry(new Value(46), new Label('Gold')))
->alignLabel('end'), // <--
new Entry(new Value(37), new Label('Silver')),
new Entry(new Value(38), new Label('Bronze')),
]),
);
}
use Maartenpaauw\Chartscss\Data\Axes\Axes;
use Maartenpaauw\Chartscss\Data\Datasets\Dataset;
use Maartenpaauw\Chartscss\Data\Datasets\Datasets;
use Maartenpaauw\Chartscss\Data\Datasets\DatasetsContract;
use Maartenpaauw\Chartscss\Data\Entries\Entry;
use Maartenpaauw\Chartscss\Data\Entries\Value\Value;
use Maartenpaauw\Chartscss\Data\Label\Label;
// ...
protected function datasets(): DatasetsContract
{
return new Datasets(
new Axes('Country', ['Gold', 'Silver', 'Bronze']),
(new Dataset([
new Entry(new Value(46)),
new Entry(new Value(37)),
new Entry(new Value(38)),
], new Label('USA')))
->hideLabel(), // <--
new Dataset([
new Entry(new Value(27)),
new Entry(new Value(23)),
new Entry(new Value(17)),
], new Label('GBR')),
);
}
use Maartenpaauw\Chartscss\Data\Axes\Axes;
use Maartenpaauw\Chartscss\Data\Datasets\Dataset;
use Maartenpaauw\Chartscss\Data\Datasets\Datasets;
use Maartenpaauw\Chartscss\Data\Datasets\DatasetsContract;
use Maartenpaauw\Chartscss\Data\Entries\Entry;
use Maartenpaauw\Chartscss\Data\Entries\Value\Value;
use Maartenpaauw\Chartscss\Data\Label\Label;
// ...
protected function datasets(): DatasetsContract
{
return new Datasets(
new Axes('Country', ['Gold', 'Silver', 'Bronze']),
(new Dataset([
new Entry(new Value(46)),
new Entry(new Value(37)),
new Entry(new Value(38)),
], new Label('USA')))
->alignLabel('end'), // <--
new Dataset([
new Entry(new Value(27)),
new Entry(new Value(23)),
new Entry(new Value(17)),
], new Label('GBR')),
);
}
use Maartenpaauw\Chartscss\Data\Axes\Axes;
use Maartenpaauw\Chartscss\Data\Datasets\Dataset;
use Maartenpaauw\Chartscss\Data\Datasets\Datasets;
use Maartenpaauw\Chartscss\Data\Datasets\DatasetsContract;
use Maartenpaauw\Chartscss\Data\Datasets\PercentageStackedDatasets;
use Maartenpaauw\Chartscss\Data\Entries\Entry;
use Maartenpaauw\Chartscss\Data\Entries\Value\Value;
use Maartenpaauw\Chartscss\Data\Label\Label;
// ...
protected function datasets(): DatasetsContract
{
return new PercentageStackedDatasets(
new Datasets(
new Axes('Country', ['Gold', 'Silver', 'Bronze']),
new Dataset([
new Entry(new Value(46)),
new Entry(new Value(37)),
new Entry(new Value(38)),
], new Label('USA')),
new Dataset([
new Entry(new Value(27)),
new Entry(new Value(23)),
new Entry(new Value(17)),
], new Label('GBR')),
),
);
}
use Maartenpaauw\Chartscss\AreaChart;
class MyChart extends AreaChart
{
// ...
}
use Maartenpaauw\Chartscss\Data\Axes\Axes;
use Maartenpaauw\Chartscss\Data\Datasets\Dataset;
use Maartenpaauw\Chartscss\Data\Datasets\Datasets;
use Maartenpaauw\Chartscss\Data\Datasets\DatasetsContract;
use Maartenpaauw\Chartscss\Data\Entries\Entry;
use Maartenpaauw\Chartscss\Data\Entries\Value\Value;
use Maartenpaauw\Chartscss\Data\Label\Label;
// ...
protected function datasets(): DatasetsContract
{
return new Datasets(
new Axes('Type', 'Amount'),
new Dataset([
(new Entry(new Value(46), new Label('Gold')))
->start(10),
new Entry(new Value(37), new Label('Silver')),
new Entry(new Value(38), new Label('Bronze')),
]),
);
}
use Maartenpaauw\Chartscss\Legend\Legend;
// ...
protected function legend(): Legend
{
return parent::legend()
->withLabel('Gold')
->withLabels(['Silver', 'Bronze'])
->inline()
->ordered()
->squares();
}
use Maartenpaauw\Chartscss\Appearance\Colorscheme\Color;
use Maartenpaauw\Chartscss\Appearance\Colorscheme\ColorschemeContract;
// ...
protected function colorscheme(): ColorschemeContract
{
return parent::colorscheme()
->add(new Color('#FF0000'))
->add(new Color('#00FF00'))
->add(new Color('#0000FF'));
}
use Maartenpaauw\Chartscss\Appearance\Colorscheme\Color;
use Maartenpaauw\Chartscss\Appearance\Colorscheme\ColorschemeContract;
// ...
protected function colorscheme(): ColorschemeContract
{
return new Colorscheme([
new Color('#FF0000'),
new Color('#00FF00'),
new Color('#0000FF'),
]);
}
use Maartenpaauw\Chartscss\Appearance\Colorscheme\Color;
use Maartenpaauw\Chartscss\Data\Axes\Axes;
use Maartenpaauw\Chartscss\Data\Datasets\Dataset;
use Maartenpaauw\Chartscss\Data\Datasets\Datasets;
use Maartenpaauw\Chartscss\Data\Datasets\DatasetsContract;
use Maartenpaauw\Chartscss\Data\Entries\Entry;
use Maartenpaauw\Chartscss\Data\Entries\Value\Value;
use Maartenpaauw\Chartscss\Data\Label\Label;
// ...
protected function datasets(): DatasetsContract
{
return new Datasets(
new Axes('Type', 'Amount'),
new Dataset([
(new Entry(new Value(46), new Label('Gold')))
->color(new Color('#FFD700')), // <--
new Entry(new Value(37), new Label('Silver')),
new Entry(new Value(38), new Label('Bronze')),
]),
);
}
use Maartenpaauw\Chartscss\Appearance\DatasetsSpacing;
use Maartenpaauw\Chartscss\Appearance\DataSpacing;
use Maartenpaauw\Chartscss\Appearance\Modifications;
// ...
protected function modifications(): Modifications
{
return parent::modifications()
->add(new DataSpacing(10))
->add(new DatasetsSpacing(20));
}
use Maartenpaauw\Chartscss\Appearance\HideData;
use Maartenpaauw\Chartscss\Appearance\Modifications;
// ...
protected function modifications(): Modifications
{
return parent::modifications()
->add(new HideData());
}
use Maartenpaauw\Chartscss\Appearance\Modifications;
use Maartenpaauw\Chartscss\Appearance\ShowDataOnHover;
// ...
protected function modifications(): Modifications
{
return parent::modifications()
->add(new ShowDataOnHover());
}
use Maartenpaauw\Chartscss\Appearance\LabelsAlignCenter;
use Maartenpaauw\Chartscss\Appearance\LabelsAlignEnd;
use Maartenpaauw\Chartscss\Appearance\LabelsAlignStart;
use Maartenpaauw\Chartscss\Appearance\Modifications;
// ...
protected function modifications(): Modifications
{
return parent::modifications()
->add(new LabelsAlignStart())
->add(new LabelsAlignCenter())
->add(new LabelsAlignEnd());
}
use Maartenpaauw\Chartscss\Appearance\Modifications;
use Maartenpaauw\Chartscss\Appearance\Multiple;
// ...
protected function modifications(): Modifications
{
return parent::modifications()
->add(new Multiple());
}
use Maartenpaauw\Chartscss\Appearance\Modifications;
use Maartenpaauw\Chartscss\Appearance\ReverseData;
use Maartenpaauw\Chartscss\Appearance\ReverseDatasets;
use Maartenpaauw\Chartscss\Appearance\ReverseOrientation;
// ...
protected function modifications(): Modifications
{
return parent::modifications()
->add(new ReverseData())
->add(new ReverseDatasets())
->add(new ReverseOrientation());
}
use Maartenpaauw\Chartscss\Appearance\Modifications;
use Maartenpaauw\Chartscss\Appearance\ShowDataAxes;
use Maartenpaauw\Chartscss\Appearance\ShowPrimaryAxis;
use Maartenpaauw\Chartscss\Appearance\ShowSecondaryAxes;
// ...
protected function modifications(): Modifications
{
return parent::modifications()
->add(new ShowDataAxes())
->add(new ShowPrimaryAxis())
->add(new ShowSecondaryAxes());
}
use Maartenpaauw\Chartscss\Appearance\Modifications;
use Maartenpaauw\Chartscss\Appearance\ShowHeading;
// ...
protected function modifications(): Modifications
{
return parent::modifications()
->add(new ShowHeading());
}
use Maartenpaauw\Chartscss\Appearance\Modifications;
use Maartenpaauw\Chartscss\Appearance\ShowLabels;
// ...
protected function modifications(): Modifications
{
return parent::modifications()
->add(new ShowLabels());
}
use Maartenpaauw\Chartscss\Appearance\Modifications;
use Maartenpaauw\Chartscss\Appearance\Stacked;
// ...
protected function modifications(): Modifications
{
return parent::modifications()
->add(new Stacked());
}
use Maartenpaauw\Chartscss\Appearance\CustomModification;
use Maartenpaauw\Chartscss\Appearance\Modifications;
// ...
protected function modifications(): Modifications
{
return parent::modifications()
->add(new CustomModification('foo'));
}
use Maartenpaauw\Chartscss\Configuration\Configuration;
use Maartenpaauw\Chartscss\Configuration\ConfigurationContract;
// ...
protected function configuration(): ConfigurationContract
{
return new Configuration(
$this->identity(),
$this->legend(),
$this->modifications(),
$this->colorscheme(),
);
}
// ...
protected function tag(): string
{
return 'article';
}
bash
php artisan make:chart MedalsChart
Loading please wait ...
Before you can download the PHP files, the dependencies should be resolved. This can take some minutes. Please be patient.