Charts

Charts is a multi-library chart package to create interactive charts using laravel.

News
Libraries & Types
Installation
Default Settings
Usage
Chart Examples
- Pie
- Donut / Doughnut
- Line
- Area
- Bar
- Geo
- Gauge
- Temperature
- Percentage
- Progressbar
Database Charts
Realtime Charts
Charts Functions
Available Chart Settings
Extend your way

News

October 13, 2016

Realtime charts are in a stable release! You can start using the highcharts realtime charts or the gauges!

October 3, 2016

Charts are now even more responsive, if you want a fixed height and a responsive width, simple set responsive to false, and then set width to 0 and height to the one you like!

September 29, 2016

You can now generate a new chart using the database data without building it manually. See Database Charts section for more information!

Libraries & Types

Charts include the following libraries & types by default:

ChartJS chartjs
- Area Chart area
- Line Chart line
- Bar Chart bar
- Pie Chart pie
- Donut / Doughnut Chart donut
Highcharts highcharts
- Area Chart area Realtime Available
- Line Chart line Realtime Available
- Bar Chart bar Realtime Available
- Pie Chart pie
- Donut / Doughnut Chart donut
- Geo Chart geo
Google Charts google
- Area Chart area
- Line Chart line
- Bar Chart bar
- Pie Chart pie
- Donut / Doughnut Chart donut
- Geo Chart geo
- Gauge Chart gauge Realtime Available
Google Material material
- Line Chart line
- Bar Chart bar
Chartist chartist
- Area Chart area
- Line Chart line
- Bar Chart bar
- Pie Chart pie
- Donut / Doughnut Chart donut
FusionCharts fusioncharts
- Area Chart area
- Line Chart line
- Bar Chart bar
- Pie Chart pie
- Donut / Doughnut Chart donut
Morris JS morris
- Area Chart area
- Line Chart line
- Bar Chart bar
- Donut / Doughnut Chart donut
Plottable JS plottablejs
- Area Chart area
- Line Chart line
- Bar Chart bar
- Pie Chart pie
- Donut / Doughnut Chart donut
Minimalist minimalist
- Area Chart area
- Line Chart line
- Bar Chart bar
- Pie Chart pie
- Donut / Doughnut Chart donut
Canvas Gauges canvas-gauges
- Gauge Chart gauge Realtime Available
- Temperature Chart temp Realtime Available
JustGage justgage
- Gauge Chart gauge Realtime Available
- Percentage Chart percentage Realtime Available
Progressbar JS progressbarjs
- Percentage Chart percentage Realtime Available
- Progressbar Chart progressbar Realtime Available

Installation

Video Tutorial

To install charts use composer

Download

composer require consoletvs/charts

Add service provider & alias

Add the following service provider to the array in: config/app.php

ConsoleTVs\Charts\ChartsServiceProvider::class,

Add the following alias to the array in: config/app.php

'Charts' => ConsoleTVs\Charts\Charts::class,

Publish the assets

php artisan vendor:publish --tag=charts_config
php artisan vendor:publish --tag=charts_assets --force

Default Settings

The file in: config/charts.php contains an array of settings, you can find the default settings in there.

Usage

Example Controller:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use Charts;

class TestController extends Controller
{
    public function index()
    {
		$chart = Charts::new('line', 'highcharts')
			->setTitle('My nice chart')
			->setLabels(['First', 'Second', 'Third'])
			->setValues([5,10,20])
			->setDimensions(1000,500)
			->setResponsive(false);
		return view('test', ['chart' => $chart]);
    }
}

Example View:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>My Charts</title>

		{!! Charts::assets() !!}

    </head>
    <body>
        <center>
			{!! $chart->render() !!}
		</center>
    </body>
</html>

Chart Examples

Pie

Note: highcharts can't change the color of this chart. Well it can but it's complicated, so I leave it here.

Charts::new('pie', 'highcharts')
	->setTitle('My nice chart')
	->setLabels(['First', 'Second', 'Third'])
	->setValues([5,10,20])
	->setDimensions(1000,500)
	->setResponsive(false);

