Визуализация данных с помощью Highcharts в laravel

Здесь мы рассмотрим визуализацию данных с помощью Highcharts. Как правило, визуализация данных представляет данные в графическом или графическом формате, что помогает читателям легко понять данные.

Highcharts.com предоставляет множество различных типов диаграмм — линейные, областные, столбчатые, столбчатые, круговые и многие другие. Здесь мы реализуем линейную диаграмму с необходимыми данными, полученными из базы данных.

В этом примере мы показываем годовые продажи 10 разных компаний, таблицу базы данных можно найти здесь.

Файл модели будет выглядеть так:

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class CompanyDetails extends Model {
    protected $table = 'companydetails';
    public $timestamps = false;
}

Сначала мы получаем все данные из базы данных, а затем конвертируем код javascript highcharts в PHP и передаем данные в представление, чтобы можно было увидеть визуализацию данных.

Мы получаем данные от каждой компании отдельно,

$y2006Details = CompanyDetails::where ( 'year', '2006' )->get ();
        $y2007Details = CompanyDetails::where ( 'year', '2007' )->get ();
        $y2008Details = CompanyDetails::where ( 'year', '2008' )->get ();
        $y2009Details = CompanyDetails::where ( 'year', '2009' )->get ();
        $y2010Details = CompanyDetails::where ( 'year', '2010' )->get ();
        $y2011Details = CompanyDetails::where ( 'year', '2011' )->get ();
        $y2012Details = CompanyDetails::where ( 'year', '2012' )->get ();
        $y2013Details = CompanyDetails::where ( 'year', '2013' )->get ();
        $y2014Details = CompanyDetails::where ( 'year', '2014' )->get ();
        $y2015Details = CompanyDetails::where ( 'year', '2015' )->get ();

Мы получаем все названия компаний,

$companyNames = CompanyDetails::select ( 'company' )->groupBy ( 'company' )->get ();

Теперь мы помещаем все названия компаний в массив, чтобы передать этот массив в highcharts.

foreach ( $companyNames as $company )
    array_push ( $comapanyNamesArray, $company->company );

Теперь мы помещаем каждую информацию о продажах компании в массив,

foreach ( $y2006Details as $det )
            array_push ( $y2006, ( int ) $det->sales );
        foreach ( $y2007Details as $det )
            array_push ( $y2007, ( int ) $det->sales );
        foreach ( $y2008Details as $det )
            array_push ( $y2008, ( int ) $det->sales );
        foreach ( $y2009Details as $det )
            array_push ( $y2009, ( int ) $det->sales );
        foreach ( $y2010Details as $det )
            array_push ( $y2010, ( int ) $det->sales );
        foreach ( $y2011Details as $det )
            array_push ( $y2011, ( int ) $det->sales );
        foreach ( $y2012Details as $det )
            array_push ( $y2012, ( int ) $det->sales );
        foreach ( $y2013Details as $det )
            array_push ( $y2013, ( int ) $det->sales );
        foreach ( $y2014Details as $det )
            array_push ( $y2014, ( int ) $det->sales );
        foreach ( $y2015Details as $det )
            array_push ( $y2015, ( int ) $det->sales );

Теперь мы помещаем каждый из этого массива в массив, чтобы передать эти данные в highcharts,

array_push ( $dataArray, $y2006, $y2007, $y2008,
        $y2009, $y2010, $y2011, $y2012, $y2013, 
        $y2014, $y2015 );

Передача имени и данных для массива серий в highcharts.

for($i = 0; $i < count ( $dataArray ); $i ++)
    $chartArray ["series"] [] = array (
            "name" => $comapanyNamesArray [$i],
            "data" => $dataArray [$i] 
    );

Теперь мы передаем некоторые данные, такие как заголовок диаграммы, имя оси X, имя оси Y, в highcharts.

$chartArray ["chart"] = array (
        "type" => "line" 
);
$chartArray ["title"] = array (
        "text" => "Yearly sales" 
);
$chartArray ["credits"] = array (
        "enabled" => false 
);
$chartArray ["xAxis"] = array (
        "categories" => array () 
);
$chartArray ["tooltip"] = array (
        "valueSuffix" => "$" 
);
$chartArray ["xAxis"] = array (
        "categories" => $categoryArray 
);
$chartArray ["yAxis"] = array (
        "title" => array (
        "text" => "Sales ( $ )" 
        ) 
);

Мы передаем этот chartArray приветственному просмотру.

return view ( 'welcome' )->withChartarray ( $chartArray );

В представлении мы просто передаем этот массив в highcharts.

<script type="text/javascript">
$(function() {
  $('#container').highcharts( <?php echo json_encode($chartarray) ?>)
});
</script>

Результат нашей визуализации

Визуализация данных с помощью Highcharts в laravel

Исходное сообщение:

Рабочая демонстрация:

Источник на гитхабе:

Вопросы по теме