chart โดย canvasjs
HTML | Google Responsive | JavaScript | Bootstrap | JSLibrary | CanvasJS.com | JS01 | CGPA | Joom | CommToXLS | AdminTLE | Laravel
Chart ของ Canvasjs.com
แหล่งข้อมูล
+ Blog เล่าเรื่อง Google Chart
+ google_ajax_api_bar.htm
+ Canvasjs.com
+ Webometrics_jan2018.php
+ ฐานข้อมูลปราชญ์ท้องถิ่น
ปัจจุบันมีหลายวิธีในการนำเสนอ Chart ที่สวยงาม บนเว็บเพจ วิธีหนึ่ง คือ AJAX API ที่บริการ Chart ของ Google.com อีกวิธี คือ Javascript ของ Canvasjs.com ทั้งสองวิธีที่ประกอบด้วย 3 ส่วนที่คล้ายกัน คือ 1) เรียกใช้ Javascript script จากภายนอก 2) กำหนดค่าข้อมูลในเว็บเพจ เพื่อส่งให้ script ภายนอก 3) กำหนด Div สำหรับแสดง chart
ต.ย. script ของ google.com
ต.ย. http://www.thaiall.com/php/google_ajax_api_column.htm
<html><head><title>column chart</title><!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var view = new google.visualization.DataView(data); view.setColumns([0, 1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }, 2]);
var options = { title: "Density of Precious Metals, in g/cm^3",  width: 600, height: 400, bar: {groupWidth: "95%"}, legend: { position: "none" }, };
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values")); chart.draw(view, options); }
</script></head><body>source code from : https://developers.google.com/chart/interactive/docs/gallery/columnchart
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>
</body></html>
ต.ย. Chart ของ canvajs.com
Tool สำหรับนำเสนอข้อมูลแบบ Visualization ในรูปของ Chart ที่หลากหลาย โดยไม่ต้องติดตั้ง Script ใน Server ของตนเอง สามารถเขียน Webpage และใส่ Data ในหน้านั้น พร้อมกับเรียกใช้ Javascript กำกับไว้ จาก canvasjs.com จำนวน 2 แฟ้ม คือ jquery-1.11.1.min.js และ jquery.canvasjs.min.js
ต.ย. CanvasJS-Animated-Chart.html
<!DOCTYPE HTML><html><head><script>
window.onload = function () {
var options = { 	title: { text: "Desktop OS Market Share in 2017" }, subtitles: [{ text: "As of November, 2017"	}],	animationEnabled: true,
	data: [{
		type: "pie",
		startAngle: 40,
		toolTipContent: "<b>{label}</b>: {y}%",
		showInLegend: "true",
		legendText: "{label}",
		indexLabelFontSize: 16,
		indexLabel: "{label} - {y}%",
		dataPoints: [
			{ y: 48.36, label: "Windows 7" },
			{ y: 26.85, label: "Windows 10" },
			{ y: 1.49, label: "Windows 8" },
			{ y: 6.98, label: "Windows XP" },
			{ y: 6.53, label: "Windows 8.1" },
			{ y: 2.45, label: "Linux" },
			{ y: 3.32, label: "Mac OS X 10.12" },
			{ y: 4.03, label: "Others" }
		]
	}]
};
$("#chartContainer").CanvasJSChart(options);
}
</script></head><body>
<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</body></html>

Animated-Chart

Bar-Chart

Chart-With-Multiple-Axes

Column-Chart

Multi-Series-Spline-Area-Chart

Responsive-Chart

Scatter-Point-Chart

Spline-Chart-Export-Image

http://goo.gl/72BPC