Donut / Doughnut

Note: highcharts and chartist can't change the color of this chart. Well they can but it's complicated, so I leave it here.

Charts::new('donut', 'highcharts')
	->setTitle('My nice chart')
	->setLabels(['First', 'Second', 'Third'])
	->setValues([5,10,20])
	->setDimensions(1000,500)
	->setResponsive(false);

Line

Charts::new('line', 'highcharts')
	->setTitle('My nice chart')
	->setElementLabel('My nice label')
	->setLabels(['First', 'Second', 'Third'])
	->setValues([5,10,20])
	->setDimensions(1000,500)
	->setResponsive(false);

Area

Charts::new('area', 'highcharts')
	->setTitle('My nice chart')
	->setElementLabel('My nice label')
	->setLabels(['First', 'Second', 'Third'])
	->setValues([5,10,20])
	->setDimensions(1000,500)
	->setResponsive(false);

Bar

Note: highcharts can't change the color of this chart. Well it can but it's complicated, so I leave it here.

Charts::new('bar', 'highcharts')
	->setTitle('My nice chart')
	->setElementLabel('My nice label')
	->setLabels(['First', 'Second', 'Third'])
	->setValues([5,10,20])
	->setDimensions(1000,500)
	->setResponsive(false);

Geo

Note: The labels must have the country codes, not the name.

Note 2: To add color to the chart, you'll need to provide an array of at least 2 colors. The first is the min and the second the max.

Charts::new('geo', 'highcharts')
	->setTitle('My nice chart')
	->setElementLabel('My nice label')
	->setLabels(['ES', 'FR', 'RU'])
	->setColors(['#C5CAE9', '#283593'])
	->setValues([5,10,20])
	->setDimensions(1000,500)
	->setResponsive(false);

Gauge

Note: You either need 1 value or 3 following this standar: [actualValue, minValue, maxValue]

Charts::new('gauge', 'canvas-gauges')
	->setTitle('My nice chart')
	->setElementLabel('My nice label')
	->setValues([65,0,100])
	->setResponsive(false)
	->setHeight(300)
	->setWidth(0);

Temperature

Note: You either need 1 value or 3 following this standar: [actualValue, minValue, maxValue]

Charts::new('temp', 'canvas-gauges')
	->setTitle('My nice chart')
	->setElementLabel('My nice label')
	->setValues([65,0,100])
	->setResponsive(false)
	->setHeight(300)
	->setWidth(0);

Percentage

Note: You either need 1 value or 3 following this standar: [actualValue, minValue, maxValue]

Charts::new('percentage', 'justgage')
	->setTitle('My nice chart')
	->setElementLabel('My nice label')
	->setValues([65,0,100])
	->setResponsive(false)
	->setHeight(300)
	->setWidth(0);

Progressbar

Note: You either need 1 value or 3 following this standar: [actualValue, minValue, maxValue]

Charts::new('progressbar', 'progressbarjs')
	->setValues([65,0,100])
	->setResponsive(false)
	->setHeight(50)
	->setWidth(0);

Database Charts

You can also generate database charts with simple setup!

$chart = Charts::database(User::all(), 'bar', 'highcharts');

Example data:

Note: You are required to use a specific group method before rendering the chart!

Important: To work with the GroupByYear, GroupByMonth, GroupByDay, lastByYear, lastByMonth & lastByDay you'll need the column created_at in the data rows.

The available methods are:

setData(required mixed $data)

Setup the data again.

 $chart = Charts::database(User::all(), 'bar', 'highcharts')->setData(Role::all());

groupBy(required string $column)

Groups the data based on a column.

 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->groupBy('game');

groupByYear(optional int $years)

Groups the data based in years.

Default: $years = 4

 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->groupByYear();

 // to display a number of years behind, pass a int parameter. For example to display the last 10 years:
 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->groupByYear(10);

groupByMonth(optional string $year, optional boolean $fancy)

