<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>amCharts examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>
<script type="text/javascript">
var chart;
var chartData = [
<?
$sql=mysql_query("select count(program) as total,program from jobs group by program having count(program) > 5;");
$num=mysql_num_rows($sql);
$n=0;
while($row=mysql_fetch_object($sql)){
$n=$n+1;
?>
{
"program": "<?=$row->program;?>",
"จำนวน": <?=$row->total;?>,
"color": "#FEDFEE"
}<? if($n<$num){?>,<?}else{?><?}?>
<?}?>
];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "program";
// the following two lines makes chart 3D
chart.depth3D = 20;
chart.angle = 30;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.labelRotation = 90;
categoryAxis.dashLength = 5;
categoryAxis.gridPosition = "start";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.title = "จำนวน";
valueAxis.dashLength = 5;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.valueField = "จำนวน";
graph.colorField = "color";
graph.balloonText = "<span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.zoomable = false;
chartCursor.categoryBalloonEnabled = false;
chart.addChartCursor(chartCursor);
chart.creditsPosition = "top-right";
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div class="panel panel-info" style="width:100%">
<div class="panel-heading">โปรแกรม</div>
<div class="panel-body">
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment