ZDIRY-TUFWT-EBONM-EYJ00-IDBLANTER.COM
ZDIRY-TUFWT-EBONM-EYJ00
BLANTERWISDOM105

Konsep Array Value Dari Database Untuk Highchart

2/07/2020
Pembuatan artikel ini bertujuan untuk mempermudah anda yang ingin mengimplementasikan Highchart pada ASP.NET MVC. Implementasi Highchart dapat membuat penyajian data lebih interaktif dan informatif. Seperti gambar di bawah ini,
ASP NET MVC HIGHCHART
Mungkin sudah banyak yang membahas cara mengintergrasikan database ke script yang menampilkan chart namun apakah anda paham konsepnya?. Yang saya baca dan saya ketahui pembahasan intergrasi database ke script highchart yang bertebaran di internet hanya membahas secara garis besarnya saja atau hanya memberikan contoh scriptnya saja tanpa memberikan penjelasan bagaimana cara mengisi array data pada script untuk Highchart.
Sebelum masuk ke materi cara mengisi array data pada script highchart akan lebih baik anda tahu konsep List pada Model C# atau LIST<T>.

Perhatikan text “series : ” pada gambar script Highchart di atas. Sebetulnya series ini diisi oleh banyak List dan Array lain. Series adalah var bertipe array. Jika kita sederhanakan script series adalah sebagai berikut,
SERIES : [{ }, { }, { }]
Tanda “[ ]” menunjukan var dalam type array sedangkan tanda { } untuk pemisah setiap list yang ditampung dalam array series. Mengisi Array pada series dapat diisi oleh array object yang di buat pada models.           
public object[] Params { set; get; }
Array Object yang bernama Params ini akan menampung banyal LIST Model sehingga value yang disimpan pada list model akan dapat di tampilkan dan diisikan ke dalam Array Series HighChart. Jadi Array Object Params ini adalah jembatan hubungan antara Database dengan Script Highchart.
Bagaimana sudah paham? Pasti berjelimet ya penjelasan Agung Panduan. Hehehe. Sebelum mengisi Array Series. Kita coba bahas cara isi judul series.
Perhatikan categories: [ ] yang ada pada xAxis. Cara mengisi array pada Categories ini yang kita butuhkan adalah

INTEGRASI AJAX DENGAN CONTROLLER

Yang harus diperhatikan apakah data yang diperoleh dan di tampung pada listDate diperoleh seperi yang ditunjukan pada saat debug di bawah ini,
Array 3 Value yang tersimpan pada ListDate akan di tampung pada Array Object Params. Dimana Object Params merupakan value yang di return (dikembalikan pada Method GetListDate).

INTEGRASI ANTARA MODEL DAN SQL

Data value yang dibutuhkan untuk pengisian Cateogories adalah LIST_DATE. Nama parameter LIST_DATE harus sama pada query SQL.

ISI ARRAY PADA CATEGORIES HIGHCHART

Karena data sudah di tampung ke dalam Object maka untuk mengisi Categories kita dapat menggunakan nama object tersebut lengkap dengan nama var array yang dibuat.

ISI ARRAY PADA SERIES DATA HIGHCHART


Share This :

1 Comments