<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>tutorial membuat grafik dengan highchart dan laravel &#8211; Blue Creative</title>
	<atom:link href="https://bluecreative.co.id/tag/tutorial-membuat-grafik-dengan-highchart-dan-laravel/feed/" rel="self" type="application/rss+xml" />
	<link>https://bluecreative.co.id</link>
	<description>Jasa Website Bali &#124; Web Design Bali &#124; Website Murah Bali</description>
	<lastBuildDate>Sat, 01 Sep 2018 04:24:36 +0000</lastBuildDate>
	<language>id</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.5</generator>

<image>
	<url>https://bluecreative.co.id/wp-content/uploads/2024/11/cropped-blue-favicon-32x32.jpeg</url>
	<title>tutorial membuat grafik dengan highchart dan laravel &#8211; Blue Creative</title>
	<link>https://bluecreative.co.id</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Tutorial  Membuat Grafik dengan Highcharts dan Laravel</title>
		<link>https://bluecreative.co.id/tutorial-membuat-grafik-dengan-highcharts-dan-laravel/</link>
					<comments>https://bluecreative.co.id/tutorial-membuat-grafik-dengan-highcharts-dan-laravel/#respond</comments>
		
		<dc:creator><![CDATA[Eka Parianthana]]></dc:creator>
		<pubDate>Mon, 25 Jun 2018 18:02:55 +0000</pubDate>
				<category><![CDATA[Laravel]]></category>
		<category><![CDATA[highcharts]]></category>
		<category><![CDATA[tutorial membuat grafik dengan highchart dan laravel]]></category>
		<guid isPermaLink="false">https://bluecreative.co.id/?p=2222</guid>

					<description><![CDATA[Tutorial Membuat Grafik dengan Highchart.js dan Laravel  &#124; Dalam pengembangan sebuah project sering kali kita dihadapankan dengan rekap data dalam bentuk grafik. Grafik sangat baik dimanfaatkan<span class="excerpt-hellip"> […]</span>]]></description>
										<content:encoded><![CDATA[<p>Tutorial Membuat Grafik dengan Highchart.js dan Laravel  | Dalam pengembangan sebuah project sering kali kita dihadapankan dengan rekap data dalam bentuk grafik. Grafik sangat baik dimanfaatkan untuk menyajikan data agar mudah dipahami oleh pengguna. Oleh karena itu, saya mencoba untuk memberikan tutorial membuat grafik dengan highchart dan laravel. Langkah-langkahnya sebgai berikut.</p>
<p>&nbsp;</p>
<ol>
<li>Buatlah tabel buku tamu seperti gambar dibawah ini</li>
</ol>
<p><img decoding="async" class="alignnone size-medium wp-image-2223" src="https://bluecreative.co.id/wp-content/uploads/2018/06/Screen-Shot-2018-06-26-at-01.12.21-300x157.png" alt="" width="300" height="157" srcset="https://bluecreative.co.id/wp-content/uploads/2018/06/Screen-Shot-2018-06-26-at-01.12.21-300x157.png 300w, https://bluecreative.co.id/wp-content/uploads/2018/06/Screen-Shot-2018-06-26-at-01.12.21-768x403.png 768w, https://bluecreative.co.id/wp-content/uploads/2018/06/Screen-Shot-2018-06-26-at-01.12.21-1024x537.png 1024w, https://bluecreative.co.id/wp-content/uploads/2018/06/Screen-Shot-2018-06-26-at-01.12.21-260x136.png 260w, https://bluecreative.co.id/wp-content/uploads/2018/06/Screen-Shot-2018-06-26-at-01.12.21-50x26.png 50w, https://bluecreative.co.id/wp-content/uploads/2018/06/Screen-Shot-2018-06-26-at-01.12.21-143x75.png 143w, https://bluecreative.co.id/wp-content/uploads/2018/06/Screen-Shot-2018-06-26-at-01.12.21-1250x655.png 1250w, https://bluecreative.co.id/wp-content/uploads/2018/06/Screen-Shot-2018-06-26-at-01.12.21-400x210.png 400w, https://bluecreative.co.id/wp-content/uploads/2018/06/Screen-Shot-2018-06-26-at-01.12.21.png 1476w" sizes="(max-width:767px) 300px, 300px" /></p>
<p>2. Membuat Model Buku Tamu</p>
<pre class="lang:default decode:true " title="Model BukuTamu">&lt;?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class BukuTamu extends Model
{
    protected $table = 'buku_tamu';
    protected $primaryKey = 'id_buku_tamu';
    protected $guarded = [];


    public static function getJumlahTamuJenisPerTahun(){


    	$tahun_awal = date('Y') - 5;
    	$tahun_akhir = date('Y');

    	$category = [];

    	$series[0]['name'] = 'dalam negeri';
    	$series[1]['name'] = 'luar negeri';
    	


    	$j = 0;
    	for ($i=$tahun_awal; $i &lt;= $tahun_akhir ; $i++) { 
    		$category[] = $i;

    		$series[0]['data'][] = Self::where('jenis_tamu', '=', 'dalam negeri')-&gt;where('tgl_kunjungan','like', $i.'%')-&gt;count();
    		$series[1]['data'][] = Self::where('jenis_tamu', '=', 'luar negeri')-&gt;where('tgl_kunjungan','like', $i.'%')-&gt;count();
    		
    	}


    	return ['category' =&gt; $category, 'series' =&gt; $series];


    }
}</pre>
<p>3. Membuat BukuTamuController</p>
<pre class="lang:default decode:true ">&lt;?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class BukuTamuController extends Controller
{
  public function grafik(){

        $jml_tamu = \App\BukuTamu::getJumlahTamuJenisPerTahun();
        
        return view('management.bukutamu.grafik', compact('jml_tamu'));


    }
}</pre>
<p>4. Menambahkan pada router grafik pada web.php</p>
<pre class="lang:default decode:true " title="web.php">Route::get('bukutamu/grafik', 'BukuTamuController@grafik');
</pre>
<p>&nbsp;</p>
<p>5. Membuat file view yaitu grafik.blade.php</p>
<p>Sebelumnya, Download Library Highchart terlebih dahulu <a href="https://github.com/highcharts/highcharts">disini</a></p>
<pre class="lang:default decode:true ">@extends('master')


@section('header')
	&lt;link rel="stylesheet" type="text/css" href="{{ url('assets/plugins/highcart/code/css/highcharts.css') }}"&gt;
@stop
@section('content')
	
	&lt;section class="content-header"&gt;
		&lt;h1&gt;
	    	Grafik Buku Tamu
	    	
	  	&lt;/h1&gt;
	&lt;/section&gt;

	&lt;section class="content"&gt;

		&lt;div class="row"&gt;


			
			

			&lt;div class="col-md-6"&gt;
				&lt;div class="panel panel-default"&gt;
					&lt;div class="panel-body"&gt;
						&lt;div id="jml_tamu"&gt;&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;

			


		&lt;/div&gt;

	&lt;/section&gt;

@stop

@section('footer')
	
	&lt;script type="text/javascript" src="{{ url('assets/plugins/highcart/code/highcharts.js') }}"&gt;&lt;/script&gt;
	&lt;script type="text/javascript"&gt;
		$(function(){

			


			Highcharts.chart('jml_tamu', {
			    chart: {
			        type: 'column'
			    },
			    title: {
			        text: 'Perbandingan Berdasarkan Jenis Tamu'
			    },
			    subtitle: {
			        text: 'Per Tahun'
			    },
			    xAxis: {
			        categories: {!! json_encode($jml_tamu['category']) !!},
			        crosshair: true
			    },
			    yAxis: {
			        min: 0,
			        title: {
			            text: 'Jumlah'
			        }
			    },
			    tooltip: {
			        headerFormat: '&lt;span style="font-size:10px"&gt;{point.key}&lt;/span&gt;&lt;table&gt;',
			        pointFormat: '&lt;tr&gt;&lt;td style="color:{series.color};padding:0"&gt;{series.name}: &lt;/td&gt;' +
			            '&lt;td style="padding:0"&gt;&lt;b&gt;{point.y:.1f}&lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;',
			        footerFormat: '&lt;/table&gt;',
			        shared: true,
			        useHTML: true
			    },
			    plotOptions: {
			        column: {
			            pointPadding: 0.2,
			            borderWidth: 0
			        }
			    },
			    series: {!! json_encode($jml_tamu['series']) !!}
			});


			
		})
	&lt;/script&gt;
@stop</pre>
<p>Hasilnya seperti pada gambar dibawah ini</p>
<p><img fetchpriority="high" decoding="async" class="alignnone size-medium wp-image-2224" src="https://bluecreative.co.id/wp-content/uploads/2018/06/Screen-Shot-2018-06-26-at-01.34.23-300x229.png" alt="" width="300" height="229" srcset="https://bluecreative.co.id/wp-content/uploads/2018/06/Screen-Shot-2018-06-26-at-01.34.23-300x229.png 300w, https://bluecreative.co.id/wp-content/uploads/2018/06/Screen-Shot-2018-06-26-at-01.34.23-768x586.png 768w, https://bluecreative.co.id/wp-content/uploads/2018/06/Screen-Shot-2018-06-26-at-01.34.23-1024x782.png 1024w, https://bluecreative.co.id/wp-content/uploads/2018/06/Screen-Shot-2018-06-26-at-01.34.23-191x146.png 191w, https://bluecreative.co.id/wp-content/uploads/2018/06/Screen-Shot-2018-06-26-at-01.34.23-50x38.png 50w, https://bluecreative.co.id/wp-content/uploads/2018/06/Screen-Shot-2018-06-26-at-01.34.23-98x75.png 98w, https://bluecreative.co.id/wp-content/uploads/2018/06/Screen-Shot-2018-06-26-at-01.34.23-400x305.png 400w, https://bluecreative.co.id/wp-content/uploads/2018/06/Screen-Shot-2018-06-26-at-01.34.23.png 1176w" sizes="(max-width:767px) 300px, 300px" /></p>
<p>Sekian tutorial membuat grafik menggunakan highchart dan laravel  di blog ini semoga bermanfaat. jika ada pertanyaan mohon tinggalkan komentar.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://bluecreative.co.id/tutorial-membuat-grafik-dengan-highcharts-dan-laravel/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
