New Controllers added. Added Charts

This commit is contained in:
2017-09-19 22:01:00 +02:00
parent ccc5b07ddf
commit 930311b550
400 changed files with 30686 additions and 8 deletions

33
Laravel/.env Normal file
View File

@@ -0,0 +1,33 @@
APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:yiCZrXkhkUItoott+xl/5gpJhgrl1kCkGHfywwHNuxs=
APP_DEBUG=true
APP_LOG_LEVEL=debug
APP_URL=http://localhost
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=dhtstats
DB_USERNAME=dhtuser
DB_PASSWORD=raspberry
BROADCAST_DRIVER=log
CACHE_DRIVER=file
SESSION_DRIVER=file
QUEUE_DRIVER=sync
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379
MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=

View File

@@ -3,6 +3,10 @@
namespace App\Http\Controllers; namespace App\Http\Controllers;
use Illuminate\Http\Request; use Illuminate\Http\Request;
use Charts;
use App\Stats;
use App\Http\Requests;
class PagesController extends Controller class PagesController extends Controller
{ {
@@ -11,9 +15,71 @@ public function dashboard() {
$pagetitle = 'Dashboard'; $pagetitle = 'Dashboard';
$activeNav = 'dashboard'; $activeNav = 'dashboard';
$temperature = Stats::select('temperature')
->limit('1440')
->orderBy('created_at', 'desc')
->pluck('temperature');
$humidity = Stats::select('humidity')
->limit('1440')
->orderBy('created_at', 'desc')
->pluck('humidity');
$gm3 = Stats::select('gm3')
->limit('1440')
->orderBy('created_at', 'desc')
->pluck('gm3');
$created_at = Stats::select('created_at')
->limit('1440')
->orderBy('created_at', 'desc')
->pluck('created_at');
$latestTemp = Stats::select('temperature')
->orderBy('created_at', 'desc')
->limit('1')
->pluck('temperature');
$latestHumidity = Stats::select('humidity')
->orderBy('created_at', 'desc')
->limit('1')
->pluck('humidity');
$latestGM3 = Stats::select('gm3')
->orderBy('created_at', 'desc')
->limit('1')
->pluck('gm3');
$latestTemp = '' . $latestTemp[0];
$latestHumidity = '' . $latestHumidity[0];
$latestGM3 = '' . $latestGM3[0];
$latestShit = 'Temp: ' . $latestTemp . ' Hum: ' . $latestHumidity . ' g/m³: ' . $latestGM3;
$chart = Charts::multi('line', 'material')
->title("Temperatur, Luftfeuchtigkeit, g/m³")
->dimensions(0, 400) // Width x Height
// This defines a preset of colors already done:)
->template("material")
// You could always set them manually
// ->colors(['#2196F3', '#F44336', '#FFC107'])
// Setup the diferent datasets (this is a multi chart)
->dataset('Temperatur', $temperature)
->dataset('Luftfeuchtigkeit', $humidity)
->dataset('g/m³', $gm3)
// Setup what the values mean
->labels($created_at);
return view('dashboard')->with([ return view('dashboard')->with([
'pagetitle' => $pagetitle, 'pagetitle' => $pagetitle,
'activeNav' => $activeNav, 'activeNav' => $activeNav,
'chart' => $chart,
'latestTemp' => $latestTemp,
'latestHumidity' => $latestHumidity,
'latestGM3' => $latestGM3,
'latestShit' => $latestShit,
]); ]);
} }

View File

@@ -0,0 +1,36 @@
<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
class StatsRequest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return false;
}
/**
* Get the validation rules that apply to the request.
*
* @return array
*/
public function rules()
{
return [
'node_id' => 'required|integer',
'pin' => 'required|integer',
'humidity' => 'required|float',
'temperature' => 'required|float',
'isoutside' => 'required|integer',
'gm3' => 'required|float',
'created_at' => 'required|date',
];
}
}

50
Laravel/app/Stats.php Normal file
View File

@@ -0,0 +1,50 @@
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Stats extends Model
{
/**
* The database table uses by the model.
*
* @var string
*/
protected $table = 'stats';
/**
* The attributes that should be mutated to dates.
*
* @var array
*/
protected $dates = [
'created_at',
];
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'node_id',
'pin',
'humidity',
'temperature',
'isoutside',
'gm3',
'created_at'
];
/**
* The attributes excluded from the model's JSON form
*
* @var array
*/
protected $hidden = [
//
];
}

View File

@@ -6,6 +6,7 @@
"type": "project", "type": "project",
"require": { "require": {
"php": ">=7.0.0", "php": ">=7.0.0",
"consoletvs/charts": "5.*",
"fideloper/proxy": "~3.3", "fideloper/proxy": "~3.3",
"laravel/framework": "5.5.*", "laravel/framework": "5.5.*",
"laravel/tinker": "~1.0" "laravel/tinker": "~1.0"

159
Laravel/composer.lock generated
View File

@@ -4,8 +4,57 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file", "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
"This file is @generated automatically" "This file is @generated automatically"
], ],
"content-hash": "8f2120fa77d42a42b4210cdbe1c114e2", "content-hash": "ffd0258eb25bcccc681eb1cbe2d657e9",
"packages": [ "packages": [
{
"name": "consoletvs/charts",
"version": "5.0.2",
"source": {
"type": "git",
"url": "https://github.com/ConsoleTVs/Charts.git",
"reference": "954e969c974ad9cd53a6afd263824b33dcdb8540"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/ConsoleTVs/Charts/zipball/954e969c974ad9cd53a6afd263824b33dcdb8540",
"reference": "954e969c974ad9cd53a6afd263824b33dcdb8540",
"shasum": ""
},
"require": {
"illuminate/support": "5.*",
"jenssegers/date": "v3.*",
"jlawrence/eos": "3.*",
"php": ">=5.6.4"
},
"type": "library",
"extra": {
"laravel": {
"providers": [
"ConsoleTVs\\Charts\\ChartsServiceProvider"
],
"aliases": {
"Charts": "ConsoleTVs\\Charts\\Facades\\Charts"
}
}
},
"autoload": {
"psr-4": {
"ConsoleTVs\\Charts\\": "src/"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Erik Campobadal",
"email": "soc@erik.cat"
}
],
"description": "Create charts for laravel using diferent charts libraries",
"time": "2017-08-14T11:10:46+00:00"
},
{ {
"name": "dnoegel/php-xdg-base-dir", "name": "dnoegel/php-xdg-base-dir",
"version": "0.1", "version": "0.1",
@@ -403,6 +452,114 @@
], ],
"time": "2015-04-20T18:58:01+00:00" "time": "2015-04-20T18:58:01+00:00"
}, },
{
"name": "jenssegers/date",
"version": "v3.2.12",
"source": {
"type": "git",
"url": "https://github.com/jenssegers/date.git",
"reference": "1db4d580d1d45085a48fd4a332697619b9a3851c"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/jenssegers/date/zipball/1db4d580d1d45085a48fd4a332697619b9a3851c",
"reference": "1db4d580d1d45085a48fd4a332697619b9a3851c",
"shasum": ""
},
"require": {
"nesbot/carbon": "^1.0",
"php": ">=5.4",
"symfony/translation": "^2.7|^3.0"
},
"require-dev": {
"phpunit/phpunit": "^4.0|^5.0|^6.0",
"satooshi/php-coveralls": "^1.0"
},
"type": "library",
"extra": {
"branch-alias": {
"dev-master": "3.1-dev"
},
"laravel": {
"providers": [
"Jenssegers\\Date\\DateServiceProvider"
],
"aliases": {
"Date": "Jenssegers\\Date\\Date"
}
}
},
"autoload": {
"psr-4": {
"Jenssegers\\Date\\": "src/"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Jens Segers",
"homepage": "https://jenssegers.com"
}
],
"description": "A date library to help you work with dates in different languages",
"homepage": "https://github.com/jenssegers/date",
"keywords": [
"carbon",
"date",
"datetime",
"i18n",
"laravel",
"time",
"translation"
],
"time": "2017-06-30T11:51:03+00:00"
},
{
"name": "jlawrence/eos",
"version": "v3.2.2",
"source": {
"type": "git",
"url": "https://github.com/jlawrence11/eos.git",
"reference": "25e3d0f2316cb4636000f452a8e7dcc83725a32a"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/jlawrence11/eos/zipball/25e3d0f2316cb4636000f452a8e7dcc83725a32a",
"reference": "25e3d0f2316cb4636000f452a8e7dcc83725a32a",
"shasum": ""
},
"require-dev": {
"codeclimate/php-test-reporter": "dev-master",
"phpunit/phpunit": "4.*"
},
"type": "library",
"autoload": {
"psr-4": {
"jlawrence\\eos\\": "src/"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"LGPL-2.1+"
],
"authors": [
{
"name": "Jon Lawrence",
"email": "jon@jon-lawrence.com"
}
],
"description": "Parse and solve math equations without using 'eval()'.",
"keywords": [
"eos",
"equations",
"math",
"solve"
],
"time": "2016-03-02T22:35:41+00:00"
},
{ {
"name": "laravel/framework", "name": "laravel/framework",
"version": "v5.5.4", "version": "v5.5.4",

View File

@@ -177,6 +177,8 @@ return [
App\Providers\EventServiceProvider::class, App\Providers\EventServiceProvider::class,
App\Providers\RouteServiceProvider::class, App\Providers\RouteServiceProvider::class,
], ],
/* /*

191
Laravel/config/charts.php Normal file
View File

@@ -0,0 +1,191 @@
<?php
return [
/*
|--------------------------------------------------------------------------
| Default settings for charts.
|--------------------------------------------------------------------------
*/
'default' => [
'type' => 'line', // The default chart type.
'library' => 'material', // The default chart library.
'element_label' => 'Element', // The default chart element label.
'empty_dataset_label' => 'No Data Set',
'empty_dataset_value' => 0,
'title' => 'My Cool Chart', // Default chart title.
'height' => 400, // 0 Means it will take 100% of the division height.
'width' => 0, // 0 Means it will take 100% of the division width.
'responsive' => false, // Not recommended since all libraries have diferent sizes.
'background_color' => 'inherit', // The chart division background color.
'colors' => [], // Default chart colors if using no template is set.
'one_color' => false, // Only use the first color in all values.
'template' => 'material', // The default chart color template.
'legend' => true, // Whether to enable the chart legend (where applicable).
'x_axis_title' => false, // The title of the x-axis
'y_axis_title' => null, // The title of the y-axis (When set to null will use element_label value).
'loader' => [
'active' => true, // Determines the if loader is active by default.
'duration' => 500, // In milliseconds.
'color' => '#000000', // Determines the default loader color.
],
],
/*
|--------------------------------------------------------------------------
| All the color templates available for the charts.
|--------------------------------------------------------------------------
*/
'templates' => [
'material' => [
'#2196F3', '#F44336', '#FFC107',
],
'red-material' => [
'#B71C1C', '#F44336', '#E57373',
],
'indigo-material' => [
'#1A237E', '#3F51B5', '#7986CB',
],
'blue-material' => [
'#0D47A1', '#2196F3', '#64B5F6',
],
'teal-material' => [
'#004D40', '#009688', '#4DB6AC',
],
'green-material' => [
'#1B5E20', '#4CAF50', '#81C784',
],
'yellow-material' => [
'#F57F17', '#FFEB3B', '#FFF176',
],
'orange-material' => [
'#E65100', '#FF9800', '#FFB74D',
],
],
/*
|--------------------------------------------------------------------------
| Assets required by the libraries.
|--------------------------------------------------------------------------
*/
'assets' => [
'global' => [
'scripts' => [
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js',
],
],
'canvas-gauges' => [
'scripts' => [
'https://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.2/all/gauge.min.js',
],
],
'chartist' => [
'scripts' => [
'https://cdnjs.cloudflare.com/ajax/libs/chartist/0.10.1/chartist.min.js',
],
'styles' => [
'https://cdnjs.cloudflare.com/ajax/libs/chartist/0.10.1/chartist.min.css',
],
],
'chartjs' => [
'scripts' => [
'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js',
],
],
'fusioncharts' => [
'scripts' => [
'https://static.fusioncharts.com/code/latest/fusioncharts.js',
'https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js',
],
],
'google' => [
'scripts' => [
'https://www.google.com/jsapi',
'https://www.gstatic.com/charts/loader.js',
"google.charts.load('current', {'packages':['corechart', 'gauge', 'geochart', 'bar', 'line']})",
],
],
'highcharts' => [
'styles' => [
// The following CSS is not added due to color compatibility errors.
// 'https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.7/css/highcharts.css',
],
'scripts' => [
'https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.7/highcharts.js',
'https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.7/js/modules/offline-exporting.js',
'https://cdnjs.cloudflare.com/ajax/libs/highmaps/5.0.7/js/modules/map.js',
'https://cdnjs.cloudflare.com/ajax/libs/highmaps/5.0.7/js/modules/data.js',
'https://code.highcharts.com/mapdata/custom/world.js',
],
],
'justgage' => [
'scripts' => [
'https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.6/raphael.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.2/justgage.min.js',
],
],
'morris' => [
'styles' => [
'https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css',
],
'scripts' => [
'https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.6/raphael.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js',
],
],
'plottablejs' => [
'scripts' => [
'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/plottable.js/2.8.0/plottable.min.js',
],
'styles' => [
'https://cdnjs.cloudflare.com/ajax/libs/plottable.js/2.2.0/plottable.css',
],
],
'progressbarjs' => [
'scripts' => [
'https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js',
],
],
'c3' => [
'scripts' => [
'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js',
],
'styles' => [
'https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css',
],
],
'echarts' => [
'scripts' => [
'https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js',
],
],
'amcharts' => [
'scripts' => [
'https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.2/amcharts.js',
'https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.2/serial.js',
'https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.2/plugins/export/export.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.2/themes/light.js',
],
'styles' => [
'https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.2/plugins/export/export.css',
],
],
],
];

View File

@@ -0,0 +1,71 @@
<?php
return [
/*
* Set trusted proxy IP addresses.
*
* Both IPv4 and IPv6 addresses are
* supported, along with CIDR notation.
*
* The "*" character is syntactic sugar
* within TrustedProxy to trust any proxy
* that connects directly to your server,
* a requirement when you cannot know the address
* of your proxy (e.g. if using Rackspace balancers).
*
* The "**" character is syntactic sugar within
* TrustedProxy to trust not just any proxy that
* connects directly to your server, but also
* proxies that connect to those proxies, and all
* the way back until you reach the original source
* IP. It will mean that $request->getClientIp()
* always gets the originating client IP, no matter
* how many proxies that client's request has
* subsequently passed through.
*/
'proxies' => [
'192.168.1.10',
],
/*
* Or, to trust all proxies that connect
* directly to your server, uncomment this:
*/
# 'proxies' => '*',
/*
* Or, to trust ALL proxies, including those that
* are in a chain of forwarding, uncomment this:
*/
# 'proxies' => '**',
/*
* Default Header Names
*
* Change these if the proxy does
* not send the default header names.
*
* Note that headers such as X-Forwarded-For
* are transformed to HTTP_X_FORWARDED_FOR format.
*
* The following are Symfony defaults, found in
* \Symfony\Component\HttpFoundation\Request::$trustedHeaders
*
* You may optionally set headers to 'null' here if you'd like
* for them to be considered untrusted instead. Ex:
*
* Illuminate\Http\Request::HEADER_CLIENT_HOST => null,
*
* WARNING: If you're using AWS Elastic Load Balancing or Heroku,
* the FORWARDED and X_FORWARDED_HOST headers should be set to null
* as they are currently unsupported there.
*/
'headers' => [
(defined('Illuminate\Http\Request::HEADER_FORWARDED') ? Illuminate\Http\Request::HEADER_FORWARDED : 'forwarded') => 'FORWARDED',
Illuminate\Http\Request::HEADER_CLIENT_IP => 'X_FORWARDED_FOR',
Illuminate\Http\Request::HEADER_CLIENT_HOST => 'X_FORWARDED_HOST',
Illuminate\Http\Request::HEADER_CLIENT_PROTO => 'X_FORWARDED_PROTO',
Illuminate\Http\Request::HEADER_CLIENT_PORT => 'X_FORWARDED_PORT',
]
];

View File

@@ -62,7 +62,12 @@
.m-b-md { .m-b-md {
margin-bottom: 30px; margin-bottom: 30px;
} }
</style> </style>
{!! Charts::styles() !!}
</head> </head>
<body> <body>
<div class="flex-center position-ref full-height"> <div class="flex-center position-ref full-height">
@@ -79,17 +84,27 @@
<div class="content"> <div class="content">
<div class="title m-b-md"> <div class="title m-b-md">
Dashboard HumidityPi
</div> </div>
<div class="links"> <div class="links">
<a href="https://laravel.com/docs">Documentation</a> <a href="https://laravel.com/docs">Dokumentation</a>
<a href="https://laracasts.com">Laracasts</a> <a href="https://laracasts.com">Kategorie 1</a>
<a href="https://laravel-news.com">News</a> <a href="https://laravel-news.com">Kategorie 2</a>
<a href="https://forge.laravel.com">Forge</a> <a href="https://gitlab.com/STRUCTiX/dht22tempstats">GitLab</a>
<a href="https://github.com/laravel/laravel">GitHub</a> <a href="https://github.com/laravel/laravel">Einstellungen</a>
</div> </div>
<div class="title m-b-md">
{!! $latestShit !!}
</div> </div>
<!--{!! $chart->render() !!}-->
</div> </div>
</div>
{!! $chart->html() !!}
{!! Charts::scripts() !!}
{!! $chart->script() !!}
</body> </body>
</html> </html>

View File

@@ -0,0 +1,7 @@
@if(!$model->container)
@include('charts::_partials.loader.container-top')
<div>
<canvas id="{{ $model->id }}"></canvas>
</div>
@include('charts::_partials.loader.container-bottom')
@endif

View File

@@ -0,0 +1,7 @@
@if(!$model->container)
@include('charts::_partials.loader.container-top')
<div>
<canvas id="{{ $model->id }}" @include('charts::_partials.dimension.html')></canvas>
</div>
@include('charts::_partials.loader.container-bottom')
@endif

View File

@@ -0,0 +1,6 @@
@if(!$model->container)
@include('charts::_partials.container.title')
@include('charts::_partials.loader.container-top')
<div id="{{ $model->id }}" style="@include('charts::_partials.dimension.css')" class="ct-chart ct-perfect-fourth"></div>
@include('charts::_partials.loader.container-bottom')
@endif

View File

@@ -0,0 +1,8 @@
@if(!$model->container)
@include('charts::_partials.container.title')
@include('charts::_partials.loader.container-top')
<center>
<div id="{{ $model->id }}" style="@include('charts::_partials.dimension.css')"></div>
</center>
@include('charts::_partials.loader.container-bottom')
@endif

View File

@@ -0,0 +1,6 @@
@if(!$model->container)
@include('charts::_partials.loader.container-top')
<div id="{{ $model->id }}" style="@include('charts::_partials.dimension.css')"></div>
@include('charts::_partials.loader.container-bottom')
@endif

View File

@@ -0,0 +1,5 @@
@if(!$model->container)
@include('charts::_partials.loader.container-top')
<svg id="{{ $model->id }}" @include('charts::_partials.dimension.html')></svg>
@include('charts::_partials.loader.container-bottom')
@endif

View File

@@ -0,0 +1,9 @@
@if(!$model->container)
<div>
@if($model->title)
<center>
<strong>{{ $model->title }}</strong>
</center>
@endif
</div>
@endif

View File

@@ -0,0 +1,11 @@
@if($model->responsive)
height: 100%; width: 100%;
@else
@if($model->height)
height: {{ $model->height }}px;
@endif
@if($model->width)
width: {{ $model->width }}px;
@endif
@endif

View File

@@ -0,0 +1,11 @@
@if($model->responsive)
height="100%" width="100%"
@else
@if($model->height)
height="{{ $model->height }}"
@endif
@if($model->width)
width="{{ $model->width }}"
@endif
@endif

View File

@@ -0,0 +1,16 @@
@if($model->responsive)
height: "100%",
width: "100%",
@else
@if($model->height)
height: "{{ $model->height }}px",
@else
height: "100%",
@endif
@if($model->width)
width: "{{ $model->width }}px",
@else
width: "100%",
@endif
@endif

View File

@@ -0,0 +1,9 @@
@if(!$model->responsive)
@if($model->height)
height: {{ $model->height }},
@endif
@if($model->width)
width: {{ $model->width }},
@endif
@endif

View File

@@ -0,0 +1,5 @@
<style>
#{{ $model->id }} > svg {
@include("charts::_partials.dimension.css")
}
</style>

View File

@@ -0,0 +1,11 @@
<script>
function hex2rgba_convert(hex,opacity){
hex = hex.replace('#','');
r = parseInt(hex.substring(0,2), 16);
g = parseInt(hex.substring(2,4), 16);
b = parseInt(hex.substring(4,6), 16);
result = 'rgba('+r+','+g+','+b+','+opacity/100+')';
return result;
}
</script>

View File

@@ -0,0 +1,2 @@
</div>
</div>

View File

@@ -0,0 +1,7 @@
<div class="charts" style="background: {{ $model->background_color }};">
<div data-duration="{{ $model->loader_duration }}" class="charts-loader {{ $model->loader ? 'enabled' : '' }}" style="display: none; position: relative; top: {{ ($model->height / 2) - 30 }}px; height: 0;">
<center>
<div class="loading-spinner" style="border: 3px solid {{ $model->loader_color }}; border-right-color: transparent;"></div>
</center>
</div>
<div class="charts-chart">

View File

@@ -0,0 +1,68 @@
<style>
@-webkit-keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loading-spinner {
-webkit-animation-duration: 0.75s;
-moz-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: rotate-forever;
-moz-animation-name: rotate-forever;
animation-name: rotate-forever;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
height: 60px;
width: 60px;
border-radius: 50%;
display: inline-block;
}
</style>

View File

@@ -0,0 +1,20 @@
<script>
$(function() {
$('.charts').each(function() {
var chart = $(this).find('.charts-chart');
var loader = $(this).find('.charts-loader');
var time = loader.data('duration');
if(loader.hasClass('enabled')) {
chart.css({visibility: 'hidden'});
loader.fadeIn(350);
setTimeout(function() {
loader.fadeOut(350, function() {
chart.css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 350);
});
}, time)
}
});
})
</script>

View File

@@ -0,0 +1,49 @@
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif
<script>
var {{ $model->id }} = AmCharts.makeChart( "{{ $model->id }}", {
"type": "serial",
"theme": "light",
"dataProvider": [
@foreach($model->values as $v)
{
"country": "{{ $model->labels[$loop->index] }}",
"visits": {{ $v }}
},
@endforeach
],
"valueAxes": [
{
"minimum": 0,
"title": "{!! $model->element_label !!}",
}
],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [ {
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "{!! $model->element_label !!}"
} ],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20
},
"export": {
"enabled": true
}
} );
</script>

View File

@@ -0,0 +1,30 @@
@include('charts::_partials.container.div')
<script>
var {{ $model->id }} = c3.generate({
bindto: '#{{ $model->id }}',
data: {
columns: [
["{!! $model->element_label !!}",@foreach($model->values as $value){{ $value }},@endforeach],
],
type: 'area',
},
axis: {
x: {
type: 'category',
categories: [@foreach($model->labels as $label)"{!! $label !!}",@endforeach]
},
y: {
label: {
text: "{!! $model->element_label !!}",
position: 'outer-middle',
}
},
},
@if($model->title)
title: {
text: "{!! $model->title !!}",
x: -20 //center
},
@endif
});
</script>

View File

@@ -0,0 +1,30 @@
@include('charts::_partials.container.div')
<script>
var {{ $model->id }} = c3.generate({
bindto: '#{{ $model->id }}',
data: {
columns: [
["{!! $model->element_label !!}",@foreach($model->values as $value){{ $value }},@endforeach],
],
type: 'bar',
},
axis: {
x: {
type: 'category',
categories: [@foreach($model->labels as $label)"{!! $label !!}",@endforeach]
},
y: {
label: {
text: "{!! $model->element_label !!}",
position: 'outer-middle',
}
},
},
@if($model->title)
title: {
text: "{!! $model->title !!}",
x: -20 //center
},
@endif
});
</script>

View File

@@ -0,0 +1,32 @@
@include('charts::_partials.container.div')
<script>
var {{ $model->id }} = c3.generate({
bindto: '#{{ $model->id }}',
data: {
columns: [
@for($i = 0; $i < count($model->labels); $i++)
["{!! $model->labels[$i] !!}", {{ $model->values[$i] }}],
@endfor
],
type: 'donut',
},
axis: {
x: {
type: 'category',
categories: [@foreach($model->labels as $label)"{!! $label !!}",@endforeach]
},
y: {
label: {
text: "{!! $model->element_label !!}",
position: 'outer-middle',
}
},
},
@if($model->title)
title: {
text: "{!! $model->title !!}",
x: -20 //center
},
@endif
});
</script>

View File

@@ -0,0 +1,34 @@
@include('charts::_partials.container.div')
<script>
var {{ $model->id }} = c3.generate({
bindto: '#{{ $model->id }}',
data: {
columns: [
["{!! $model->element_label !!}",{{ $model->values[0] }}],
],
type: 'gauge',
},
gauge: {
min: {{ ($model->values && count($model->values) > 1) ? $model->values[1] : '0' }},
max: {{ ($model->values && count($model->values) > 2) ? $model->values[2] : '100' }},
},
axis: {
x: {
type: 'category',
categories: [@foreach($model->labels as $label)"{!! $label !!}",@endforeach]
},
y: {
label: {
text: "{!! $model->element_label !!}",
position: 'outer-middle',
}
},
},
@if($model->title)
title: {
text: "{!! $model->title !!}",
x: -20 //center
},
@endif
});
</script>

View File

@@ -0,0 +1,29 @@
@include('charts::_partials.container.div')
<script>
var {{ $model->id }} = c3.generate({
bindto: '#{{ $model->id }}',
data: {
columns: [
["{!! $model->element_label !!}",@foreach($model->values as $value){{ $value }},@endforeach],
]
},
axis: {
x: {
type: 'category',
categories: [@foreach($model->labels as $label)"{!! $label !!}",@endforeach]
},
y: {
label: {
text: "{!! $model->element_label !!}",
position: 'outer-middle',
}
},
},
@if($model->title)
title: {
text: "{!! $model->title !!}",
x: -20 //center
},
@endif
});
</script>

View File

@@ -0,0 +1,32 @@
@include('charts::_partials.container.div')
<script>
var {{ $model->id }} = c3.generate({
bindto: '#{{ $model->id }}',
data: {
columns: [
@foreach($model->datasets as $ds)
["{{ $ds['label'] }}",@foreach($ds['values'] as $value){{ $value }},@endforeach],
@endforeach
],
type: 'area',
},
axis: {
x: {
type: 'category',
categories: [@foreach($model->labels as $label)"{!! $label !!}",@endforeach]
},
y: {
label: {
text: "{!! $model->element_label !!}",
position: 'outer-middle',
}
},
},
@if($model->title)
title: {
text: "{!! $model->title !!}",
x: -20 //center
},
@endif
});
</script>

