ボケ防止 暇つぶし 頭の体操 amChart 3D pie を 動かしてみる


JavaScript Charts」を ダウンロードして 3D pie を 動かしてみた

メモ1: データから XM Lまたは CSVコンテンツを 生成する ことで 
    データを 動的に 生成 amChartで 動的に 描画する ことが 可能である
メモ2:外部 CSVファイルを 読み込んで 描画する方法
メモ3:Dynamic Data 別のURLでsome_data_file.xmlに置き換える
メモ4:Fusonic  による amCharts-PHP Class Library, が 下記URLにて 利用できる
http://blog.fusonic.net/2009/02/amcharts-php-class-library/

描画のための コードを 覗いて みる
  ↓↓↓
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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 type="text/javascript">
            var chart;
            var legend;
            var chartData = [{
                country: "Lithuania",
                value: 260
            }, {
                country: "Ireland",
                value: 201
            }, {
                country: "Germany",
                value: 65
            }, {
                country: "Australia",
                value: 39
            }, {
                country: "UK",
                value: 19
            }, {
                country: "Latvia",
                value: 10
            }];
            AmCharts.ready(function () {
                // PIE CHART
                chart = new AmCharts.AmPieChart();
                chart.dataProvider = chartData;
                chart.titleField = "country";
                chart.valueField = "value";
                chart.outlineColor = "#FFFFFF";
                chart.outlineAlpha = 0.8;
                chart.outlineThickness = 2;
                // this makes the chart 3D
                chart.depth3D = 15;
                chart.angle = 30;
                // WRITE
                chart.write("chartdiv");
            });
        </script>
    </head>
    
    <body>
        <div id="chartdiv" style="width: 100%; height: 400px;"></div>
    </body>
</html>


データベースから 描画用データをCSV形式で 取得して 動的に 描画するための PHPサンプルコードを 見る

<?php
 
$host="localhost";
$user="root";
$password="";
$database="stats";
 
// connect to database
mysql_connect($host, $user, $password)
or die ('Unable to connect to server.');
 
mysql_select_db($database)
or die ('Unable to select database.');
 
// select last 20 entries
$query = "SELECT * FROM qstats ORDER BY date DESC LIMIT 20";
$res = mysql_query($query);
 
 
// echo data
while($obj = mysql_fetch_object($res)){  
  $date = $obj->date;
  $visits =  $obj->value;
  $page_views =  $obj->volume;
 
  echo "$date;$visits;$page_views\n";
?


XML:excel形式 データ出力の サンプルコードを 見る

<?php
header('Content-Type: text/xml');
 
$host="localhost";
$user="root";
$password="";
$database="stats";
 
// connect to database
mysql_connect($host, $user, $password)
or die ('Unable to connect to server.');
 
mysql_select_db($database)
or die ('Unable to select database.');
 
// select last 20 entries
$query = "SELECT * FROM qstats ORDER BY date DESC LIMIT 20";
$res = mysql_query($query);
 
// put all the data inside an array
$arr = array();
while($obj = mysql_fetch_object($res)){
  $arr[] = $obj;
}
 
// echo xml
echo "<"."?xml version=\"1.0\" encoding=\"UTF-8\"?".">\n";
echo "<chart>\n";
echo "<series>\n";
 
// echo series
for ($i = sizeof($arr) - 1; $i > 0; $i--) {  
  $date = $arr[$i]->date; 
  echo "<value xid=\"$i\">$date</value>\n";
}
echo "</series>\n";
 
// echo graphs
echo "<graphs>\n";
// first graph
echo "<graph title=\"visits\" gid=\"0\">\n";
for ($i = sizeof($arr) - 1; $i > 0; $i--) {  
  $visits = $arr[$i]->visits; 
  echo "<value xid=\"$i\">$visits</value>\n";
}
echo "</graph>\n";
 
// second graph
echo "<graph title=\"page views\" gid=\"1\">\n";
for ($i = sizeof($arr) - 1; $i > 0; $i--) {  
  $page_views = $arr[$i]->page_views; 
  echo "<value xid=\"$i\">$page_views</value>\n";
}
echo "</graph>\n";
echo "</graphs>\n";
echo "</chart>";
 
?

関連記事

Comment

非公開コメント


全タイトルを表示

openclose

プルダウン 降順 昇順 年別

01月 | 2020年02月 | 03月
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29


全タイトルを表示

​海遊旅人 - Photography ​海遊旅人 - VideoGraphy ​201200819the_wagyu_database2.jpg 201200819google_drive2.jpg 20120829weer_tech00.jpg

名前:
メール:
件名:
本文:

QRコード
・最近記事のRSS
・最新コメントのRSS
・最新トラックバックのRSS


new BL TP ML gif_anime vimeo youtube
Google Picasa flickr Facebook Pin
Globe

*