Radar Area Chart dengan jQuery


Saat ini saya kebetulan lagi dapet proyekan dari dosen, diproyek tersebut ada fitur untuk membuat hasil suatu survey kedalam diagram, maunya sih diagram yang berbentuk radar. Kemudian saya cari-cari tutorialnya, alhamdulilah langsung ketemu, jadi gak ada salahnya jika saya share di blog saya ini.

Sebelumnya download dulu scriptnya di sini

Kemudian extract filenya, langsung buka file index.html

Untuk tampilannya nanti seperti ini :

radar area chart

radar area chart

Untuk kategorinya bisa ditambahkan, ubah saja bagian ininya :

categories: ['France', 'Canada', 'Germany', 'USA', 'Italy', 'Spain', 'Russia', 'Sweden', 'Japan']

Untuk menambahkan data, bisa copy paste saja dibawahnya

{
   title : 'Series 1',
   type: 'radarArea',
   data: [65.62, 75.54, 60.45, 34.73, 85.42, 55.9, 63.6, 55.1, 77.2],
   fillStyle: 'rgba(65,140,240,0.75)'
}

title : ‘Series 1‘,  : digunakan untuk nama pada keterangan disamping kanan

data : nilai datanya, disesuaikan berdasarkan banyak cabang

fillStyle: ‘rgba(65,140,240,0.75)’ : digunakan untuk background warna pada area, untuk angka 0.75 itu tingkat transparansi background, sedangkan untuk kode 65,140,240 merupakan kode RGB dari warna tersebut. untuk mendapatkan kode warna tersebut bisa menggunakan adobe photoshop

contoh tampilan kode RGB di photoshop, untuk contoh gambar dibawah ini, kodenya adalah

rgba(24,235,59,0.75)

RGB_color_photoshop

RGB_color_photoshop

Oke sekian sharing dari saya, terima kasih 🙂

sumber : http://www.jqchart.com/samples/RadarPolarCharts/RadarAreaChart

2 thoughts on “Radar Area Chart dengan jQuery

  1. yang di ubah file apanya mas ??

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s