View File

@@ -0,0 +1,32 @@
@include('charts::_partials.container.div')
<script>
var {{ $model->id }} = c3.generate({
bindto: '#{{ $model->id }}',
data: {
columns: [
@foreach($model->datasets as $ds)
["{{ $ds['label'] }}",@foreach($ds['values'] as $value){{ $value }},@endforeach],
@endforeach
],
type: 'bar',
},
axis: {
x: {
type: 'category',
categories: [@foreach($model->labels as $label)"{!! $label !!}",@endforeach]
},
y: {
label: {
text: "{!! $model->element_label !!}",
position: 'outer-middle',
}
},
},
@if($model->title)
title: {
text: "{!! $model->title !!}",
x: -20 //center
},
@endif
});
</script>

View File

@@ -0,0 +1,31 @@
@include('charts::_partials.container.div')
<script>
var {{ $model->id }} = c3.generate({
bindto: '#{{ $model->id }}',
data: {
columns: [
@foreach($model->datasets as $ds)
["{{ $ds['label'] }}",@foreach($ds['values'] as $value){{ $value }},@endforeach],
@endforeach
]
},
axis: {
x: {
type: 'category',
categories: [@foreach($model->labels as $label)"{!! $label !!}",@endforeach]
},
y: {
label: {
text: "{!! $model->element_label !!}",
position: 'outer-middle',
}
},
},
@if($model->title)
title: {
text: "{!! $model->title !!}",
x: -20 //center
},
@endif
});
</script>

View File

@@ -0,0 +1,32 @@
@include('charts::_partials.container.div')
<script>
var {{ $model->id }} = c3.generate({
bindto: '#{{ $model->id }}',
data: {
columns: [
@for($i = 0; $i < count($model->labels); $i++)
["{!! $model->labels[$i] !!}", {{ $model->values[$i] }}],
@endfor
],
type: 'pie',
},
axis: {
x: {
type: 'category',
categories: [@foreach($model->labels as $label)"{!! $label !!}",@endforeach]
},
y: {
label: {
text: "{!! $model->element_label !!}",
position: 'outer-middle',
}
},
},
@if($model->title)
title: {
text: "{!! $model->title !!}",
x: -20 //center
},
@endif
});
</script>

View File

@@ -0,0 +1,99 @@
@if(!$model->customId)
@include('charts::_partials.container.canvas')
@endif
<script type="text/javascript">
$(function (){
var {{ $model->id }} = new RadialGauge({
renderTo: "{{ $model->id }}",
@if($model->colors)
colorNumbers: "{{ $model->colors[0] }}",
@endif
@include('charts::_partials.dimension.js2')
@if($model->title)
title: "{!! $model->title !!}",
@endif
value: {{ $model->values[0] }},
units: "{!! $model->element_label !!}",
@if(count($model->values) >= 2 and $model->values[1] <= $model->values[0])
@php($min = $model->values[1])
minValue: {{ $min }},
@else
@php($min = 0)
@endif
@if(count($model->values) >= 3 and $model->values[2] >= $model->values[0])
@php($max = $model->values[2])
maxValue: {{ $max }},
@else
@php($max = 100)
@endif
@php
$interval = 10;
$interval_adder = round($max / $interval, 2)
@endphp
majorTicks: [
@php($r = $min)
@for($i = 0; $i <= $interval; $i++)
@if($i == 0)
{{ $min }},
@elseif($i == $interval)
{{ $max }},
@else
{{ $r + $interval_adder }},
@php($r = $r + $interval_adder)
@endif
@endfor
],
animationRule: 'linear',
highlights: [
@if($model->gauge_style == 'right')
// Calculate warning area
<?php
$low_warning = round(0.40 * $max, 2);
$warning = round(0.25 * $max, 2);
$max_warning = round(0.10 * $max, 2);
?>
{ from: {{ $low_warning }}, to: {{ $max }}, color: 'rgba(0,258,0,.20)' },
{ from: {{ $warning }}, to: {{ $low_warning }}, color: 'rgba(255,255,0,.35)' },
{ from: {{ $max_warning }}, to: {{ $warning }}, color: 'rgba(255,69,0,.40)' },
{ from: {{ $min }}, to: {{ $max_warning }}, color: 'rgba(255,0,0,.5)' },
@elseif($model->gauge_style == 'center')
// Calculate warning area
<?php
$warning = round(0.10 * $max, 2);
$warning2 = round(0.25 * $max, 2);
$warning3 = round(0.40 * $max, 2);
$warning4 = round(0.60 * $max, 2);
$warning5 = round(0.75 * $max, 2);
$warning6 = round(0.90 * $max, 2);
?>
{ from: {{ $warning3 }}, to: {{ $warning4 }}, color: 'rgba(0,258,0,.20)' },
{ from: {{ $warning2 }}, to: {{ $warning3 }}, color: 'rgba(255,255,0,.35)' },
{ from: {{ $warning4 }}, to: {{ $warning5 }}, color: 'rgba(255,255,0,.35)' },
{ from: {{ $warning }}, to: {{ $warning2 }}, color: 'rgba(255,69,0,.40)' },
{ from: {{ $warning5 }}, to: {{ $warning6 }}, color: 'rgba(255,69,0,.40)' },
{ from: {{ $min }}, to: {{ $warning }}, color: 'rgba(255,0,0,.5)' },
{ from: {{ $warning6 }}, to: {{ $max }}, color: 'rgba(255,0,0,.5)' },
@else
// Calculate warning area
<?php
$low_warning = round(0.60 * $max, 2);
$warning = round(0.75 * $max, 2);
$max_warning = round(0.90 * $max, 2);
?>
{ from: {{ $min }}, to: {{ $low_warning }}, color: 'rgba(0,258,0,.20)' },
{ from: {{ $low_warning }}, to: {{ $warning }}, color: 'rgba(255,255,0,.35)' },
{ from: {{ $warning }}, to: {{ $max_warning }}, color: 'rgba(255,69,0,.40)' },
{ from: {{ $max_warning }}, to: {{ $max }}, color: 'rgba(255,0,0,.5)' },
@endif
],
}).draw()
});
</script>

View File

@@ -0,0 +1,105 @@
@if(!$model->customId)
@include('charts::_partials.container.canvas')
@endif
<script type="text/javascript">
$(function (){
var {{ $model->id }} = new RadialGauge({
renderTo: "{{ $model->id }}",
@if($model->colors)
colorNumbers: "{{ $model->colors[0] }}",
@endif
@include('charts::_partials.dimension.js2')
@if($model->title)
title: "{!! $model->title !!}",
@endif
value: {{ $model->values ? $model->values[0] : '0' }},
units: "{!! $model->element_label !!}",
@if(count($model->values) >= 2 and $model->values[1] <= $model->values[0])
@php($min = $model->values[1])
minValue: {{ $min }},
@else
@php($min = 0)
@endif
@if(count($model->values) >= 3 and $model->values[2] >= $model->values[0])
@php($max = $model->values[2])
maxValue: {{ $max }},
@else
@php($max = 100)
@endif
@php
$interval = 10;
$interval_adder = round($max / $interval, 2)
@endphp
majorTicks: [
@php($r = $min)
@for($i = 0; $i <= $interval; $i++)
@if($i == 0)
{{ $min }},
@elseif($i == $interval)
{{ $max }},
@else
{{ $r + $interval_adder }},
@php($r = $r + $interval_adder)
@endif
@endfor
],
animationRule: 'linear',
highlights: [
@if($model->gauge_style == 'right')
// Calculate warning area
@php
$low_warning = round(0.40 * $max, 2);
$warning = round(0.25 * $max, 2);
$max_warning = round(0.10 * $max, 2);
@endphp
{ from: {{ $low_warning }}, to: {{ $max }}, color: 'rgba(0,258,0,.20)' },
{ from: {{ $warning }}, to: {{ $low_warning }}, color: 'rgba(255,255,0,.35)' },
{ from: {{ $max_warning }}, to: {{ $warning }}, color: 'rgba(255,69,0,.40)' },
{ from: {{ $min }}, to: {{ $max_warning }}, color: 'rgba(255,0,0,.5)' },
@elseif($model->gauge_style == 'center') {
// Calculate warning area
@php
$warning = round(0.10 * $max, 2);
$warning2 = round(0.25 * $max, 2);
$warning3 = round(0.40 * $max, 2);
$warning4 = round(0.60 * $max, 2);
$warning5 = round(0.75 * $max, 2);
$warning6 = round(0.90 * $max, 2);
@endphp
{ from: {{ $warning3 }}, to: {{ $warning4 }}, color: 'rgba(0,258,0,.20)' },
{ from: {{ $warning2 }}, to: {{ $warning3 }}, color: 'rgba(255,255,0,.35)' },
{ from: {{ $warning4 }}, to: {{ $warning5 }}, color: 'rgba(255,255,0,.35)' },
{ from: {{ $warning }}, to: {{ $warning2 }}, color: 'rgba(255,69,0,.40)' },
{ from: {{ $warning5 }}, to: {{ $warning6 }}, color: 'rgba(255,69,0,.40)' },
{ from: {{ $min }}, to: {{ $warning }}, color: 'rgba(255,0,0,.5)' },
{ from: {{ $warning6 }}, to: {{ $max }}, color: 'rgba(255,0,0,.5)' },
@else
// Calculate warning area
@php
$low_warning = round(0.60 * $max, 2);
$warning = round(0.75 * $max, 2);
$max_warning = round(0.90 * $max, 2);
@endphp
{ from: {{ $min }}, to: {{ $low_warning }}, color: 'rgba(0,258,0,.20)' },
{ from: {{ $low_warning }}, to: {{ $warning }}, color: 'rgba(255,255,0,.35)' },
{ from: {{ $warning }}, to: {{ $max_warning }}, color: 'rgba(255,69,0,.40)' },
{ from: {{ $max_warning }}, to: {{ $max }}, color: 'rgba(255,0,0,.5)' },
@endif
],
}).draw()
setInterval(function(){
$.getJSON("{{ $model->url }}", function( data ) {
{{ $model->id }}.value = data["{{ $model->value_name }}"];
})
}, {{ $model->interval }})
});
</script>

View File

@@ -0,0 +1,108 @@
@if(!$model->customId)
@include('charts::_partials.container.canvas')
@endif
<script type="text/javascript">
$(function (){
var {{ $model->id }} = new LinearGauge({
renderTo: "{{ $model->id }}",
@if($model->colors)
colorNumbers: "{{ $model->colors[0] }}",
@endif
@include('charts::_partials.dimension.js2')
@if($model->title)
title: "{!! $model->title !!}",
@endif
value: {{ $model->values ? $model->values[0] : '0' }},
units: "{!! $model->element_label !!}",
@if(count($model->values) >= 2 and $model->values[1] <= $model->values[0])
@php($min = $model->values[1])
minValue: {{ $min }},
@else
@php($min = 0)
@endif
@if(count($model->values) >= 3 and $model->values[2] >= $model->values[0])
@php($max = $model->values[2])
maxValue: {{ $max }},
@else
@php($max = 100)
@endif
// Calculate warning area
@php
$low_warning = round(0.60 * $max, 2);
$warning = round(0.75 * $max, 2);
$max_warning = round(0.90 * $max, 2);
$interval = 10;
$interval_adder = round($max / $interval, 2);
@endphp
majorTicks: [
@php($r = $min)
@for($i = 0; $i <= $interval; $i++)
@if($i == 0)
{{ $min }},
@elseif($i == $interval)
{{ $max }},
@else
{{ $r + $interval_adder }},
@php($r = $r + $interval_adder)
@endif
@endfor
],
highlights: [
@if($model->gauge_style == 'right')
// Calculate warning area
@php
$low_warning = round(0.40 * $max, 2);
$warning = round(0.25 * $max, 2);
$max_warning = round(0.10 * $max, 2);
@endphp
{ from: {{ $low_warning }}, to: {{ $max }}, color: 'rgba(0,258,0,.20)' },
{ from: {{ $warning }}, to: {{ $low_warning }}, color: 'rgba(255,255,0,.35)' },
{ from: {{ $max_warning }}, to: {{ $warning }}, color: 'rgba(255,69,0,.40)' },
{ from: {{ $min }}, to: {{ $max_warning }}, color: 'rgba(255,0,0,.5)' },
@elseif($model->gauge_style == 'center')
// Calculate warning area
@php
$warning = round(0.10 * $max, 2);
$warning2 = round(0.25 * $max, 2);
$warning3 = round(0.40 * $max, 2);
$warning4 = round(0.60 * $max, 2);
$warning5 = round(0.75 * $max, 2);
$warning6 = round(0.90 * $max, 2);
@endphp
{ from: {{ $warning3 }}, to: {{ $warning4 }}, color: 'rgba(0,258,0,.20)' },
{ from: {{ $warning2 }}, to: {{ $warning3 }}, color: 'rgba(255,255,0,.35)' },
{ from: {{ $warning4 }}, to: {{ $warning5 }}, color: 'rgba(255,255,0,.35)' },
{ from: {{ $warning }}, to: {{ $warning2 }}, color: 'rgba(255,69,0,.40)' },
{ from: {{ $warning5 }}, to: {{ $warning6 }}, color: 'rgba(255,69,0,.40)' },
{ from: {{ $min }}, to: {{ $warning }}, color: 'rgba(255,0,0,.5)' },
{ from: {{ $warning6 }}, to: {{ $max }}, color: 'rgba(255,0,0,.5)' },
@else
// Calculate warning area
@php
$low_warning = round(0.60 * $max, 2);
$warning = round(0.75 * $max, 2);
$max_warning = round(0.90 * $max, 2);
@endphp
{ from: {{ $min }}, to: {{ $low_warning }}, color: 'rgba(0,258,0,.15)' },
{ from: {{ $low_warning }}, to: {{ $warning }}, color: 'rgba(255,255,0,.35)' },
{ from: {{ $warning }}, to: {{ $max_warning }}, color: 'rgba(255,69,0,.40)' },
{ from: {{ $max_warning }}, to: {{ $max }}, color: 'rgba(255,0,0,.5)' },
@endif
],
}).draw()
setInterval(function(){
$.getJSON("{{ $model->url }}", function( data ) {
{{ $model->id }}.value = data["{{ $model->value_name }}"];
})
}, {{ $model->interval }})
});
</script>

View File

@@ -0,0 +1,102 @@
@if(!$model->customId)
@include('charts::_partials.container.canvas')
@endif
<script type="text/javascript">
$(function (){
var {{ $model->id }} = new LinearGauge({
renderTo: "{{ $model->id }}",
@if($model->colors)
colorNumbers: "{{ $model->colors[0] }}",
@endif
@include('charts::_partials.dimension.js2')
@if($model->title)
title: "{!! $model->title !!}",
@endif
value: "{{ $model->values[0] }}",
units: "{!! $model->element_label !!}",
@if(count($model->values) >= 2 and $model->values[1] <= $model->values[0])
@php($min = $model->values[1])
minValue: {{ $min }},
@else
@php($min = 0)
@endif
@if(count($model->values) >= 3 and $model->values[2] >= $model->values[0])
@php($max = $model->values[2])
maxValue: {{ $max }},
@else
@php($max = 100)
@endif
// Calculate warning area
@php
$low_warning = round(0.60 * $max, 2);
$warning = round(0.75 * $max, 2);
$max_warning = round(0.90 * $max, 2);
$interval = 10;
$interval_adder = round($max / $interval, 2);
@endphp
majorTicks: [
@php($r = $min)
@for($i = 0; $i <= $interval; $i++)
@if($i == 0)
{{ $min }},
@elseif($i == $interval)
{{ $max }},
@else
{{ $r + $interval_adder }},
@php($r = $r + $interval_adder)
@endif
@endfor
],
highlights: [
@if($model->gauge_style == 'right')
// Calculate warning area
@php
$low_warning = round(0.40 * $max, 2);
$warning = round(0.25 * $max, 2);
$max_warning = round(0.10 * $max, 2);
@endphp
{ from: {{ $low_warning }}, to: {{ $max }}, color: 'rgba(0,258,0,.20)' },
{ from: {{ $warning }}, to: {{ $low_warning }}, color: 'rgba(255,255,0,.35)' },
{ from: {{ $max_warning }}, to: {{ $warning }}, color: 'rgba(255,69,0,.40)' },
{ from: {{ $min }}, to: {{ $max_warning }}, color: 'rgba(255,0,0,.5)' },
@elseif($model->gauge_style == 'center')
// Calculate warning area
@php
$warning = round(0.10 * $max, 2);
$warning2 = round(0.25 * $max, 2);
$warning3 = round(0.40 * $max, 2);
$warning4 = round(0.60 * $max, 2);
$warning5 = round(0.75 * $max, 2);
$warning6 = round(0.90 * $max, 2);
@endphp
{ from: {{ $warning3 }}, to: {{ $warning4 }}, color: 'rgba(0,258,0,.20)' },
{ from: {{ $warning2 }}, to: {{ $warning3 }}, color: 'rgba(255,255,0,.35)' },
{ from: {{ $warning4 }}, to: {{ $warning5 }}, color: 'rgba(255,255,0,.35)' },
{ from: {{ $warning }}, to: {{ $warning2 }}, color: 'rgba(255,69,0,.40)' },
{ from: {{ $warning5 }}, to: {{ $warning6 }}, color: 'rgba(255,69,0,.40)' },
{ from: {{ $min }}, to: {{ $warning }}, color: 'rgba(255,0,0,.5)' },
{ from: {{ $warning6 }}, to: {{ $max }}, color: 'rgba(255,0,0,.5)' },
@else
// Calculate warning area
@php
$low_warning = round(0.60 * $max, 2);
$warning = round(0.75 * $max, 2);
$max_warning = round(0.90 * $max, 2);
@endphp
{ from: {{ $min }}, to: {{ $low_warning }}, color: 'rgba(0,258,0,.15)' },
{ from: {{ $low_warning }}, to: {{ $warning }}, color: 'rgba(255,255,0,.35)' },
{ from: {{ $warning }}, to: {{ $max_warning }}, color: 'rgba(255,69,0,.40)' },
{ from: {{ $max_warning }}, to: {{ $max }}, color: 'rgba(255,0,0,.5)' },
@endif
],
}).draw()
});
</script>

View File

@@ -0,0 +1,25 @@
@include('charts::_partials.container.chartist')
<script type="text/javascript">
var data = {
labels: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
],
series: [
[
@foreach($model->values as $value)
"{{ $value }}",
@endforeach
],
]
};
var options = {
showArea: true,
@include('charts::_partials.dimension.js')
};
new Chartist.Line('#{{ $model->id }}', data, options);
</script>