Groups the data in months (if no year set, the current one will be used).

Default: $year = 7, $fancy = false

 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->groupByMonth();

 // to display a specific year, pass the parameter. For example to display the months of 2016 and display a fancy output label:
 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->groupByMonth('2016', true);

groupByDay(optional string $month, optional string $year, optional boolean $fancy)

Groups the data in days (if no year/month set, the current one will be used).

Default: $month = date('m'), $year = date('Y'), $fancy = false

 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->groupByDay();

 // to display a specific month and/or year, pass the parameters. For example to display the days of september 2016 and display a fancy output label:
 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->groupByDay('09', '2016', true);

lastByYear(optional int $number)

Alias for groupByYear() method. Does the same.

Default: $number = 4

 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->lastByYear();

 // to display a number of years behind, pass a int parameter. For example to display the last 3 years:
 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->lastByYear(3);

lastByMonth(optional int $number, optional boolean $fancy)

Display the numbers of months behind (relative to the current date).

Default: $number = 6, $fancy = false

 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->lastByMonth();

 // to display a number of months behind, pass a int parameter. For example to display the last 6 months and use a fancy output:
 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->lastByMonth(6, true);

lastByDay(optional int $number, optional boolean $fancy)

Display the numbers of days behind (relative to the current date).

Default: $number = 7, $fancy = false

 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->lastByDay();

 // to display a number of days behind, pass a int parameter. For example to display the last 14 days and use a fancy output:
 $chart = Charts::database(User::all(), 'bar', 'highcharts')
 	->setElementLabel("Total")
 	->setDimensions(1000, 500)
 	->setResponsive(false)
 	->lastByDay(14, true);

Realtime Charts

You can create realtime charts (currently limited to gauge/temperature charts).

Example json:

{"value":31}

'value' can be changed to diferent index name with setValueName($string)

$chart = Charts::realtime(url('/path/to/json'), 2000, 'gauge', 'google')
            ->setValues([65, 0, 100])
            ->setLabels(['First', 'Second', 'Third'])
            ->setResponsive(false)
            ->setHeight(300)
            ->setWidth(0)
            ->setTitle("Permissions Chart")
			->setValueName('value'); //This determines the json index for the value

Note: The interval is set in ms

The available methods are:

setValueName(required string $string)

Sets the value json index.

Default: value

$chart = Charts::realtime(url('/path/to/json'), 2000, 'gauge', 'google')
			->setValues([65, 0, 100])
			->setLabels(['First', 'Second', 'Third'])
			->setResponsive(false)
			->setHeight(300)
			->setWidth(0)
			->setTitle("Permissions Chart")
			->setValueName('value'); //This determines the json index for the value

setUrl(required string $url)

Sets the url after chart object creation.

$chart = Charts::realtime(url('/path/to/json'), 2000, 'gauge', 'google')
			->setValues([65, 0, 100])
			->setLabels(['First', 'Second', 'Third'])
			->setResponsive(false)
			->setHeight(300)
			->setWidth(0)
			->setTitle("Permissions Chart")
			->setUrl(url('/new/json'));

setInterval(required int $interval)

Sets the interval after chart object creation (ms).

$chart = Charts::realtime(url('/path/to/json'), 2000, 'gauge', 'google')
			->setValues([65, 0, 100])
			->setLabels(['First', 'Second', 'Third'])
			->setResponsive(false)
			->setHeight(300)
			->setWidth(0)
			->setTitle("Permissions Chart")
			->setInterval(3000); // in ms

setMaxValues(required int $number)

Sets the max ammount of values to be seen before removing the first one.

$chart = Charts::realtime(url('/path/to/json'), 1000, 'area', 'highcharts')
			->setResponsive(false)
			->setHeight(300)
			->setWidth(0)
			->setTitle("Permissions Chart")
			->setMaxValues(10);

Charts Functions

new()

Returns a new chart instance, if no library is specified, the default one will be used.
```
Charts::new('line');
Charts::new('line', 'highcharts');
```
database(required mixed $object, optional string $type, optional string $library)

