Ultimate Javascript Charting and Graphic Library List

by ahmadfathihadi | Mar 16, 2013 | Code for Joy

Saya menghabiskan waktu yang cukup lama untuk menentukan Charting Library apa yang harus saya pakai pada project kali ini. Karena dalam menentukan sesuatu yang ingin kita pakai(dalam kasus kali ini yang dimaksud adalah Chart Library dan bukan yang lain) tentunya tidaklah mudah karena setiap orang memiliki selera yang berbeda-beda, serta kemampuan yang berbeda juga. Kemampuan yang saya maksud adalah Skill, Uang dan Waktu. Contohnya saja jika project yang sedang dikerjakan memiliki budget yang besar, maka saya tidak ambil pusing karena saya bisa membeli lisensi charting yang bagus(HighChart contohnya). Namun berbeda ketika budget yang dimiliki tidak banyak, maka kita harus mencari alternatif yang Free.

Posting kali ini bukan bertujuan untuk membahas Uang, atau bahkan tutorial membuat charting, tapi lebih kepada list charting yang bisa anda pilih. Baiklah langsung saja saya list semua Charting dan graphic library yang sudah saya temukan dan kumpulkan link-nya,

• D3.js merupakan Charting dan graphic library yang paling anyar saat ini, namun sangat tidak dianjurkan untuk pemula. Anda bisa lihat Contohnya disini.
• HighChart sangat mudah bagi pemula, namun sayangnya tidak gratis untuk project non-komersil. Jika anda punya budget lebih, silahkan gunakan ini.
• iChartJS made In China, tapi sangat menarik, bagus, dan Gratis. Saya merekomendasikan anda untuk menggunakannya.
• jqPlot simple namun tidak banyak opsi, tapi gratis.
• chartjs merupakan pendatang baru dengan total 6 chart yang sepertinya cukup menarik.
• JIT Mudah dan bagus.
• FusionCharts Bagus, berbayar, mahal, dan saya lebih pilih HighChart jika harus bayar
• dygraphs
• Protovis merupakan cikal bakal dari D3.js
• Dojo Charting cocok untuk pemula
• amcharts berbayar
• Flot Charts, mudah namun tidak begitu lengkap
• Google Chart Tools ide buruk menurut saya jika menggunakan ini
• dc.js dibuat diatas D3
• xcharts bagus dan dibuat diatas D3, namun sayangnya saat ini hanya tersedia Bar Chart dan sejenisnya.
• nvd3 dibangun diatas D3, dengan tujuan memberikan anda kemudahan karena beberapa chart sudah dibuat dan dapat digunakan ulang.
• rickshaw masih diatas D3, namun tidak lengkap
• Cubism.js hanya fokus terhadap Visualisasi Time Series(berdasarkan D3)
• kendoUI Berbayar(Mahal) dan tidak terlalu banyak chart yang disediakan
• jQuery Sparklines merupakan JQuery Plugin untuk membuat small inline charts
• peity sama seperti jQuery Sparklines
• Recline.js
• BonsaiJS merupakan graphic library dan sepertinya ingin menyaingi D3, namun pendekatannya lebih mudah dimengerti jika dibanding D3
• Flotr
• ProtoChart
• Flotr2 cukup menarik
• jQuery-Visualize
• xkcd
• JS Charts merupakan Chart Generator dan versi gratisnya terdapat watermark, jika anda bayar tentunya watermark-nya akan hilang
• PlotKit
• MilkChart dibuat berdasarkan MooTools
• moochart masih Beta
• moowheel
• Raphaël
• table2chart
• Canvas 3D Graph
• TufteGraph membutuhkan JQuery
• ArborJS
• TimePlot
• gRaphael
• ICO
• Elycharts Tampilannya cukup jadul dan tidak segar
• ZingChart berbayar namun cukup advance dan memiliki aplikasi khusus untuk membuat chart, tidak hanya itu, dapat di Export sebagai Flash!
• RGraph
• Bluff
• canvasXpress
• ccchart
• JSXGraph
• Smoothie Charts
• YUI Charts
• Emprise JavaScript Charts
• JavaScript Diagram Builder
• jGraph
• Envision
• Sencha Touch Charts sudah banyak dipakai dan dipercaya oleh banyak perusahaan, namun lisensinya cukup mahal
• Style Chart
• AwesomeChartJS
• Sigma.js Hanya fokus terhadap visualisasi graph(hubungan antar titik) coba tengok sejenak, sample yang diberikan cukup menarik.
• Graphene
• TeeChart berbayar
• GoJS
• Harry Plotter
• JPowered
• dHTMLx
• Timeline

Silahkan pilih sesuai selera, kebutuhan dan budget anda. Namun perlu diingat bahwa kompabilitas sangatlah penting, pastikan Chart atau graphic library yang anda pilih bisa berjalan mulus dan bagus pada IE 6!

Tolong jika ada yang terlewatkan, beritahu saya lewat kolom komentar dibawah.

Regex lookbehind and negative lookahead

by ahmadfathihadi | Dec 30, 2012 | Code for Joy

