สร้าง กราฟบนเว็บง่ายๆ ด้วย Google API
คำถามเกี่ยวกับ :สร้าง กราฟบนเว็บง่ายๆ ด้วย Google API
พอดีไปรับงานมางานนึงมีให้ทำกราฟด้วย ตอนแรก็กลัวๆ ว่าจะช้าก็เพราะกราฟนี่แหละ
แต่มาึค้นเจอพอดีเห็นแล้วง่ายมากครับ เพียงแค่ทำ HTML ง่ายๆ ตามนี้เลย
เริ่มจาก import API Google มาครับ
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
จากนั้นก็ เขียน Script ตามตัวอย่างใน URL นี้เลยครับ
https://google-developers.appspot.com/chart/interactive/docs/quick_start
ทำตามนั้นแล้ว เปิด HTML ด้วย Browser ก็จะได้กราฟออกมาเลยครับ
ตาม Link ข้างบนเราสามารถดึงข้อมูลจาก Data base มาแทนที่ค่าที่กำหนดใน java script ส่วนนี้ครับ
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
เราสามารถ Query ค่าจาก Table ด้วย PHP, Java หรืออะไรก็แล้วแต่แล้วนำมาแทนที่ค่าในส่วนนี้ครับ เพียงเท่านี้เราก็จะได้กราฟแบบง่ายๆ กันเลยทีเดียว
แต่ว่าเท่าที่ลองยังไม่เห็นวิธีการปรับแต่ง Option เพิ่มเติม
พอดีไปรับงานมางานนึงมีให้ทำกราฟด้วย ตอนแรก็กลัวๆ ว่าจะช้าก็เพราะกราฟนี่แหละ
แต่มาึค้นเจอพอดีเห็นแล้วง่ายมากครับ เพียงแค่ทำ HTML ง่ายๆ ตามนี้เลย
เริ่มจาก import API Google มาครับ
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
จากนั้นก็ เขียน Script ตามตัวอย่างใน URL นี้เลยครับ
https://google-developers.appspot.com/chart/interactive/docs/quick_start
ทำตามนั้นแล้ว เปิด HTML ด้วย Browser ก็จะได้กราฟออกมาเลยครับ
ตาม Link ข้างบนเราสามารถดึงข้อมูลจาก Data base มาแทนที่ค่าที่กำหนดใน java script ส่วนนี้ครับ
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
เราสามารถ Query ค่าจาก Table ด้วย PHP, Java หรืออะไรก็แล้วแต่แล้วนำมาแทนที่ค่าในส่วนนี้ครับ เพียงเท่านี้เราก็จะได้กราฟแบบง่ายๆ กันเลยทีเดียว
แต่ว่าเท่าที่ลองยังไม่เห็นวิธีการปรับแต่ง Option เพิ่มเติม
ใช้ดีขอบอกครับ
ตอบลบhttps://code.google.com/apis/ajax/playground/?type=visualization#pie_chart
สามารถ Render เลือกได้เลยแล้วจะ GEN HTML ตัวอย่างให้เราเอาไปใช้ต่อได้
อลังการงานสร้าง จริงๆ
ลบช่วยยกตัวอย่างการ Query ค่าจาก Table ด้วย PHP ให้ดูหน่อยได้ไหมค่ะ
ตอบลบhttp://www.ban1gun.com/mysql_fetch_array-%E0%B8%84%E0%B8%B7%E0%B8%AD-%E0%B8%84%E0%B8%B3%E0%B8%AA%E0%B8%B1%E0%B9%88%E0%B8%87%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3-%E0%B8%A1%E0%B8%B5%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%94%E0%B8%B5%E0%B8%A2%E0%B8%B1%E0%B8%87%E0%B9%86%E0%B8%87_24.html
ลบน่าจะง่ายกว่าคะ ยังไงรบกวนยกตัวอย่าง query ออกจากฐานหน่อยได้ไหมคะ
ตอบลบลองดูคร่าวๆ ครับ
ลบ$con=mysql_connect(host,user,pass);
$condb = mysql_select_db(dbname);
$result = mysql_query("SELECT * FROM member WHERE user_member ='test'");
while($data=mysql_fetch_array($result)){
echo $data[id_member];
}