View File

@@ -0,0 +1,22 @@
@include('charts::_partials.container.chartist')
<script type="text/javascript">
var data = {
labels: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
],
series: [
[
@foreach($model->values as $value)
"{{ $value }}",
@endforeach
],
]
};
var options = { @include('charts::_partials.dimension.js') }
new Chartist.Bar('#{{ $model->id }}', data, options);
</script>

View File

@@ -0,0 +1,26 @@
@include('charts::_partials.container.chartist')
<script type="text/javascript">
var data = {
labels: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
],
series: [
@foreach($model->values as $value)
"{{ $value }}",
@endforeach
]
};
var options = {
donut: true,
labelOffset: 50,
chartPadding: 20,
labelDirection: 'explode',
@include('charts::_partials.dimension.js')
};
new Chartist.Pie('#{{ $model->id }}', data, options);
</script>

View File

@@ -0,0 +1,22 @@
@include('charts::_partials.container.chartist')
<script type="text/javascript">
var data = {
labels: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
],
series: [
[
@foreach($model->values as $value)
{{ $value }},
@endforeach
],
]
};
var options = { @include('charts::_partials.dimension.js') }
new Chartist.Line('#{{ $model->id }}', data, options);
</script>

View File

@@ -0,0 +1,26 @@
@include('charts::_partials.container.chartist')
<script type="text/javascript">
var data = {
labels: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
],
series: [
@foreach($model->datasets as $ds)
[
@foreach($ds['values'] as $value)
"{{ $value }}",
@endforeach
],
@endforeach
]
};
var options = {
showArea: true,
@include('charts::_partials.dimension.js')
}
new Chartist.Line('#{{ $model->id }}', data, options);
</script>

View File

@@ -0,0 +1,24 @@
@include('charts::_partials.container.chartist')
<script type="text/javascript">
var data = {
labels: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
],
series: [
@foreach($model->datasets as $ds)
[
@foreach($ds['values'] as $value)
"{{ $value }}",
@endforeach
],
@endforeach
]
};
var options = { @include('charts::_partials.dimension.js') }
new Chartist.Bar('#{{ $model->id }}', data, options);
</script>

View File

@@ -0,0 +1,24 @@
@include('charts::_partials.container.chartist')
<script type="text/javascript">
var data = {
labels: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
],
series: [
@foreach($model->datasets as $ds)
[
@foreach($ds['values'] as $value)
"{{ $value }}",
@endforeach
],
@endforeach
]
};
var options = { @include('charts::_partials.dimension.js') }
new Chartist.Line('#{{ $model->id }}', data, options);
</script>

View File

@@ -0,0 +1,24 @@
@include('charts::_partials.container.chartist')
<script type="text/javascript">
var data = {
labels: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
],
series: [
@foreach($model->values as $value)
"{{ $value }}",
@endforeach
]
};
var options = {
chartPadding: 20,
labelDirection: 'explode',
@include('charts::_partials.dimension.js')
};
new Chartist.Pie('#{{ $model->id }}', data, options);
</script>

View File

@@ -0,0 +1,49 @@
@if(!$model->customId)
@include('charts::_partials.container.canvas2')
@endif
@include('charts::_partials.helpers.hex2rgb')
<script type="text/javascript">
var ctx = document.getElementById("{{ $model->id }}")
var data = {
labels: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
],
datasets: [{
fill: true,
@if($model->colors)
backgroundColor: hex2rgba_convert("{{ $model->colors[0] }}", 50),
@endif
label: "{!! $model->element_label !!}",
lineTension: 0.3,
@if($model->colors)
borderColor: "{{ $model->colors[0] }}",
@endif
data: [
@foreach($model->values as $dta)
{{ $dta }},
@endforeach
],
}]
};
var {{ $model->id }} = new Chart(ctx, {
type: 'line',
data: data,
options: {
responsive: {{ $model->responsive || !$model->width ? 'true' : 'false' }},
maintainAspectRatio: false,
@if($model->title)
title: {
display: true,
text: "{!! $model->title !!}",
fontSize: 20,
}
@endif
}
});
</script>

View File

@@ -0,0 +1,57 @@
@if(!$model->customId)
@include('charts::_partials.container.canvas2')
@endif
<script type="text/javascript">
var ctx = document.getElementById("{{ $model->id }}")
var {{ $model->id }} = new Chart(ctx, {
type: 'bar',
data: {
labels: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
],
datasets: [
{
label: "{!! $model->element_label !!}",
backgroundColor: [
@if($model->colors)
@foreach($model->colors as $color)
"{{ $color }}",
@endforeach
@else
@foreach($model->values as $dta)
"{{ sprintf('#%06X', mt_rand(0, 0xFFFFFF)) }}",
@endforeach
@endif
],
data: [
@foreach($model->values as $dta)
{{ $dta }},
@endforeach
],
}
]
},
options: {
responsive: {{ $model->responsive || !$model->width ? 'true' : 'false' }},
maintainAspectRatio: false,
@if($model->title)
title: {
display: true,
text: "{!! $model->title !!}",
fontSize: 20,
},
@endif
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
}
}]
}
}
});
</script>

View File

@@ -0,0 +1,47 @@
@if(!$model->customId)
@include('charts::_partials.container.canvas2')
@endif
<script type="text/javascript">
var ctx = document.getElementById("{{ $model->id }}")
var {{ $model->id }} = new Chart(ctx, {
type: 'doughnut',
data: {
labels: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
],
datasets: [{
data: [
@foreach($model->values as $dta)
{{ $dta }},
@endforeach
],
backgroundColor: [
@if($model->colors)
@foreach($model->colors as $color)
"{{ $color }}",
@endforeach
@else
@foreach($model->values as $dta)
"{{ sprintf('#%06X', mt_rand(0, 0xFFFFFF)) }}",
@endforeach
@endif
],
}]
},
options: {
responsive: {{ $model->responsive || !$model->width ? 'true' : 'false' }},
maintainAspectRatio: false,
@if($model->title)
title: {
display: true,
text: "{!! $model->title !!}",
fontSize: 20,
}
@endif
}
});
</script>

View File

@@ -0,0 +1,46 @@
@if(!$model->customId)
@include('charts::_partials.container.canvas2')
@endif
<script type="text/javascript">
var ctx = document.getElementById("{{ $model->id }}")
var data = {
labels: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
],
datasets: [
{
fill: false,
label: "{!! $model->element_label !!}",
lineTension: 0.3,
@if($model->colors)
borderColor: "{{ $model->colors[0] }}",
backgroundColor: "{{ $model->colors[0] }}",
@endif
data: [
@foreach($model->values as $dta)
{{ $dta }},
@endforeach
],
}
]
};
var {{ $model->id }} = new Chart(ctx, {
type: 'line',
data: data,
options: {
responsive: {{ $model->responsive || !$model->width ? 'true' : 'false' }},
maintainAspectRatio: false,
@if($model->title)
title: {
display: true,
text: "{!! $model->title !!}",
fontSize: 20,
}
@endif
}
});
</script>

View File

@@ -0,0 +1,56 @@
@if(!$model->customId)
@include('charts::_partials.container.canvas2')
@endif
@include('charts::_partials.helpers.hex2rgb')
<script type="text/javascript">
var ctx = document.getElementById("{{ $model->id }}")
var data = {
labels: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
],
datasets: [
@for ($i = 0; $i < count($model->datasets); $i++)
{
fill: true,
label: "{!! $model->datasets[$i]['label'] !!}",
lineTension: 0.3,
@if($model->colors and count($model->colors) > $i)
@php($c = $model->colors[$i])
@else
@php($c = sprintf('#%06X', mt_rand(0, 0xFFFFFF)))
@endif
borderColor: "{{ $c }}",
backgroundColor: hex2rgba_convert("{{ $c }}", 50),
data: [
@foreach($model->datasets[$i]['values'] as $dta)
{{ $dta }},
@endforeach
],
},
@endfor
]
};
var {{ $model->id }} = new Chart(ctx, {
type: 'line',
data: data,
options: {
responsive: {{ $model->responsive || !$model->width ? 'true' : 'false' }},
maintainAspectRatio: false,
@if($model->title)
title: {
display: true,
text: "{!! $model->title !!}",
fontSize: 20,
}
@endif
}
});
</script>

View File

@@ -0,0 +1,58 @@
@if(!$model->customId)
@include('charts::_partials.container.canvas2')
@endif
<script type="text/javascript">
var ctx = document.getElementById("{{ $model->id }}")
var {{ $model->id }} = new Chart(ctx, {
type: 'bar',
data: {
labels: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
],
datasets: [
@for ($i = 0; $i < count($model->datasets); $i++)
{
fill: true,
label: "{!! $model->datasets[$i]['label'] !!}",
lineTension: 0.3,
@if($model->colors and count($model->colors) > $i)
borderColor: "{{ $model->colors[$i] }}",
backgroundColor: "{{ $model->colors[$i] }}",
@else
$c = sprintf('#%06X', mt_rand(0, 0xFFFFFF))
borderColor: "{{ $c }}",
backgroundColor: "{{ $c }}",
@endif
data: [
@foreach($model->datasets[$i]['values'] as $dta)
{{ $dta }},
@endforeach
],
},
@endfor
]
},
options: {
responsive: {{ $model->responsive || !$model->width ? 'true' : 'false' }},
maintainAspectRatio: false,
@if($model->title)
title: {
display: true,
text: "{!! $model->title !!}",
fontSize: 20,
},
@endif
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
}
}]
}
}
});
</script>

View File

@@ -0,0 +1,51 @@
@if(!$model->customId)
@include('charts::_partials.container.canvas2')
@endif
<script type="text/javascript">
var ctx = document.getElementById("{{ $model->id }}")
var data = {
labels: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
],
datasets: [
@for ($i = 0; $i < count($model->datasets); $i++)
{
fill: false,
label: "{!! $model->datasets[$i]['label'] !!}",
lineTension: 0.3,
@if($model->colors and count($model->colors) > $i)
@php($c = $model->colors[$i])
@else
@php($c = sprintf('#%06X', mt_rand(0, 0xFFFFFF)))
@endif
borderColor: "{{ $c }}",
backgroundColor: "{{ $c }}",
data: [
@foreach($model->datasets[$i]['values'] as $dta)
{{ $dta }},
@endforeach
],
},
@endfor
]
};
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
responsive: {{ $model->responsive || !$model->width ? 'true' : 'false' }},
maintainAspectRatio: false,
@if($model->title)
title: {
display: true,
text: "{!! $model->title !!}",
fontSize: 20,
}
@endif
}
});
</script>

View File

@@ -0,0 +1,47 @@
@if(!$model->customId)
@include('charts::_partials.container.canvas2')
@endif
<script type="text/javascript">
var ctx = document.getElementById("{{ $model->id }}")
var {{ $model->id }} = new Chart(ctx, {
type: 'pie',
data: {
labels: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
],
datasets: [{
data: [
@foreach($model->values as $dta)
{{ $dta }},
@endforeach
],
backgroundColor: [
@if($model->colors)
@foreach($model->colors as $color)
"{{ $color }}",
@endforeach
@else
@foreach($model->values as $dta)
"{{ sprintf('#%06X', mt_rand(0, 0xFFFFFF)) }}",
@endforeach
@endif
],
}]
},
options: {
responsive: {{ $model->responsive || !$model->width ? 'true' : 'false' }},
maintainAspectRatio: false,
@if($model->title)
title: {
display: true,
text: "{!! $model->title !!}",
fontSize: 20,
}
@endif
}
});
</script>

View File

@@ -0,0 +1,59 @@
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif
<script type="text/javascript">
var {{ $model->id }} = echarts.init(document.getElementById("{{ $model->id }}"));
{{ $model->id }}.setOption({
title: {
text: "{!! $model->title !!}"
},
tooltip: {},
toolbox: {
right: 30,
feature: {
@if ($model->export)
saveAsImage: {
title: 'Save as image',
}
@endif
}
},
legend: {
data:["{!! $model->element_label !!}"]
},
xAxis: {
data: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
]
},
yAxis: {},
@if (count($model->colors) > 0)
color: ["{{ $model->colors[0] }}"],
@endif
@if ($model->background_color)
backgroundColor: "{{ $model->background_color }}",
@endif
series: [{
name: "{!! $model->element_label !!}",
type: 'line',
areaStyle: {
normal: {
color: "{{ count($model->colors) > 0 ? $model->colors[0] : '#c23531' }}",
}
},
data: [
@foreach($model->values as $dta)
{{ $dta }},
@endforeach
],
animationDelay: function (idx) {
return idx * 100;
}
}],
});
</script>

View File

@@ -0,0 +1,54 @@
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif
<script type="text/javascript">
var {{ $model->id }} = echarts.init(document.getElementById("{{ $model->id }}"));
{{ $model->id }}.setOption({
title: {
text: "{!! $model->title !!}"
},
tooltip: {},
toolbox: {
right: 30,
feature: {
@if ($model->export)
saveAsImage: {
title: 'Save as image',
}
@endif
}
},
legend: {
data:["{!! $model->element_label !!}"]
},
xAxis: {
data: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
]
},
yAxis: {},
@if (count($model->colors) > 0)
color: ["{{ $model->colors[0] }}"],
@endif
@if ($model->background_color)
backgroundColor: "{{ $model->background_color }}",
@endif
series: [{
name: "{!! $model->element_label !!}",
type: 'bar',
data: [
@foreach($model->values as $dta)
{{ $dta }},
@endforeach
],
animationDelay: function (idx) {
return idx * 100;
}
}],
});
</script>

View File

@@ -0,0 +1,58 @@
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif
<script type="text/javascript">
var {{ $model->id }} = echarts.init(document.getElementById("{{ $model->id }}"));
{{ $model->id }}.setOption({
title: {
text: "{!! $model->title !!}"
},
tooltip: {},
toolbox: {
right: 30,
feature: {
@if ($model->export)
saveAsImage: {
title: 'Save as image',
}
@endif
}
},
legend: {
orient: 'vertical',
top: 50,
data: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
]
},
@if (count($model->colors) > 0)
color: [
@foreach ($model->colors as $color)
"{{ $color }}",
@endforeach
],
@endif
@if ($model->background_color)
backgroundColor: "{{ $model->background_color }}",
@endif
series: [{
name: "{!! $model->element_label !!}",
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
data: [
@for($i = 0; count($model->values) > $i; $i++)
{value: {{ $model->values[$i] }}, name: "{{ $model->labels[$i] }}" },
@endfor
],
animationDelay: function (idx) {
return idx * 100;
}
}],
});
</script>

View File

@@ -0,0 +1,60 @@
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif
<script type="text/javascript">
var {{ $model->id }} = echarts.init(document.getElementById("{{ $model->id }}"));
{{ $model->id }}.setOption({
title: {
text: "{!! $model->title !!}"
},
tooltip: {},
toolbox: {
right: 30,
feature: {
@if ($model->export)
saveAsImage: {
title: 'Save as image',
}
@endif
}
},
legend: {
orient: 'vertical',
top: 50,
data: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
]
},
@if (count($model->colors) > 0)
color: [
@foreach ($model->colors as $color)
"{{ $color }}",
@endforeach
],
@endif
@if ($model->background_color)
backgroundColor: "{{ $model->background_color }}",
@endif
series: [{
name: "{!! $model->title !!}",
type: 'gauge',
min: {{ ($model->values && count($model->values) > 1) ? $model->values[1] : '0' }},
max: {{ ($model->values && count($model->values) > 2) ? $model->values[2] : '100' }},
data: [
{
value: {{ $model->values[0] }},
name: "{!! $model->element_label !!}",
}
],
animationDelay: function (idx) {
return idx * 100;
}
}],
});
</script>

View File

@@ -0,0 +1,54 @@
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif
<script type="text/javascript">
var {{ $model->id }} = echarts.init(document.getElementById("{{ $model->id }}"));
{{ $model->id }}.setOption({
title: {
text: "{!! $model->title !!}"
},
tooltip: {},
toolbox: {
right: 30,
feature: {
@if ($model->export)
saveAsImage: {
title: 'Save as image',
}
@endif
}
},
legend: {
data:["{!! $model->element_label !!}"]
},
xAxis: {
data: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
]
},
yAxis: {},
@if (count($model->colors) > 0)
color: ["{{ $model->colors[0] }}"],
@endif
@if ($model->background_color)
backgroundColor: "{{ $model->background_color }}",
@endif
series: [{
name: "{!! $model->element_label !!}",
type: 'line',
data: [
@foreach($model->values as $dta)
{{ $dta }},
@endforeach
],
animationDelay: function (idx) {
return idx * 100;
}
}],
});
</script>

View File

@@ -0,0 +1,72 @@
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif
<script type="text/javascript">
var {{ $model->id }} = echarts.init(document.getElementById("{{ $model->id }}"));
{{ $model->id }}.setOption({
title: {
text: "{!! $model->title !!}"
},
tooltip: {},
toolbox: {
right: 30,
feature: {
@if ($model->export)
saveAsImage: {
title: 'Save as image',
}
@endif
}
},
legend: {
orient: 'vertical',
left: 'left',
top: 50,
data: [
@foreach ($model->datasets as $ds)
"{!! $ds['label'] !!}",
@endforeach
]
},
xAxis: {
data: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
]
},
yAxis: {},
@if (count($model->colors) > 0)
color: [
@foreach ($model->colors as $color)
"{{ $color }}",
@endforeach
],
@endif
@if ($model->background_color)
backgroundColor: "{{ $model->background_color }}",
@endif
series: [
@foreach ($model->datasets as $ds)
{
name: "{!! $ds['label'] !!}",
type: 'line',
areaStyle: {
normal: {
color: "{{ $model->colors[$loop->index] }}",
}
},
data: [
@foreach($ds['values'] as $dta)
{{ $dta }},
@endforeach
],
animationDelay: function (idx) {
return idx * 100;
}
},
@endforeach
],
});
</script>

View File

@@ -0,0 +1,67 @@
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif
<script type="text/javascript">
var {{ $model->id }} = echarts.init(document.getElementById("{{ $model->id }}"));
{{ $model->id }}.setOption({
title: {
text: "{!! $model->title !!}"
},
tooltip: {},
toolbox: {
right: 30,
feature: {
@if ($model->export)
saveAsImage: {
title: 'Save as image',
}
@endif
}
},
legend: {
orient: 'vertical',
left: 'left',
top: 50,
data: [
@foreach ($model->datasets as $ds)
"{!! $ds['label'] !!}",
@endforeach
]
},
xAxis: {
data: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
]
},
yAxis: {},
@if (count($model->colors) > 0)
color: [
@foreach ($model->colors as $color)
"{{ $color }}",
@endforeach
],
@endif
@if ($model->background_color)
backgroundColor: "{{ $model->background_color }}",
@endif
series: [
@foreach ($model->datasets as $ds)
{
name: "{!! $ds['label'] !!}",
type: 'bar',
data: [
@foreach($ds['values'] as $dta)
{{ $dta }},
@endforeach
],
animationDelay: function (idx) {
return idx * 100;
}
},
@endforeach
],
});
</script>

View File

@@ -0,0 +1,67 @@
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif
<script type="text/javascript">
var {{ $model->id }} = echarts.init(document.getElementById("{{ $model->id }}"));
{{ $model->id }}.setOption({
title: {
text: "{!! $model->title !!}"
},
tooltip: {},
toolbox: {
right: 30,
feature: {
@if ($model->export)
saveAsImage: {
title: 'Save as image',
}
@endif
}
},
legend: {
orient: 'vertical',
left: 'left',
top: 50,
data: [
@foreach ($model->datasets as $ds)
"{!! $ds['label'] !!}",
@endforeach
]
},
xAxis: {
data: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
]
},
yAxis: {},
@if (count($model->colors) > 0)
color: [
@foreach ($model->colors as $color)
"{{ $color }}",
@endforeach
],
@endif
@if ($model->background_color)
backgroundColor: "{{ $model->background_color }}",
@endif
series: [
@foreach ($model->datasets as $ds)
{
name: "{!! $ds['label'] !!}",
type: 'line',
data: [
@foreach($ds['values'] as $dta)
{{ $dta }},
@endforeach
],
animationDelay: function (idx) {
return idx * 100;
}
},
@endforeach
],
});
</script>

View File

@@ -0,0 +1,56 @@
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif
<script type="text/javascript">
var {{ $model->id }} = echarts.init(document.getElementById("{{ $model->id }}"));
{{ $model->id }}.setOption({
title: {
text: "{!! $model->title !!}"
},
tooltip: {},
toolbox: {
right: 30,
feature: {
@if ($model->export)
saveAsImage: {
title: 'Save as image',
}
@endif
}
},
legend: {
orient: 'vertical',
top: 50,
data: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
]
},
@if (count($model->colors) > 0)
color: [
@foreach ($model->colors as $color)
"{{ $color }}",
@endforeach
],
@endif
@if ($model->background_color)
backgroundColor: "{{ $model->background_color }}",
@endif
series: [{
name: "{!! $model->element_label !!}",
type: 'pie',
data: [
@for($i = 0; count($model->values) > $i; $i++)
{value: {{ $model->values[$i] }}, name: "{{ $model->labels[$i] }}" },
@endfor
],
animationDelay: function (idx) {
return idx * 100;
}
}],
});
</script>

View File