Lookbehind dan lookahead mungkin bukan kata yang asing, artinya mudah dimengerti, lihat kebelakang dan lihat kedepan . Tapi dalam regex(REGular EXpression), lookbehind dan lookahead digunakan untuk mencocokkan suatu pola sebelum atau sesudah ekspresi utama diberikan. Sekali lagi perlu diingat, regex bukanlah simbol aneh seperti hieroglyph, jadi kalau anda ingin belajar atau memperdalam Regex, maka hapuslah anggapan ‘regex susah’ dari otak anda sebelum anda memulainya.

Lookbehind dan lookahead mempunyai nilai positif dan negatif.

Positive Lookbehind(?<=ABC) akan menyertakan hasil ekspresi/pola utama jika syarat pola yang diberikan sebelum ekspresi utama terpenuhi.

contoh : jika sebelum kata ‘fathi’ terdapat kata ‘ahmad’ maka pola ini cocok.

Negative lookbehind(?<!ABC) akan mengabaikan hasil ekspersi/pola utama jika syarat pola yang diberikan sebelum ekspresi utama terpenuhi.

contoh : jika sebelum kata ‘fathi’ terdapat kata ‘hadi’ maka pola ini tidak cocok.

Positive Lookahead(?=ABC) akan menyertakan hasil ekspresi/pola utama jika syarat pola yang diberikan sesudah ekspresi utama terpenuhi.

contoh : jika setelah kata ‘fathi’ terdapat kata ‘hadi’ maka pola ini cocok.

Negative Lookahead(?!ABC) akan mengabaikan hasil ekspersi/pola utama jika syarat pola yang diberikan setelah ekspresi utama terpenuhi.

contoh : jika setelah kata ‘fathi’ terdapat kata ‘hadi’ maka pola ini tidak cocok.

Nah saya akan beri contoh super mudah dalam Sintax Regex yang sesungguhnya.

Saya mempunyai Text seperti berikut :

Ahmad
Fathi
Hadi
Ahmad Fathi
Fathi Hadi
Ahmad Fathi Hadi

Jika saya ingin mencari kata ‘Fathi’ maka sintax Regexnya sangat simple, yaitu ‘Fathi’.

Lalu bagaimana jika saya ingin mencari kata ‘Fathi’ yang sebelumnya ada kata ‘Ahmad’ ? Untuk melakukannya, kita membutuhkan sintax lookbehind(positive) yaitu ‘(?<=Ahmad )Fathi’, maka baris 4 dan 6 lah yang cocok.

Jika kita ingin mencari kata ‘Fathi’ yang sebelumnya tidak ada kata ‘Ahmad’ maka kita membutuhkan sintax lookbehind(negative), yaitu ‘(?<!Ahmad )Fathi’, maka baris 2 dan 5 lah yang cocok.

Jika kita ingin mencari kata ‘Fathi’ yang sesudahnya ada kata ‘Hadi’, maka kita akan menggunakan lookahead(positive), yaitu ‘Fathi(?= Hadi)’, maka baris 5 dan 6 yang cocok.

Jika kita ingin mencari kata ‘Fathi’ yang sesudahnya tidak ada kata ‘Hadi’, maka kita akan menggunakan lookahead(negative), yaitu ‘Fathi(?! Hadi)’, maka baris 2 dan 4 yang cocok.

Selanjutnya anda juga bisa menggabungkan lookbehind dan lookahead, misalnya anda ingin mencari kata ‘Fathi’ yang sebelumnya ada kata ‘Ahmad’ dan sesudahnya terdapat kata ‘Hadi’. Sintaxnya adalah berikut ‘(?<=Ahmad )Fathi(?= Hadi)’, yang cocok adalah baris 6 karena lengkap.

Saya akan berikan contoh penerapan lookbehind dan lookahead pada aplikasi yang ingin mencari twitter username, polanya adalah @username. namun kita harus menggunakan bantuan lookbehind dan lookahead agar pola email tidak tertangkap(ahmad@fathihadi.net).

Saya sudah test untuk twitter @username berikut sintax regexnya(saya tidak mengcopy-nya dari manapun, melainkan murni berfikir dan mencobanya, dan mungkin polanya bisa salah untuk beberapa kemungkinan)

(?<=\s)@\w+(?!\S)

Semoga bermanfaat 🙂

* Jika anda tidak faham berarti saya yang tidak pintar dalam menulis, bukan karena anda yang kurang pintar.

* Tools untuk mencobanya secara online adalah link ini http://gskinner.com/RegExr/

PHP Metric prefix Class

by ahmadfathihadi | Nov 11, 2012 | Code for Joy

1K

10K

100.9M

etc…

Sering bukan melihat angka dengan format seperti diatas ?

Agar tidak salah, lebih baik anda melihat table dibawah ini,

Berikut ini PHP Class yang telah saya modifikasi sedikit dan tidak banyak dari link ini

class MetricPrefix {
	public function decimalToSymbol($input)
    {
        $suffixes = array('', 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y');
        $suffixIndex = 0;

        while(abs($input) >= 1000 && $suffixIndex < sizeof($suffixes))
        {
            $suffixIndex++;
            $input /= 1000;
        }

        return (
            $input > 0
                ? floor($input * 1000) / 1000
                : ceil($input * 1000) / 1000
            )
            . $suffixes[$suffixIndex];
    }
}

**Perlu diperhatikan bahwa class ini dimulai dari kilo(k) hingga yotta(Y)

cara menggunakannya

$metricPrefix = new MetricPrefix();
$metricPrefix->decimalToSymbol(1999990999999);

Semoga bermanfaat