|
|
|
FusionCharts โดยดึงข้อมูลมาจากฐานข้อมูลให้มันแสดงบน Chart โดยเป็นกราฟที่นำข้อมูลมาเปรียบเทียบกัน |
|
|
|
|
|
|
|
Code (PHP)
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="../../Contents/assets/ui/css/style.css" rel="stylesheet" type="text/css" />
<link href="../../Contents/assets/prettify/prettify.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="../../Charts/FusionCharts.js"></script>
<script type="text/javascript" src="../../Contents/assets/ui/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../../Contents/assets/prettify/prettify.js"></script>
<script type="text/javascript" src="../../Contents/assets/ui/js/json2.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="../../Contents/assets/ui/js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
/* select the element name, css selector, background etc */
DD_belatedPNG.fix('img');
/* string argument can be any CSS selector */
</script>
<p> </p>
<P align="center"></P>
<![endif]-->
<script type="text/javascript">
$(document).ready ( function () {
$("a.view-chart-data").click( function () {
var chartDATA = '';
if ($(this).children("span").html() == "View XML" ) {
chartDATA = FusionCharts('ChartId').getChartData('xml').replace(/\</gi, "<").replace(/\>/gi, ">");
} else if ($(this).children("span").html() == "View JSON") {
chartDATA = JSON.stringify( FusionCharts('ChartId').getChartData('json') ,null, 2);
}
$('pre.prettyprint').html( chartDATA );
$('.show-code-block').css('height', ($(document).height() - 56) ).show();
prettyPrint();
})
$('.show-code-close-btn a').click(function() {
$('.show-code-block').hide();
});
})
</script>
</head>
<body>
<div id="chartdiv" align="center"></div>
<script type="text/javascript">
var chart = new FusionCharts("../../Charts/MSColumn3D.swf", "ChartId", "560", "400", "0", "0");
chart.setXMLUrl("../Data/XML/MSCol3D4.xml");
chart.render("chartdiv");
</script>
<p> </p>
<p> </p>
<div class="show-code-block">
<div class="show-code-close-btn"><a class="qua qua-button" href="javascript:void(0)"><span></span></a></div>
<pre class="prettyprint"></pre>
</div>
</body>
</html>
นี้เป็นโค้ดกราฟ คะ แต่เรียกข้อมูลมาจาก MSCol3D4.xml ถ้าเราจะให้เรียกมาจาก MySQL ได้หรอป่าวคะ
*****************************************************************************************************************************************************
และนี้คือโค้ด MSCol3D4.xml ที่ว่าคะ อยากให้ตัวเลขที่แสดงมาจาก MySQL คะ
Code (XML)
<chart palette='1' xaxisname='Continent' yaxisname='Export' numdivlines='9' caption='Global Cereal Export' subcaption='In Millions Tonnes per annum per Hectare' >
<categories font='Arial' >
<category label='N. America' toolText='North America'/>
<category label='Asia' />
<category label='Europe' />
<category label='Australia' />
<category label='Africa' />
</categories>
<dataset seriesname='บาดเจ็บเล็กน้อย' color='8BBA00' >
<set value='30' />
<set value='26' />
<set value='29' />
<set value='31' />
<set value='34' />
</dataset>
<dataset seriesname='บาดเจ็บสาหัส' color='A66EDD' >
<set value='67' />
<set value='98' />
<set value='79' />
<set value='73' />
<set value='80' />
</dataset>
<dataset seriesname='เสียชีวิต' color='F6BD0F' >
<set value='27' />
<set value='25' />
<set value='28' />
<set value='26' />
<set value='10' />
</dataset>
</chart>
|
|
|
|
|
Date :
2011-04-24 21:27:55 |
By :
juk |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 00
|