Returns a new database chart instance that extends the base one.
```
 Charts::database(User::all());
 Charts::new(User::all(), 'line', 'highcharts');
```
realtime(required string $url, required int $interval, optional string $type, optional string $library)

Returns a new database chart instance that extends the base one.
```
 Charts::realtime(url('/json/data'), 2000, 'gauge', 'google')
```

assets()

Returns all the assets to generate the graphs.

<?php echo Charts::assets(); ?>

// using blade
{!! Charts::assets() !!}

libraries()

Returns an array of all the libraries available (can be filtered).

// Return all the libraries available
print_r(Charts::libraries());

// Return all the libraries available for the line chart
print_r(Charts::libraries('line'));

types()

Returns an array of all the chart types available (can be filtered).

// Return all the chart types available
print_r(Charts::types());

// Return all the chart types available for the highcharts library
print_r(Charts::libraries('highcharts'));

Available Chart Settings:

setGaugeStyle($style)

Set the gauge style

Default: left

Available options: left right center
```
 Charts::new('gauge', 'google')->setGaugeStyle('right');
```
setType()

Set the chart type after creation (Example: from line to pie).
```
Charts::new('line', 'highcharts')->setType('pie');
```
setLibrary()

Set the chart library after creation (Example: from highcharts to google).
```
Charts::new('line', 'highcharts')->setLibrary('google');
```

setLabels()

The labels of the chart.

Charts::new('line', 'highcharts')->setLabels(['First', 'Second', 'Third']);

setValues()

The values of the chart respectively.

Charts::new('line', 'highcharts')->setValues([10, 50, 100]);

setElementLabel()

The element label for line / bar / geo charts.

Charts::new('line', 'highcharts')->setElementLabel('Total Views');

setTitle()

The chart title.

Charts::new('line', 'highcharts')->setTitle('My Chart');

setColors()

The colors of the charts respectively.

Charts::new('line', 'highcharts')->setColors(['#ff0000', '#00ff00', '#0000ff']);

setWidth()

The chart width if non-responsive. 0 = responsive width.
```
Charts::new('line', 'highcharts')->setWidth(1000);
```
setHeight()

The chart height if non-responsive. 0 = responsive height.
```
Charts::new('line', 'highcharts')->setHeight(500);
```
setDimensions()

The chart dimensions (shortcut to set width, height with one funcion).
```
Charts::new('line', 'highcharts')->setHeight(1000, 500);
```
setResponsive()

Set if the chart is responsive or not. If not, the chart dimensions will be used.
```
Charts::new('line', 'highcharts')->setResponsive(false);
```

settings()

Return the chart settings.

print_r(Charts::new('line', 'highcharts')->settings());

render()

Render the chat.

echo Charts::new('line', 'highcharts')->setLabels(['One', 'Two'])->setValues([10, 20])->render();

Extend your way!

You can create your own Charts by forking this repository. The src/Templates folder contains all the current charts, but you can add yours like this:

Create a new file

Create a new file, the syntax is: library.type.php

if your chart library is called: mylib and your template is for the line chart: line Then you create a file like this: mylib.line.php

To call it later, just use:

$chart = Charts::new('line', 'mylib');

You will need to add the CSS / JS to the includes.php file found in the /src folder.

You have plenty of examples to see how to put the data so just take a closer look at all the included templates before doing yours!

mehedi101 / charts Goto Github PK

charts's Introduction

Charts

Charts is a multi-library chart package to create interactive charts using laravel.

Table Of Contents

News

Libraries & Types

Installation

Video Tutorial

Download

Add service provider & alias

Publish the assets

Default Settings

Usage

Chart Examples

Pie

Donut / Doughnut

Line

Area

Bar

Geo

Gauge

Temperature

Percentage

Progressbar

Database Charts

Realtime Charts

Charts Functions

Available Chart Settings:

Extend your way!

Create a new file

charts's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org