@@ -0,0 +1,48 @@
<script type="text/javascript">
FusionCharts.ready(function () {
var {{ $model->id }} = new FusionCharts({
type: 'area2d',
renderAt: "{{ $model->id }}",
@include('charts::_partials.dimension.js')
dataFormat: 'json',
dataSource: {
'chart': {
"exportenabled": "1",
"exportatclient": "1",
@if($model->title)
'caption': "{!! $model->title !!}",
@endif
'yAxisName': "{!! $model->element_label !!}",
@if($model->colors)
'paletteColors': "{{ $model->colors[0] }}",
@endif
'bgColor': '#ffffff',
'borderAlpha': '20',
'canvasBorderAlpha': '0',
'usePlotGradientColor': '0',
'plotBorderAlpha': '10',
'rotatevalues': '0',
'showValues': '0',
'valueFontColor': '#ffffff',
'showXAxisLine': '1',
'xAxisLineColor': '#999999',
'divlineColor': '#999999',
'divLineIsDashed': '1',
'showAlternateHGridColor': '0',
'subcaptionFontBold': '0',
'subcaptionFontSize': '14'
},
'data': [
@for ($i = 0; $i < count($model->values); $i++)
{
'label': "{!! $model->labels[$i] !!}",
'value': {{ $model->values[$i] }},
},
@endfor
],
}
}).render()
});
</script>
@include('charts::_partials.container.div')

View File

@@ -0,0 +1,48 @@
<script type="text/javascript">
FusionCharts.ready(function () {
var {{ $model->id }} = new FusionCharts({
type: 'column2d',
renderAt: "{{ $model->id }}",
@include('charts::_partials.dimension.js')
dataFormat: 'json',
dataSource: {
'chart': {
"exportenabled": "1",
"exportatclient": "1",
@if($model->title)
'caption': "{!! $model->title !!}",
@endif
'yAxisName': "{!! $model->element_label !!}",
'paletteColors': '#0075c2',
'bgColor': '#ffffff',
'borderAlpha': '20',
'canvasBorderAlpha': '0',
'usePlotGradientColor': '0',
'plotBorderAlpha': '10',
'rotatevalues': '1',
'valueFontColor': '#ffffff',
'showXAxisLine': '1',
'xAxisLineColor': '#999999',
'divlineColor': '#999999',
'divLineIsDashed': '1',
'showAlternateHGridColor': '0',
'subcaptionFontBold': '0',
'subcaptionFontSize': '14'
},
'data': [
@for ($i = 0; $i < count($model->values); $i++)
{
'label': "{!! $model->labels[$i] !!}",
'value': {{ $model->values[$i] }},
@if($model->colors)
'color': "{{ $model->colors[$i] }}",
@endif
},
@endfor
],
}
}).render()
});
</script>
@include('charts::_partials.container.div')

View File

@@ -0,0 +1,59 @@
<script type="text/javascript">
FusionCharts.ready(function () {
var {{ $model->id }} = new FusionCharts({
type: 'doughnut2d',
renderAt: "{{ $model->id }}",
@include('charts::_partials.dimension.js')
dataFormat: 'json',
dataSource: {
'chart': {
"exportenabled": "1",
"exportatclient": "1",
@if($model->title)
'caption': "{!! $model->title !!}",
@endif
'yAxisName': "{!! $model->element_label !!}",
'paletteColors': '#0075c2',
'bgColor': '#ffffff',
'showBorder': '0',
'use3DLighting': '0',
'showShadow': '0',
'enableSmartLabels': '1',
'startingAngle': '0',
'showPercentValues': '1',
'showPercentInTooltip': '0',
'decimals': '1',
'captionFontSize': '14',
'subcaptionFontSize': '14',
'subcaptionFontBold': '0',
'toolTipColor': '#ffffff',
'toolTipBorderThickness': '0',
'toolTipBgColor': '#000000',
'toolTipBgAlpha': '80',
'toolTipBorderRadius': '2',
'toolTipPadding': '5',
'showHoverEffect':'1',
'showLegend': '1',
'legendBgColor': '#ffffff',
'legendBorderAlpha': '0',
'legendShadow': '0',
'legendItemFontSize': '10',
'legendItemFontColor': '#666666'
},
'data': [
@for ($i = 0; $i < count($model->values); $i++)
{
'label': "{!! $model->labels[$i] !!}",
'value': {{ $model->values[$i] }},
@if($model->colors)
'color': "{{ $model->colors[$i] }}",
@endif
},
@endfor
],
}
}).render()
});
</script>
@include('charts::_partials.container.div')

View File

@@ -0,0 +1,47 @@
<script type="text/javascript">
FusionCharts.ready(function () {
var {{ $model->id }} = new FusionCharts({
type: 'line',
renderAt: "{{ $model->id }}",
@include('charts::_partials.dimension.js')
dataFormat: 'json',
dataSource: {
'chart': {
"exportenabled": "1",
"exportatclient": "1",
@if($model->title)
'caption': "{!! $model->title !!}",
@endif
'yAxisName': "{!! $model->element_label !!}",
@if($model->colors)
'paletteColors': "{{ $model->colors[0] }}",
@endif
'bgColor': '#ffffff',
'borderAlpha': '20',
'canvasBorderAlpha': '0',
'usePlotGradientColor': '0',
'plotBorderAlpha': '10',
'rotatevalues': '1',
'valueFontColor': '#ffffff',
'showXAxisLine': '1',
'xAxisLineColor': '#999999',
'divlineColor': '#999999',
'divLineIsDashed': '1',
'showAlternateHGridColor': '0',
'subcaptionFontBold': '0',
'subcaptionFontSize': '14'
},
'data': [
@for ($i = 0; $i < count($model->values); $i++)
{
'label': "{!! $model->labels[$i] !!}",
'value': {{ $model->values[$i] }},
},
@endfor
],
}
}).render()
});
</script>
@include('charts::_partials.container.div')

View File

@@ -0,0 +1,63 @@
<script type="text/javascript">
FusionCharts.ready(function () {
var {{ $model->id }} = new FusionCharts({
type: 'msarea',
renderAt: "{{ $model->id }}",
@include('charts::_partials.dimension.js')
dataFormat: 'json',
dataSource: {
'chart': {
"exportenabled": "1",
"exportatclient": "1",
@if($model->title)
'caption': "{!! $model->title !!}",
@endif
'yAxisName': "{!! $model->element_label !!}",
'bgColor': '#ffffff',
'borderAlpha': '20',
'canvasBorderAlpha': '0',
'usePlotGradientColor': '0',
'plotBorderAlpha': '10',
'showValues': '0',
'showValues': '0',
'valueFontColor': '#ffffff',
'showXAxisLine': '1',
'xAxisLineColor': '#999999',
'divlineColor': '#999999',
'divLineIsDashed': '1',
'showAlternateHGridColor': '0',
'subcaptionFontBold': '0',
'subcaptionFontSize': '14'
},
'categories': [{
'category': [
@foreach($model->labels as $l)
{
'label': "{{ $l }}",
},
@endforeach
]
}],
'dataset': [
@for ($i = 0; $i < count($model->datasets); $i++)
{
'seriesname': "{{ $model->datasets[$i]['label'] }}",
@if($model->colors and count($model->colors) > $i)
'color': "{{ $model->colors[$i] }}",
@endif
'data': [
@foreach($model->datasets[$i]['values'] as $v)
{
'value': {{ $v }}
},
@endforeach
]
},
@endfor
]
}
}).render()
});
</script>
@include('charts::_partials.container.div')

View File

@@ -0,0 +1,62 @@
<script type="text/javascript">
FusionCharts.ready(function () {
var {{ $model->id }} = new FusionCharts({
type: 'mscolumn2d',
renderAt: "{{ $model->id }}",
@include('charts::_partials.dimension.js')
dataFormat: 'json',
dataSource: {
'chart': {
"exportenabled": "1",
"exportatclient": "1",
@if($model->title)
'caption': "{!! $model->title !!}",
@endif
'yAxisName': "{!! $model->element_label !!}",
'bgColor': '#ffffff',
'borderAlpha': '20',
'canvasBorderAlpha': '0',
'usePlotGradientColor': '0',
'plotBorderAlpha': '10',
'rotatevalues': '1',
'valueFontColor': '#ffffff',
'showXAxisLine': '1',
'xAxisLineColor': '#999999',
'divlineColor': '#999999',
'divLineIsDashed': '1',
'showAlternateHGridColor': '0',
'subcaptionFontBold': '0',
'subcaptionFontSize': '14'
},
'categories': [{
'category': [
@foreach($model->labels as $l)
{
'label': "{{ $l }}",
},
@endforeach
]
}],
'dataset': [
@for ($i = 0; $i < count($model->datasets); $i++)
{
'seriesname': "{{ $model->datasets[$i]['label'] }}",
@if($model->colors and count($model->colors) > $i)
'color': "{{ $model->colors[$i] }}",
@endif
'data': [
@foreach($model->datasets[$i]['values'] as $v)
{
'value': {{ $v }}
},
@endforeach
]
},
@endfor
]
}
}).render()
});
</script>
@include('charts::_partials.container.div')

View File

@@ -0,0 +1,62 @@
<script type="text/javascript">
FusionCharts.ready(function () {
var {{ $model->id }} = new FusionCharts({
type: 'msline',
renderAt: "{{ $model->id }}",
@include('charts::_partials.dimension.js')
dataFormat: 'json',
dataSource: {
'chart': {
"exportenabled": "1",
"exportatclient": "1",
@if($model->title)
'caption': "{!! $model->title !!}",
@endif
'yAxisName': "{!! $model->element_label !!}",
'bgColor': '#ffffff',
'borderAlpha': '20',
'canvasBorderAlpha': '0',
'usePlotGradientColor': '0',
'plotBorderAlpha': '10',
'rotatevalues': '1',
'valueFontColor': '#ffffff',
'showXAxisLine': '1',
'xAxisLineColor': '#999999',
'divlineColor': '#999999',
'divLineIsDashed': '1',
'showAlternateHGridColor': '0',
'subcaptionFontBold': '0',
'subcaptionFontSize': '14'
},
'categories': [{
'category': [
@foreach($model->labels as $l)
{
'label': "{{ $l }}",
},
@endforeach
]
}],
'dataset': [
@for ($i = 0; $i < count($model->datasets); $i++)
{
'seriesname': "{{ $model->datasets[$i]['label'] }}",
@if($model->colors and count($model->colors) > $i)
'color': "{{ $model->colors[$i] }}",
@endif
'data': [
@foreach($model->datasets[$i]['values'] as $v)
{
'value': {{ $v }}
},
@endforeach
]
},
@endfor
]
}
}).render()
});
</script>
@include('charts::_partials.container.div')

View File

@@ -0,0 +1,59 @@
<script type="text/javascript">
FusionCharts.ready(function () {
var {{ $model->id }} = new FusionCharts({
type: 'pie2d',
renderAt: "{{ $model->id }}",
@include('charts::_partials.dimension.js')
dataFormat: 'json',
dataSource: {
'chart': {
"exportenabled": "1",
"exportatclient": "1",
@if($model->title)
'caption': "{!! $model->title !!}",
@endif
'yAxisName': "{!! $model->element_label !!}",
'paletteColors': '#0075c2',
'bgColor': '#ffffff',
'showBorder': '0',
'use3DLighting': '0',
'showShadow': '0',
'enableSmartLabels': '1',
'startingAngle': '0',
'showPercentValues': '1',
'showPercentInTooltip': '0',
'decimals': '1',
'captionFontSize': '14',
'subcaptionFontSize': '14',
'subcaptionFontBold': '0',
'toolTipColor': '#ffffff',
'toolTipBorderThickness': '0',
'toolTipBgColor': '#000000',
'toolTipBgAlpha': '80',
'toolTipBorderRadius': '2',
'toolTipPadding': '5',
'showHoverEffect':'1',
'showLegend': '1',
'legendBgColor': '#ffffff',
'legendBorderAlpha': '0',
'legendShadow': '0',
'legendItemFontSize': '10',
'legendItemFontColor': '#666666'
},
'data': [
@for($i = 0; $i < count($model->values); $i++)
{
'label': "{!! $model->labels[$i] !!}",
'value': {{ $model->values[$i] }},
@if($model->colors)
'color': "{{ $model->colors[$i] }}",
@endif
},
@endfor
],
}
}).render()
});
</script>
@include('charts::_partials.container.div')

View File

@@ -0,0 +1,28 @@
<script type="text/javascript">
chart = google.charts.setOnLoadCallback(draw{{ $model->id }})
function draw{{ $model->id }}() {
var data = google.visualization.arrayToDataTable([
['Element', "{!! $model->element_label !!}"],
@for ($i = 0; $i < count($model->values); $i++)
["{!! $model->labels[$i] !!}", {{ $model->values[$i] }}],
@endfor
])
var options = {
@include('charts::_partials.dimension.js')
fontSize: 12,
@include('charts::google.titles')
@include('charts::google.colors')
legend: { position: 'top', alignment: 'end' }
};
var {{ $model->id }} = new google.visualization.AreaChart(document.getElementById("{{ $model->id }}"))
{{ $model->id }}.draw(data, options)
}
</script>
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif

View File

@@ -0,0 +1,43 @@
<script type="text/javascript">
google.charts.setOnLoadCallback(draw{{ $model->id }})
function draw{{ $model->id }}() {
var data = google.visualization.arrayToDataTable([
['', "{!! $model->element_label !!}",
@if($model->colors)
{ role: 'style' }
@endif
],
@for ($i = 0; $i < count($model->values); $i++)
[
"{!! $model->labels[$i] !!}", {{ $model->values[$i] }}
@if($model->colors)
,"{{ $model->colors[$i] }}"
@endif
],
@endfor
])
var options = {
@include('charts::_partials.dimension.js')
legend: { position: 'top', alignment: 'end' },
fontSize: 12,
@include('charts::google.titles')
@if($model->colors)
colors:[
@foreach($model->colors as $color)
"{{ $color}}",
@endforeach
],
@endif
};
var {{ $model->id }} = new google.visualization.ColumnChart(document.getElementById("{{ $model->id }}"))
{{ $model->id }}.draw(data, options)
}
</script>
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif

