Home > Java, JavaScript > Highcharts, CC4J, ZK

Highcharts, CC4J, ZK


Highcharts, CC4J, ZK:

  • Highcharts adalah interaktif JavaScript grafik untuk halaman Web Anda.
  • CC4J adalah Compact Class untuk bahasa Java.
  • ZK adalah framework Java terbuka untuk membangun web perusahaan yang menakjubkan dan aplikasi mobile.

Dalam membangun sebuah aplikasi web berbasis Java, seringkali kita menemukan kendala, di sisi Model kita dapat menggunakan Hibernate, sedangkan di sisi View kita dapat menggunakan ZK, sehingga pengerjaan aplikasi dari awal sampai akhir dapat dikerjakan sebagai berikut:

  • menggunakan Hibernate, untuk melakukan mapping entity ke database, dalam hal ini kita menggunakan CCHibernate.
  • menggunakan CCValidator dan CCTable, untuk mapping entity ke screen, dalam hal ini kita menggunakan CCValidatorZk dan CCTableZk, untuk mapping entity ke ZK.
  • merancang screen dengan menggunakan ZK.

Setelah aplikasi sudah 99% jadi, biasanya masalah baru akan timbul, yaitu ketika kita akan mempresentasikan data ke client, tentunya kita ingin menyuguhkan tampilan yang bagus dan interaktif, sehingga menarik minat client. Hal ini dikarenakan chart yang dihasilkan ZK relatif  ‘so-so’, dan memaksa kita untuk melirik alternatif lain, yaitu Highcharts, dimana chart yang dihaslikan relatif interaktif. Untuk mengimplementasikan Highcharts ke ZK salah satu caranya yaitu dengan menggunakan CCHighcharts dan CCHighchartsZk.

  • CCHighcharts adalah sebuah class yang setara dengan Highcharts, sehingga kita bisa memanipulasi atribute dengan cara Java, lalu meng-compile-nya menjadi JavaScript.
  • CCHighchartsZk adalah sebuah class yang mempermudah mengimplementasikan Highcharts ke ZK.

Berikut ini langkah-langkah implementasi Highcharts ke ZK:

  1. Download Highcharts.
  2. Download CC4J dan CC4J4ZK.
  3. Buat div di window.
  4. Buat CCHighchartsZk.
  5. Lakukan konfigurasi CCHighcharts.
  6. compile().

Contoh konfigurasi CCHighcharts:

        CCHighcharts highcharts = new CCHighcharts();
        highcharts.getChart().setRenderTo("container");
        String[] categories = new String[]{"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"};
        highcharts.getxAxis().getCategories().addAll(Arrays.asList(categories));
        CCHighcharts.Serial serial = highcharts.newSerial();
        double[] data = new double[]{29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4};
        for (double d : data) {
            serial.getData().add(d);
        }
        highcharts.getSeries().add(serial);
        System.out.println(highcharts.compile());

Code di atas akan menghasilkan:

var chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'line', }, credits: { enabled: false, }, plotOptions: { bar: { colorByPoint: false, }, column: { colorByPoint: false, }, series: { allowPointSelect: true, cursor: 'pointer', dataLabels: { color: 'black', enabled: true, }, enableMouseTracking: true, showInLegend: true, }, }, series: [ { data: [ 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, ], }, ], subtitle: { }, title: { }, tooltip: { }, xAxis: { categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', ], title: { }, }, yAxis: { title: { }, }, });

Kita dapat mengujinya di jsFiddle atau jsFiddle.

to be continued..

Categories: Java, JavaScript Tags: , ,
  1. 20120223 at 0805

    Keren… nggabungin Highcharts (Javascript) dengan CC4J (Java) ditambah lagi dengan ZK (Java+Javascript?) .. ckckck…😀

    • 20120223 at 0810

      gak juga..:mrgreen: soalnya dasar CC4J sendiri sudah kuat.. R.A.P. (tanpa E. :wink:) jadi untuk buat library yang aneh2 relatif lebih mudah..:mrgreen:

      *barusan update lagi.. support multi axes..

  2. yessika
    20150413 at 1103

    Dear Mr. arrow_405

    Saya ada sedikit pertanyaan. Saya sedang membangun aplikasi java dgn menggunakan zk dan mapping nya menggunakan Hibernate, dan chart yang digunakan adalah zkcharts.
    Ternyata zkcharts berbayar, dan uptime slama 12 jam.
    Yang saya lihat highcharts berbayar juga, Adakah solusi lain untuk membuat chart pada zk tanpa harus berbayar?
    jFreeChart sudah dicoba namun hasil render lama dan kurang pada sisi UI. Mohon info nya pak.

    Regards,

    Yessika

  1. No trackbacks yet.

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

%d bloggers like this: