Pie kabare kawan-kawan..? fine khan ? oke deh kaka..
Nah kali ini masih seputar Google API yaitu google chart !! Itung-itung barang gratisan lumayan banget,
Beberapa tipe chart yang sudah didukung :
- Line Chart
- Bar Chart
- OMeter Chart
- Pie Chart
- Maps
Nah kira-kira tampilannya kaya dibawah ini.

Teus gimana tuh cara pake komponennya ? nah ini yang yahud,,,
1. Pertama ekstrak deh komponennya ke proyek asp.net kawan-kawan. Bisa di download dari attachment.
2. Terus tambahin di source halaman web-nya :
<%@ Register Namespace="Google.API" TagPrefix="GoogleAPI" %>
3. Nah ini kode untuk masukin komponennya..
Line Chart
<GoogleAPI:LineChart runat="server" id="Chart2" Width="200" Height="150" LineColor="0000ff" ShowGridLines="true" ToolTip="Hello World"></GoogleAPI:LineChart>
OMeter Chart
<GoogleAPI:OMeterChart runat="server" id="OMeter1" Width="200" Height="150" ToolTip="Hello World"></GoogleAPI:OMeterChart>
Bar Chart
<GoogleAPI:BarChart runat="server" BackgroundColor="efefef" id="BarChart2" Width="200" Height="150" ToolTip="Hello World" ShowGridLines="True"></GoogleAPI:BarChart>
Pie Chart
<GoogleAPI:PieChart ID="PieChart1" runat="server" Height="100" ToolTip="Hello World" Width="250" />
Maps
<GoogleAPI:Maps ID="MapChart1" runat="server" Height="220px" ToolTip="Hello World" Width="440px" />
4. Ni cara untuk mengeset propertynya
//Line Chart 1
Chart1.MaxValue = 60;
Chart1.Values.Clear();
Chart1.Values.Add("Jan", 10);
Chart1.Values.Add("Feb", 20);
Chart1.Values.Add("Mar", 30);
Chart1.Values.Add("Apr", 50);
Chart1.Values.Add("May", 5);
Chart1.YAxisLabels.Add("0 Kb");
Chart1.YAxisLabels.Add("25+ Kb");
Chart1.YAxisLabels.Add("50+ Kb");
// Line Chart 2
Chart2.MaxValue = 60;
Chart2.Values.Clear();
Chart2.Values.Add("Jan", 30);
Chart2.Values.Add("Feb", 50);
Chart2.Values.Add("Mar", 20);
Chart2.Values.Add("Apr", 5);
Chart2.Values.Add("May", 30);
Chart2.YAxisLabels.Add("0 Kb");
Chart2.YAxisLabels.Add("25+ Kb");
Chart2.YAxisLabels.Add("50+ Kb");
//Ometer Chart
OMeter1.Title = "Max";
OMeter1.Values = 90;
//Barchart horizontal
BarChart1.BarType = Google.API.BarChart.BarTypes.Horizontal;
BarChart1.BarColor = "4D89F9";
BarChart1.BarColor2 = "C6D9FD";
BarChart1.Values.Add("a",10);
BarChart1.Values.Add("b",50);
BarChart1.Values.Add("c",60);
BarChart1.Values.Add("d",80);
BarChart1.Values.Add("e",40);
BarChart1.Values2.Add("a", 10);
BarChart1.Values2.Add("b", 20);
BarChart1.Values2.Add("c", 30);
BarChart1.Values2.Add("d", 50);
BarChart1.Values2.Add("e", 10);
BarChart1.YAxisLabels.Add("a");
BarChart1.YAxisLabels.Add("b");
BarChart1.YAxisLabels.Add("c");
BarChart1.YAxisLabels.Add("d");
BarChart1.YAxisLabels.Add("e");
BarChart1.XAxisLabels.Add("0");
BarChart1.XAxisLabels.Add("50");
BarChart1.XAxisLabels.Add("100");
BarChart1.ShowGridLines = true;
//Barchar vertical
BarChart1.BarType = Google.API.BarChart.BarTypes.Vertical;
BarChart2.BarColor = "C00000";
BarChart2.BarColor2 = "FF8000";
BarChart2.Values.Add("a", 10);
BarChart2.Values.Add("b", 50);
BarChart2.Values.Add("c", 60);
BarChart2.Values.Add("d", 80);
BarChart2.Values.Add("e", 40);
BarChart2.Values2.Add("a", 10);
BarChart2.Values2.Add("b", 20);
BarChart2.Values2.Add("c", 30);
BarChart2.Values2.Add("d", 50);
BarChart2.Values2.Add("e", 10);
BarChart2.XAxisLabels.Add("a");
BarChart2.XAxisLabels.Add("b");
BarChart2.XAxisLabels.Add("c");
BarChart2.XAxisLabels.Add("d");
BarChart2.XAxisLabels.Add("e");
BarChart2.YAxisLabels.Add("0");
BarChart2.YAxisLabels.Add("50");
BarChart2.YAxisLabels.Add("100");
BarChart2.YAxisLabels.Add("150");
BarChart2.ShowGridLines = true;
//Pie Chart 3D
PieChart1.SpecialBackground = true;
PieChart1.PieType = Google.API.PieChart.PieTypes.Pie3D;
PieChart1.Values.Add("a, 10%", 10);
PieChart1.Values.Add("b, 30%", 30);
PieChart1.Values.Add("c, 40%", 40);
PieChart1.Values.Add("d, 20%", 20);
//Pie Chart 2D
PieChart2.PieType = Google.API.PieChart.PieTypes.Pie2D;
PieChart2.Values.Add("Jelek", 20);
PieChart2.Values.Add("Cakep", 50);
PieChart2.Values.Add("Cantik", 30);
PieChart2.PieColor = "0000FF";
//Maps
MapChart1.CountryCodes="DZ,EG,MG,AO,BW,NG,CF,KE,CG,CV,SN,DJ,TZ,GH,MZ,ZM";
//Kode Negara : http://code.google.com/intl/id-ID/apis/chart/isocodes.html
MapChart1.MapArea = Google.API.Maps.MapAreas.africa;
MapChart1.MapColor = "FFFFFF,FF0000,FFFF00,00FF00";
//Kode Warna
MapChart1.ColorLevels = "0,100,50,32,60,40,43,12,14,54,98,17,70,76,18,29";
MapChart1.BackgroundColor = "EAF7FE";
Jika kawan-kawan tertarik untuk ngembangin komponennya lebih lanjut..silakan saja,,masih ada beberapa jenis chart yang belum dibuat khan,,hehe lumayan ngisi-ngisi weekend di rumah !!
Oke, tetep berkreasi !! 