View File

@@ -0,0 +1,10 @@
@if($model->colors)
colors:[
@foreach($model->colors as $color)
"{{ $color }}",
@endforeach
],
@endif
@if($model->background_color)
backgroundColor: "{{ $model->background_color }}",
@endif

View File

@@ -0,0 +1,27 @@
<script type="text/javascript">
google.charts.setOnLoadCallback(draw{{ $model->id }})
function draw{{ $model->id }}() {
var data = google.visualization.arrayToDataTable([
['Element', 'Value'],
@for ($l = 0; $l < count($model->values); $l++)
["{!! $model->labels[$i] !!}", {{ $model->values[$i] }}],
@endfor
])
var options = {
@include('charts::_partials.dimension.js')
fontSize: 12,
pieHole: 0.4,
@include('charts::google.titles')
@include('charts::google.colors')
};
var {{ $model->id }} = new google.visualization.PieChart(document.getElementById("{{ $model->id }}"))
{{ $model->id }}.draw(data, options)
}
</script>
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif

View File

@@ -0,0 +1,74 @@
<script type="text/javascript">
google.charts.setOnLoadCallback(draw{{ $model->id }})
function draw{{ $model->id }}() {
var data = google.visualization.arrayToDataTable([
['Element', 'Value'],
["{!! $model->element_label !!}", {{ $model->values[0] }}],
])
var options = {
@include('charts::_partials.dimension.js')
@if(count($model->values) >= 2 and $model->values[1] <= $model->values[0])
@php($min = $model->values[1])
min: {{ $min }},
@else
@php($min = 0)
@endif
@if(count($model->values) >= 3 and $model->values[2] >= $model->values[0])
@php($max = $model->values[2])
max: {{ $max }},
@else
@php($max = 100)
@endif
@if($model->gauge_style == 'right')
// Calculate warning area
@php
$low_warning = round(0.40 * $max, 2)
$warning = round(0.25 * $max, 2)
$max_warning = round(0.10 * $max, 2)
@endphp
greenColor: '#c8e6c9', yellowColor: '#ffd54f', redColor: '#e57373',
greenFrom: $low_warning, greenTo: $max,
yellowFrom: $max_warning, yellowTo: $low_warning,
redFrom: $min, redTo: $max_warning,
@elseif($model->gauge_style == 'center') {
// Calculate warning area
@php
$warning = round(0.25 * $max, 2)
$warning2 = round(0.75 * $max, 2)
@endphp
greenColor: '#c8e6c9', yellowColor: '#ffd54f', redColor: '#ffd54f',
greenFrom: $warning, greenTo: $warning2,
yellowFrom: $min, yellowTo: $warning,
redFrom: $warning2, redTo: $max,
@else
// Calculate warning area
@php
$low_warning = round(0.60 * $max, 2)
$warning = round(0.75 * $max, 2)
$max_warning = round(0.90 * $max, 2)
@endphp
greenColor: '#c8e6c9', yellowColor: '#ffd54f', redColor: '#e57373',
greenFrom: $min, greenTo: $low_warning,
yellowFrom: $low_warning, yellowTo: $max_warning,
redFrom: $max_warning, redTo: $max,
@endif
minorTicks: 10,
};
var {{ $model->id }} = new google.visualization.Gauge(document.getElementById("{{ $model->id }}"))
{{ $model->id }}.draw(data, options)
}
</script>
@if(!$model->customId)
@include('charts::_partials/container.div-titled')
@endif

View File

@@ -0,0 +1,34 @@
<script type="text/javascript">
google.charts.setOnLoadCallback(draw{{ $model->id }})
function draw{{ $model->id }}() {
var data = google.visualization.arrayToDataTable([
['Country', "{!! $model->element_label !!}"],
@for ($i = 0; $i < count($model->values); $i++)
["{{ $model->labels[$i] }}", {{ $model->values[$i] }}],
@endfor
])
var options = {
@include('charts::_partials.dimension.js')
colorAxis: {
colors: [
@if($model->colors and count($model->colors >= 2))
"{{ $model->colors[0] }}", "{{ $model->colors[1] }}"
@endif
]
},
region: "{{ $model->region ? $model->region : 'world' }}",
datalessRegionColor: "#e0e0e0",
defaultColor: "#607D8",
};
var {{ $model->id }} = new google.visualization.GeoChart(document.getElementById("{{ $model->id }}"))
{{ $model->id }}.draw(data, options)
}
</script>
@if(!$model->customId)
@include('charts::_partials/container.div-titled')
@endif

View File

@@ -0,0 +1,29 @@
<script type="text/javascript">
chart = google.charts.setOnLoadCallback(drawChart)
function drawChart() {
var data = google.visualization.arrayToDataTable([
[
'Element', "{!! $model->element_label !!}"],
@for ($i = 0; $i < count($model->values); $i++)
["{!! $model->labels[$i] !!}", {{ $model->values[$i] }}],
@endfor
])
var options = {
@include('charts::_partials.dimension.js')
fontSize: 12,
@include('charts::google.titles')
@include('charts::google.colors')
legend: { position: 'top', alignment: 'end' }
};
var chart = new google.visualization.LineChart(document.getElementById("{{ $model->id }}"))
chart.draw(data, options)
}
</script>
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif

View File

@@ -0,0 +1,38 @@
<script type="text/javascript">
chart = google.charts.setOnLoadCallback(draw{{ $model->id }})
function draw{{ $model->id }}() {
var data = google.visualization.arrayToDataTable([
[
'Element',
@for ($i = 0; $i < count($model->datasets); $i++)
"{{ $model->datasets[$i]['label'] }}",
@endfor
],
@for($l = 0; $l < count($model->labels); $l++)
[
"{{ $model->labels[$l] }}",
@for ($i = 0; $i < count($model->datasets); $i++)
{{ $model->datasets[$i]['values'][$l] }},
@endfor
],
@endfor
])
var options = {
@include('charts::_partials.dimension.js')
fontSize: 12,
@include('charts::google.titles')
@include('charts::google.colors')
legend: { position: 'top', alignment: 'end' }
};
var {{ $model->id }} = new google.visualization.AreaChart(document.getElementById("{{ $model->id }}"))
{{ $model->id }}.draw(data, options)
}
</script>
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif

View File

@@ -0,0 +1,38 @@
<script type="text/javascript">
google.charts.setOnLoadCallback(draw{{ $model->id }})
function draw{{ $model->id }}() {
var data = google.visualization.arrayToDataTable([
[
'Element',
@for ($i = 0; $i < count($model->datasets); $i++)
"{{ $model->datasets[$i]['label'] }}",
@endfor
],
@for ($l = 0; $l < count($model->labels); $l++)
[
"{{ $model->labels[$l] }}",
@for ($i = 0; $i < count($model->datasets); $i++)
{{ $model->datasets[$i]['values'][$l] }},
@endfor
],
@endfor
])
var options = {
@include('charts::_partials.dimension.js')
legend: { position: 'top', alignment: 'end' },
fontSize: 12,
@include('charts::google.titles')
@include('charts::google.colors')
};
var {{ $model->id }} = new google.visualization.ColumnChart(document.getElementById("{{ $model->id }}"))
{{ $model->id }}.draw(data, options)
}
</script>
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif

View File

@@ -0,0 +1,38 @@
<script type="text/javascript">
chart = google.charts.setOnLoadCallback(drawChart)
function drawChart() {
var data = google.visualization.arrayToDataTable([
[
'Element',
@for ($i = 0; $i < count($model->datasets); $i++)
"{{ $model->datasets[$i]['label'] }}",
@endfor
],
@for($l = 0; $l < count($model->labels); $l++)
[
"{{ $model->labels[$l] }}",
@for ($i = 0; $i < count($model->datasets); $i++)
{{ $model->datasets[$i]['values'][$l] }},
@endfor
],
@endfor
])
var options = {
@include('charts::_partials.dimension.js')
fontSize: 12,
@include('charts::google.titles')
@include('charts::google.colors')
legend: { position: 'top', alignment: 'end' }
};
var chart = new google.visualization.LineChart(document.getElementById("{{ $model->id }}"))
chart.draw(data, options)
}
</script>
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif

View File

@@ -0,0 +1,26 @@
<script type="text/javascript">
google.charts.setOnLoadCallback(drawPieChart)
function drawPieChart() {
var data = google.visualization.arrayToDataTable([
['Element', 'Value'],
@for($i = 0; $i < count($model->values); $i++)
["{!! $model->labels[$i] !!}", {{ $model->values[$i] }}],
@endfor
])
var options = {
@include('charts::_partials.dimension.js')
fontSize: 12,
@include('charts::google.titles')
@include('charts::google.colors')
};
var chart = new google.visualization.PieChart(document.getElementById("{{ $model->id }}"))
chart.draw(data, options)
}
</script>
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif

View File

@@ -0,0 +1,84 @@
<script type="text/javascript">
google.charts.setOnLoadCallback(draw{{ $model->id }})
function draw{{ $model->id }}() {
var data = google.visualization.arrayToDataTable([
['Element', 'Value'],
@if($model->values)
["{!! $model->element_label !!}", {{ $model->values[0] }}],
@else
["{!! $model->element_label !!}", 0],
@endif
])
var options = {
@include('charts::_partials.dimension.js')
@if(count($model->values) >= 2 and $model->values[1] <= $model->values[0])
@php($min = $model->values[1])
min: {{ $min }},
@else
@php($min = 0)
@endif
@if(count($model->values) >= 3 and $model->values[2] >= $model->values[0])
@php($max = $model->values[2])
max: {{ $max }},
@else
@php($max = 100)
@endif
@if($model->gauge_style == 'right')
// Calculate warning area
@php
$low_warning = round(0.40 * $max, 2);
$warning = round(0.25 * $max, 2);
$max_warning = round(0.10 * $max, 2);
@endphp
greenColor: '#c8e6c9', yellowColor: '#ffd54f', redColor: '#e57373',
greenFrom: {{ $low_warning }}, greenTo: {{ $max }},
yellowFrom: {{ $max_warning }}, yellowTo: {{ $low_warning }},
redFrom: {{ $min }}, redTo: {{ $max_warning }},
@elseif($model->gauge_style == 'center') {
// Calculate warning area
@php
$warning = round(0.25 * $max, 2);
$warning2 = round(0.75 * $max, 2);
@endphp
greenColor: '#c8e6c9', yellowColor: '#ffd54f', redColor: '#ffd54f',
greenFrom: {{ $warning }}, greenTo: {{ $warning2 }},
yellowFrom: {{ $min }}, yellowTo: {{ $warning }},
redFrom: {{ $warning2 }}, redTo: {{ $max }},
@else
// Calculate warning area
@php
$low_warning = round(0.60 * $max, 2);
$warning = round(0.75 * $max, 2);
$max_warning = round(0.90 * $max, 2);
@endphp
greenColor: '#c8e6c9', yellowColor: '#ffd54f', redColor: '#e57373',
greenFrom: {{ $min }}, greenTo: {{ $low_warning }},
yellowFrom: {{ $low_warning }}, yellowTo: {{ $max_warning }},
redFrom: {{ $max_warning }}, redTo: {{ $max }},
@endif
minorTicks: 10,
};
var {{ $model->id }} = new google.visualization.Gauge(document.getElementById("{{ $model->id }}"))
{{ $model->id }}.draw(data, options)
setInterval(function() {
$.getJSON("{{ $model->url }}", function( jdata ) {
data.setValue(0, 1, jdata["{{ $model->value_name }}"])
{{ $model->id }}.draw(data, options)
})
}, {{ $model->interval }})
}
</script>
@if(!$model->customId)
@include('charts::_partials/container.div-titled')
@endif

View File

@@ -0,0 +1,33 @@
<script type="text/javascript">
chart = google.charts.setOnLoadCallback(drawChart)
function drawChart() {
var data = google.visualization.arrayToDataTable([
[
'Element', "{!! $model->element_label !!}"],
@for ($i = 0; $i < count($model->values); $i++)
["{!! $model->labels[$i] !!}", {{ $model->values[$i] }}],
@endfor
])
var options = {
@include('charts::_partials.dimension.js')
fontSize: 12,
@include('charts::google.titles')
@include('charts::google.colors')
@if(!$model->legend)
legend: null
@else
legend: { position: 'top', alignment: 'end' }
@endif
};
var chart = new google.visualization.ScatterChart(document.getElementById("{{ $model->id }}"))
chart.draw(data, options)
}
</script>
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif

View File

@@ -0,0 +1,10 @@
@if($model->title)
title: "{!! $model->title !!}",
@endif
@if($model->x_axis_title)
hAxis: {title: "{{ $model->x_axis_title }}"},
@endif
@if($model->y_axis_title)
vAxis: {title: "{{ $model->y_axis_title }}"},
@endif

View File

@@ -0,0 +1,67 @@
<script type="text/javascript">
$(function () {
var {{ $model->id }} = new Highcharts.Chart({
chart: {
type: 'area',
renderTo: "{{ $model->id }}",
@include('charts::_partials.dimension.js2')
},
@if($model->title)
title: {
text: "{!! $model->title !!}",
x: -20 //center
},
@endif
@if(!$model->credits)
credits: {
enabled: false
},
@endif
xAxis: {
title: {
text: "{!! $model->x_axis_title !!}"
},
categories: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
]
},
yAxis: {
title: {
text: "{!! $model->y_axis_title === null ? $model->element_label : $model->y_axis_title !!}"
},
plotLines: [{
value: 0,
height: 0.5,
width: 1,
color: '#808080'
}]
},
@if($model->colors)
plotOptions: {
series: {
color: "{{ $model->colors[0] }}"
}
},
@endif
legend: {
@if(!$model->legend)
enabled: false,
@endif
},
series: [{
name: "{!! $model->element_label !!}",
data: [
@foreach($model->values as $dta)
{{ $dta }},
@endforeach
]
}]
})
});
</script>
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif

View File

@@ -0,0 +1,66 @@
<script type="text/javascript">
$(function () {
var {{ $model->id }} = new Highcharts.Chart({
colors: [
@foreach($model->colors as $c)
"{{ $c }}",
@endforeach
],
chart: {
renderTo: "{{ $model->id }}",
@include('charts::_partials.dimension.js2')
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'column'
},
@if($model->title)
title: {
text: "{!! $model->title !!}"
},
@endif
@if(!$model->credits)
credits: {
enabled: false
},
@endif
plotOptions: {
series: {
colorByPoint: true,
},
},
xAxis: {
title: {
text: "{!! $model->x_axis_title !!}"
},
categories: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
],
},
yAxis: {
title: {
text: "{!! $model->y_axis_title === null ? $model->element_label : $model->y_axis_title !!}"
},
},
legend: {
@if(!$model->legend)
enabled: false,
@endif
},
series: [{
name: "{!! $model->element_label !!}",
data: [
@foreach($model->values as $dta)
{{ $dta }},
@endforeach
]
}]
})
});
</script>
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif

View File

@@ -0,0 +1,66 @@
<script type="text/javascript">
$(function () {
var {{ $model->id }} = new Highcharts.Chart({
colors: [
@foreach($model->colors as $c)
"{{ $c }}",
@endforeach
],
chart: {
renderTo: "{{ $model->id }}",
@include('charts::_partials.dimension.js2')
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
@if($model->title)
title: {
text: "{!! $model->title !!}"
},
@endif
@if(!$model->credits)
credits: {
enabled: false
},
@endif
tooltip: {
pointFormat: '{point.y} <b>({point.percentage:.1f}%)</strong>'
},
plotOptions: {
pie: {
innerSize: '50%',
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</strong>: {point.y} ({point.percentage:.1f}%)',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
legend: {
@if(!$model->legend)
enabled: false
@endif
},
series: [{
colorByPoint: true,
data: [
@for ($l = 0; $l < count($model->values); $l++)
{
name: "{!! $model->labels[$l] !!}",
y: {{ $model->values[$l] }}
},
@endfor
]
}]
})
});
</script>
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif

View File

@@ -0,0 +1,71 @@
@php
// Get the max / min index
$max = 0;
$min = $model->values ? $model->values[0] : 0;
@endphp
@foreach($model->values as $dta)
@if($dta > $max)
@php($max = $dta)
@elseif($dta < $min)
@php($min = $dta)
@endif
@endforeach
<script type="text/javascript">
$(function () {
var {{ $model->id }} = new Highcharts.Map({
chart: {
renderTo: "{{ $model->id }}",
@include('charts::_partials.dimension.js2')
},
@if($model->title)
title: {
text: "{!! $model->title !!}"
},
@endif
@if(!$model->credits)
credits: {
enabled: false
},
@endif
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true
},
colorAxis: {
min: {{ $min }},
@if($model->colors and count($model->colors) >= 2)
minColor: "{{ $model->colors[0] }}",
@endif
max: {{ $max }},
@if($model->colors and count($model->colors) >= 2)
maxColor: "{{ $model->colors[1] }}",
@endif
},
series : [{
data : [
@for ($i = 0; $i < count($model->values); $i++)
{
'code': "{{ $model->labels[$i] }}",
'value': {{ $model->values[$i] }}
},
@endfor
],
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: "{!! $model->element_label !!}",
states: {
hover: {
color: '#BADA55'
}
},
}]
})
});
</script>
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif

View File

@@ -0,0 +1,66 @@
<script type="text/javascript">
$(function () {
var {{ $model->id }} = new Highcharts.Chart({
chart: {
renderTo: "{{ $model->id }}",
@include('charts::_partials.dimension.js2')
},
@if($model->title)
title: {
text: "{!! $model->title !!}",
x: -20 //center
},
@endif
@if(!$model->credits)
credits: {
enabled: false
},
@endif
xAxis: {
title: {
text: "{{ $model->x_axis_title }}"
},
categories: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
],
},
yAxis: {
title: {
text: "{!! $model->y_axis_title === null ? $model->element_label : $model->y_axis_title !!}"
},
plotLines: [{
value: 0,
height: 0.5,
width: 1,
color: '#808080'
}]
},
@if($model->colors)
plotOptions: {
series: {
color: "{{ $model->colors[0] }}"
},
},
@endif
legend: {
@if(!$model->legend)
enabled: false,
@endif
},
series: [{
name: "{!! $model->element_label !!}",
data: [
@foreach($model->values as $dta)
{{ $dta }},
@endforeach
]
}]
});
});
</script>
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif

View File

@@ -0,0 +1,58 @@
<script type="text/javascript">
$(function () {
var {{ $model->id }} = new Highcharts.Chart({
chart: {
type: 'area',
renderTo: "{{ $model->id }}",
@include('charts::_partials.dimension.js2')
},
@if($model->title)
title: {
text: "{!! $model->title !!}",
x: -20 //center
},
@endif
@if(!$model->credits)
credits: {
enabled: false
},
@endif
xAxis: {
categories: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
]
},
yAxis: {
title: {
text: "{!! $model->y_axis_title === null ? $model->element_label : $model->y_axis_title !!}"
},
},
legend: {
@if(!$model->legend)
enabled: false,
@endif
},
series: [
@for ($i = 0; $i < count($model->datasets); $i++)
{
name: "{!! $model->datasets[$i]['label'] !!}",
@if($model->colors && count($model->colors) > $i)
color: "{{ $model->colors[$i] }}",
@endif
data: [
@foreach($model->datasets[$i]['values'] as $dta)
{{ $dta }},
@endforeach
]
},
@endfor
]
})
});
</script>
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif

View File

@@ -0,0 +1,67 @@
<script type="text/javascript">
$(function () {
var {{ $model->id }} = new Highcharts.Chart({
chart: {
type: 'areaspline',
renderTo: "{{ $model->id }}",
@include('charts::_partials.dimension.js2')
},
@if($model->title)
title: {
text: "{!! $model->title !!}",
x: -20 //center
},
@endif
@if(!$model->credits)
credits: {
enabled: false
},
@endif
xAxis: {
categories: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
]
},
yAxis: {
title: {
text: "{!! $model->y_axis_title === null ? $model->element_label : $model->y_axis_title !!}"
},
},
legend: {
@if(!$model->legend)
enabled: false,
@endif
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [
@for ($i = 0; $i < count($model->datasets); $i++)
{
name: "{!! $model->datasets[$i]['label'] !!}",
@if($model->colors && count($model->colors) > $i)
color: "{{ $model->colors[$i] }}",
@endif
data: [
@foreach($model->datasets[$i]['values'] as $dta)
{{ $dta }},
@endforeach
]
},
@endfor
]
})
});
</script>
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif

View File

@@ -0,0 +1,66 @@
<script type="text/javascript">
$(function () {
var {{ $model->id }} = new Highcharts.Chart({
chart: {
renderTo: "{{ $model->id }}",
@include('charts::_partials.dimension.js2')
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'column'
},
@if($model->title)
title: {
text: "{!! $model->title !!}"
},
@endif
@if(!$model->credits)
credits: {
enabled: false
},
@endif
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
xAxis: {
categories: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
],
},
yAxis: {
title: {
text: "{!! $model->y_axis_title === null ? $model->element_label : $model->y_axis_title !!}"
},
},
legend: {
@if(!$model->legend)
enabled: false,
@endif
},
series: [
@for ($i = 0; $i < count($model->datasets); $i++)
{
name: "{!! $model->datasets[$i]['label'] !!}",
@if($model->colors && count($model->colors) > $i)
color: "{{ $model->colors[$i] }}",
@endif
data: [
@foreach($model->datasets[$i]['values'] as $dta)
{{ $dta }},
@endforeach
]
},
@endfor
]
})
});
</script>
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif

View File

@@ -0,0 +1,57 @@
<script type="text/javascript">
$(function () {
var {{ $model->id }} = new Highcharts.Chart({
chart: {
renderTo: "{{ $model->id }}",
@include('charts::_partials.dimension.js2')
},
@if($model->title)
title: {
text: "{!! $model->title !!}",
x: -20 //center
},
@endif
@if(!$model->credits)
credits: {
enabled: false
},
@endif
xAxis: {
categories: [
@foreach($model->labels as $label)
"{!! $label !!}",
@endforeach
]
},
yAxis: {
title: {
text: "{!! $model->y_axis_title === null ? $model->element_label : $model->y_axis_title !!}"
},
},
legend: {
@if(!$model->legend)
enabled: false,
@endif
},
series: [
@for ($i = 0; $i < count($model->datasets); $i++)
{
name: "{!! $model->datasets[$i]['label'] !!}",
@if($model->colors && count($model->colors) > $i)
color: "{{ $model->colors[$i] }}",
@endif
data: [
@foreach($model->datasets[$i]['values'] as $dta)
{{ $dta }},
@endforeach
]
},
@endfor
]
})
});
</script>
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif

View File

@@ -0,0 +1,65 @@
<script type="text/javascript">
$(function () {
var {{ $model->id }} = new Highcharts.Chart({
colors: [
@foreach($model->colors as $c)
"{{ $c }}",
@endforeach
],
chart: {
renderTo: "{{ $model->id }}",
@include('charts::_partials.dimension.js2')
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
@if($model->title)
title: {
text: "{!! $model->title !!}",
},
@endif
@if(!$model->credits)
credits: {
enabled: false
},
@endif
tooltip: {
pointFormat: '{point.y} <b>({point.percentage:.1f}%)</strong>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</strong>: {point.y} ({point.percentage:.1f}%)',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
legend: {
@if(!$model->legend)
enabled: false
@endif
},
series: [{
colorByPoint: true,
data: [
@for($i = 0; $i < count($model->values); $i++)
{
name: "{!! $model->labels[$i] !!}",
y: {{ $model->values[$i] }}
},
@endfor
]
}]
})
});
</script>
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif

View File

@@ -0,0 +1,80 @@
<script type="text/javascript">
$(function () {
Highcharts.setOptions({global: { useUTC: false } })
{{ $model->id }} = new Highcharts.Chart({
chart: {
renderTo: "{{ $model->id }}",
type: 'area',
events: {
load: update{{ $model->id }}
},
@include('charts::_partials.dimension.js2')
},
@if($model->title)
title: {
text: "{!! $model->title !!}",
},
@endif
@if(!$model->credits)
credits: {
enabled: false
},
@endif
xAxis: {
type: 'datetime',
},
yAxis: {
title: {
text: "{!! $model->element_label !!}"
},
plotLines: [{
value: 0,
height: 0.5,
width: 1,
color: '#808080'
}]
},
@if($model->colors)
plotOptions: {
series: {
color: "{{ $model->colors[0] }}"
}
},
@endif
legend: {
@if(!$model->legend)
enabled: false,
@endif
},
series: [{
name: "{!! $model->element_label !!}",
data: [],
pointStart: new Date().getTime(),
pointInterval: {{ ( $model->interval / 1000 ) * 1000 }} // one day
}]
})
function update{{ $model->id }}() {
$.ajax({
url: "{{ $model->url }}",
success: function(point) {
var series = {{ $model->id }}.series[0],
shift = series.data.length >= {{ $model->max_values }}; // shift if the series is longer than 20
// add the point
{{ $model->id }}.series[0].addPoint(point["{{ $model->value_name }}"], true, shift)
{{ $model->id }}.xAxis.categories
// call it again after one second
setTimeout(update{{ $model->id }}, {{ $model->interval }})
},
cache: false
})
}
});
</script>
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif

View File

@@ -0,0 +1,84 @@
<script type="text/javascript">
$(function () {
Highcharts.setOptions({global: { useUTC: false } })
{{ $model->id }} = new Highcharts.Chart({
colors: [
@foreach($model->colors as $c)
"{{ $c }}",
@endforeach
],
chart: {
renderTo: "{{ $model->id }}",
type: 'column',
events: {
load: update{{ $model->id }}
},
@include('charts::_partials.dimension.js2')
},
@if($model->title)
title: {
text: "{!! $model->title !!}",
x: -20 //center
},
@endif
@if(!$model->credits)
credits: {
enabled: false
},
@endif
xAxis: {
type: 'datetime',
},
yAxis: {
title: {
text: "{!! $model->element_label !!}"
},
plotLines: [{
value: 0,
height: 0.5,
width: 1,
color: '#808080'
}]
},
plotOptions: {
series: {
colorByPoint: true,
},
},
legend: {
@if(!$model->legend)
enabled: false,
@endif
},
series: [{
name: "{!! $model->element_label !!}",
data: [],
pointStart: new Date().getTime(),
pointInterval: {{ $model->interval }},
}]
})
function update{{ $model->id }}() {
$.ajax({
url: "{{ $model->url }}",
success: function(point) {
var series = {{ $model->id }}.series[0],
shift = series.data.length >= {{ $model->max_values }} // shift if the series is longer than 20
// add the point
{{ $model->id }}.series[0].addPoint(point["{{ $model->value_name }}"], true, shift)
{{ $model->id }}.xAxis.categories
// call it again after one second
setTimeout(update{{ $model->id }}, {{ $model->interval }})
},
cache: false
})
}
});
</script>
@if(!$model->customId)
@include('charts::_partials.container.div')
@endif

Some files were not shown because too many files have changed in this diff Show More