Dalam membuat sebuah grafik atau chart, kita sebagai web developer kadang dipusingkan dengan banyak pilihan tools atau library apa yang akan kita gunakan. Di bawah ini adalah kumpulan 25 grafik dan chart yang bisa menjadi referesi atau sebagai solusi pilihan bagi anda dalam pembuatan grafik atau chart
1. pChart – a PHP Charting library
pChart adalah PHP class oriented framework yang dirancang untuk membuat diagram alias dengan mudah datanya diambil dari SQL queries, file CSV, atau secara manual yang disediakan. Dalam versi ini kecepatan rendering telah sangat diperbaiki dan menjalankan pChart pada server Web Anda, Anda harus menggunakan PHP dikompilasi dengan dukungan GD library.
2. jQuery Visualize Plugin – Accessible Charts & Graphs
The jQuery Visualize Plugin menggunakan elemen pada HTML 5 untuk memberikan metode yang sederhana dan dapat diakses untuk menghasilkan bar, line, area, serta diagram lingkaran dari data yang terdapat dalam sebuah tabel HTML dan memungkinkan Anda untuk mengkonfigurasinya dengan berbagai cara
3. PlotKit – Javascript Chart Plotting
PlotKit adalah Chart and Graph Plotting Library untuk Javascript yang memiliki dukungan untuk HTML kanvas dan juga melalui Adobe SVG SVG Viewer dan dukungan browser asli. Hal ini didasarkan di atas CANVAS HTML tag yang didukung dalam Firefox, Safari dan Opera, dan tersedia di bawah emulasi di IE6 dan IE7 melalui ExplorerCanvas.
4. jqPlot Charts and Graphs for jQuery
jqPlot adalah plotting dan charting plugin untuk jQuery javascript framework . pada kode jqPlot memungkinkan untuk event handlers, pembuatan plot baru dan menambahkan jenis kanvas ke plot.
5. Protovis – A graphical approach to visualization
Tidak seperti graphics libraries tingkat rendah , Protovis mendefinisikan tanda melalui sifat-sifat yang dinamis dalam menyandikan data, mengijinkan pewarisan, skala dan layout untuk membuat data dengan tanda sederhana seperti bar dan titik untuk menyederhanakan konstruksi.
Menggunakan JavaScript dan SVG untuk web-visualisasinya, tidak ada plugin yang dibutuhkan (meskipun Anda akan memerlukan browser web yang modern) dan memiliki dokumentasi yang luas dan beragam.
6. Flare – Data Visualization for the Web
Flare adalah ActionScript library untuk menciptakan visualisasi yang berjalan dalam Adobe Flash Player. Diagram dan grafik yang kompleks dengan grafis yang interaktif, toolkit mendukung manajemen data, visual encoding, animasi, dan teknik interaksi. Bahkan lebih baik, flare features desain modular yang memungkinkan pengembang menciptakan teknik visualisasi yang dapat disesuaikan dengan mudah.
7. Visifire – Silverlight and WPF Chart Controls
Visifire adalah data visualization controls yang open source – powered by Microsoft Silverlight. merupakan multi-targeting control yang dapat digunakan pada aplikasi WPF dan Silverlight, yang dapat digunakan dengan ASP, ASP.Net, PHP, JSP, ColdFusion, Python, Ruby atau hanya HTML sederhana.
8. Axiis : Data Visualization Framework
Axiis adalah data visualization framework yang open source yang dibangun di atas Degrafa graphics framework dan Adobe Flex 3. Axiis menyediakan komponen visualisasi serta abstrak layout dan class rendering yang memungkinkan Anda untuk membuat visualisasi unik Anda sendiri.
9. ChartGo – Create Charts Online Fast, Easy and Free
ChartGo adalah generator online yang memungkinkan pengguna untuk membuat diagram secara online dengan cepat. Anda dapat membuat grafik batang, line chart atau pie chart dan Anda hanya menyisipkan data Anda di area data grafik dan tekan tombol grafik untuk menciptakannya.
10. iCharts – Create, Share and Embed Interactive Charts
iCharts memungkinkan setiap orang untuk meng-upload file Excel atau menambahkan data secara manual, share dan menanamkan grafik interaktif dalam beberapa menit. iCharts dapat diterbitkan pada Portal iCharts di iCharts dan mereka dapat ditanamkan di mana saja di blog, forum atau situs web.
11. Chartle.net – Interactive Charts Online
Chartle sangat mudah digunakan dan sepenuhnya gratis online bagan generator yang memungkinkan Anda untuk menanamkan dan berbagi plot, peta, bagan, diagram dan laporan bisnis secara online.
ChartLet non-mengikat terhadap para penggunanya, tidak ada dipaksa registrasi dan semua grafik yang dihasilkan adalah Anda sendiri, Satu-satunya hal yang mereka tanyakan adalah bahwa Anda link kembali kepada mereka.
12. Google Chart API
The Google Chart API returns a PNG-format image in response to a URL. Several types of images can be generated, including line, bar, and pie charts. For each image type, you can specify attributes such as size, colors, and labels.
13. chartpart.com – Chart Generator
Generator ini menggunakan Google API untuk Charts jernih dan tajam menghasilkan grafik yang dapat dimasukkan ke dalam dokumen berbasis web melalui hyperlink atau disimpan sebagai flat file gambar.
14. FusionCharts
Versi ini adalah gratis dan open source Flash charting komponen dari FusionCharts. Memberdayakan Anda untuk membuat animasi dan interaktif Flash grafik untuk aplikasi web, aplikasi desktop dan presentasi. Memberikan mengesankan 22 populer grafik seperti Column, Line, Pie, Bar, Area, Stacked, Candlestick dan Chart Saluran, yang akan terlihat sama di semua browser.
15. XML/SWF Charts
XML / SWF Charts adalah sederhana, namun alat yang ampuh untuk membuat diagram dan grafik yang menarik dari data XML. Buat sumber XML untuk menggambarkan diagram, kemudian menyebarkannya ke dalam alat ini file flash untuk menghasilkan grafik. XML sumber dapat disiapkan secara manual, atau apapun yang dihasilkan secara dinamis menggunakan bahasa scripting (PHP, ASP, CFML, Perl, dll)
16. Open Flash Chart
Open Flash Chart bekerja dengan meminta data dari server bila pengguna load halaman web. Server akan mengetahui siapa pengguna tertentu adalah dan akan menghasilkan grafik yang menunjukkan suatu kebiasaan sampai menit data.
Anda akan perlu untuk memasukkan Open Flash Chart di HTML Anda, dan Anda juga perlu menyediakan data file pada server. File data baik file teks, atau. Php, Perl, Python, Java (atau rasa lain dinamis) halaman.
17. MilkChart – Graph/Chart library for MooTools
MilkChart adalah mudah digunakan, namun perpustakaan yang kuat untuk mengubah data tabel ke dalam tabel. Perpustakaan ini menggunakan tag HTML5 hanya didukung pada browser selain IE sampai ExCanvas mendapat dukungan teks yang tepat.
18. mooCSSChart
With mooCSSChart you can easily create animated bar charts.
19. jQuery Sparklines
Plugin jQuery ini menghasilkan sparklines (inline kecil grafik) langsung dalam browser dengan menggunakan data yang diberikan baik inline dalam HTML, atau melalui javascript semua dengan satu baris kode.
Plugin kompatibel dengan sebagian besar browser modern dan telah diuji dengan Firefox 2 +, Safari 3 +, Opera 9, Google Chrome dan Internet Explorer 6, 7 & 8.
20. Highcharts – Interactive JavaScript charts for your webpage
Highcharts adalah perpustakaan grafik yang ditulis dalam JavaScript murni, menawarkan cara yang mudah menambahkan grafik interaktif ke situs web atau aplikasi web. Saat ini mendukung Highcharts baris, spline, daerah, areaspline, kolom, bar, pie dan menyebarkan jenis bagan.
Ia bekerja di semua browser modern termasuk iPhone dan Internet Explorer dari versi 6. Browser standar menggunakan elemen kanvas dan dalam beberapa kasus SVG untuk rendering grafis. Di Internet Explorer grafis yang digambar menggunakan vml.
21. JS Charts – Free JavaScript charts
JS Charts adalah bagan JavaScript generator yang sedikit atau tidak memerlukan pengkodean. JS Charts memungkinkan Anda untuk dengan mudah membuat chart dalam berbagai template seperti grafik batang, pie chart atau grafik garis sederhana.
Charts JS dengan grafik gambar yang sederhana dan mudah, karena Anda hanya perlu menggunakan script sisi klien (yaitu dilakukan oleh Web browser anda). Tidak ada tambahan modul plugin atau server diperlukan, hanya meliputi script, menyiapkan data tabel dalam XML atau JavaScript Array dan grafik Anda siap.
22. flot – Attractive Javascript plotting for jQuery
Flot adalah murni perpustakaan merencanakan Javascript jQuery. Ini menghasilkan bidang grafis yang sewenang-wenang dataset on-the-fly sisi klien. Ini telah dikembangkan dengan fokus pada penggunaan sederhana (semua pengaturan adalah opsional), penampilan menarik dan fitur-fitur interaktif seperti pembesaran dan mouse pelacakan.
Plugin ini bekerja dengan Internet Explorer 6/7/8, Firefox 2.x +, Safari 3.0 +, Opera 9.5 + dan Konqueror 4.x + dengan kanvas HTML tag (Internet Explorer dimana emulasi Javascript excanvas penolong yang digunakan).
23. Flotr Javascript Plotting Library
Flotr adalah perpustakaan merencanakan javascript berdasar pada Prototype Javascript Framework dan telah terinspirasi oleh Flot (di atas).
Flotr memungkinkan Anda untuk menggambar grafik menarik dalam kebanyakan browser modern dengan mudah untuk belajar sintaks. Muncul dengan fitur besar seperti legenda dukungan, dukungan nilai negatif, pelacakan mouse, seleksi dukungan, dukungan zoom, event kait, CSS styling dukungan dan banyak lagi.
24. Libchart – Simple PHP Chart Drawing Library
Libchart adalah mudah digunakan, gratis PHP bagan penciptaan perpustakaan. Fitur versi baru beberapa dataset untuk horisontal, vertikal dan garis grafik batang grafik.
25. YUI 2: SWF Charts
Control Charts yang YUI visualisasi data tabel pada halaman web mungkin dalam beberapa format termasuk kolom vertikal, horisontal bar, garis, dan pie. Fitur utama meliputi dukungan untuk DataSource Utility, bisa kustomisasi dan kapak seri, yang dapat disesuaikan datatip mouse-over, kombinasi grafik, dan menguliti.
Loading...
mau tanya mas saya bikin grafik pake library jGraph, pake database sql pas saya coba di localhost bisa tapi pas saya upload di web gak tampil sama sekali….
kalo misal pake Highcharts bisa pake database juga gak??? ada tutorial Highcharts SQL gak??
Semua library chart dan grafik yang saya jelaskan diatas pada dasarnya semua bisa dikoneksikan dengan database,,, Karena Koneksi ke DB hanya mengambil data saja,,,
Untuk Highcharts saya blm menemukan tutorial yang bagus,,, tapi mungkin link ini bisa membantu anda dan ada contohnya kalo ga salah yang bisa didownload silahkan : http://www.demas.web.id/highcharts-interactive-javascript-charts.html
atau pelajari langsung dari websitenya, lihat demonya http://www.highcharts.com/demo/
makasih bgt referensinya..hehe
@Galih:
Gampang kok mas biar datanya dari MySQL lihat dulu demonya terus pilih design mana yg diiginkan dan klik View Options, copy aja codenya semua
dan ganti dataURL: data.php,
udah deh kelar
@Yadi Rosadi:
Thanks buat infonya jd web saya sekarang bisa Grafik dengan Highchards
Rius´s last blog ..When IT Guys Sing a Song (2)
klo pake google chart api ngambil data dari database mysql gmn?
konsepnya sama aja kita kan hanya menggunakan fungsi bawaan dari google chart api data masih tetep bisa di ambil dari DB bedanya komputer kita harus terkoneksi internet untuk menggunakanya karena fungsinya di ambil langsung dar sana
anda bisa baca bagaimana menggunakannya di sini :
http://psychopyko.com/tutorial/how-to-use-google-charts/ atau baca2 develover guidenya : http://code.google.com/intl/id/apis/chart/, saya sendiri blm pernah mencobanya, terima kasih
mau tanya mas, klo buat grafik di java 2SE yang datanya dari file .txt itu source codenya gmn ya? aq nyoba buat tapi hasilnya cuma bisa nampilin data file .txt tersebut. dari data .txt untuk dijadikan grafik blum bs nampil. kyak gini scriptnya:
import java.io.BufferedReader;
import java.io.File;
import java.io.FileReader;
import java.io.FileNotFoundException;
import java.io.IOException;
public class ReadTextFileExample
{
public static void main(String[] args)
{
File file = new File(”SBK_LOS.txt”);
StringBuffer contents = new StringBuffer();
BufferedReader reader = null;
try
{
reader = new BufferedReader(new FileReader(file));
String text = null;
// repeat until all lines is read
while ((text = reader.readLine()) != null)
{
contents.append(text)
.append(System.getProperty(
“line.separator”));
}
} catch (FileNotFoundException e)
{
e.printStackTrace();
} catch (IOException e)
{
e.printStackTrace();
} finally
{
try
{
if (reader != null)
{
reader.close();
}
} catch (IOException e)
{
e.printStackTrace();
}
}
System.out.println(contents.toString());
}
}
jadi, aq punya file .txt bernama SBK.LOS dari data ini aq ingin buat grafiknya. koding yang ditambahkan kira2 apa ya mas?
exactly what an amazing post which I’ve actually come through. It the actual information we was really searching for the actual past 7 days and I’m really satisfied along with this post. Require much more like this. Many thanks.