您的位置: 首页  >  文章  >  使用FusionCharts，PHP，MySQL和JSON创建深入分析

使用FusionCharts，PHP，MySQL和JSON创建深入分析

分类: 文章 • 2024-07-26 08:10:04

如果你能衡量它，你可以管理它。 如果你能想象它太，甚至更好。 企业和个人正在游泳的数据 - 来自社交网络，到预算，以资源规划，我们是由生成的数据和我们大多数人的构建产生为我们自己和我们的客户更多的数据应用程序的工具包围。 它可以提炼和展示的方式，让他们探索知情方式的数据，他们的业务并做出决策答题由您（或您的客户）的业务所产生的数据是一个挑战。

FusionCharts的是一个十分便利的应用程序，让您配置和部署多层次，向下钻取图表目前的数据在一个有吸引力的，简单的界面。 在这篇文章中，我们将通过一个简单的实现使用PHP，MySQL和JSON FusionCharts的大道 - 你可以和使用自己的数据在任何时间运行。

当你正在使用向下钻取数据，你需要开始用数据自然聚集成有意义的组。 在这个例子中，我们将随着时间的推移使用的销售量。 该时间段将提供向下钻取 - 我们将在年内启动，并在特定的日期从那里，核心数据将销售数下钻。 其他示例可以是地理数据，或数据辊向上（或向下）通过类别。

方法和假设

对于这种溶液，将有定制开发集成一个自包含的应用程序，从FusionCharts的三维柱形图的组合。 有近3打图变种从包括散点图，线图，2D和3D选项，等来选择。 FusionCharts的提供.swf文件和.js文件所需的图表，运行文件，则必须提供数据和请求/响应处理程序。

本教程假设你有PHP5并安装到您的Web服务器上的MySQL数据库。 JSON和PHP的功能的理解是必需的。 HTML，CSS和JavaScript的理解也是有帮助的，但对于本教程不那么重要。 这堆不需要 - 你真正需要的是什么数据源，并可以采取http请求，访问数据，以及格式的响应的处理程序。

对于我们而言，虽然我们要实现这个倒也干脆，使我们的PHP文件任何请求都将有一个包含我们需要的所有数据的JSON响应。

介绍 Column3d.swf嵌入chart-json.html
应用控制器和数据访问 linked-chart.php响应与JSON
数据库 <数据库>

所以在我们的例子中，任何请求chart-json.html将导致一些资产，包括JavaScript文件和客户要求制作swf 。 当swf加载它将遵循以加载数据，从而给PHP应用程序的请求传递给它的属性。 该应用程序将访问数据库，检索数据，并格式化响应。 该swf将解析包含在JSON文件中的数据，并建立我们的图形。

已经准备好了？ 我们开始做吧。

实现链接FusionChart

首先，下载核心FusionChart JavaScript和Flash文件在这里 。 遵循的安装说明index.html文件，包含在ZIP。 LinkedCharts是FusionCharts的一个功能，它可以让你有无限钻取功能，用户可以对数据阴谋项目点击和孩子图表将送达了要么替换当前图表或催生了一个子窗口或框架。

在本教程中，我们将重点关注以下文件：

  • /chart-json.html （ 代码包含标记来显示图表， 请点击这里包括专有FusionChart JavaScript和Flash文件。所调用链接chart.php）
  • /linked-chart.php （ 查看代码 PHP连接到MySQL数据库，并输出该数据作为JSON）
  • /FusionCharts.js （ 代码中的zip文件中找到。专有FusionChart文件摄取的JSON并注入数据到Column3D.swf）
  • /Charts/Column3D.swf （ 代码中的zip文件中找到。显示的用户界面，使数据漂亮）

首先，我们需要我们的数据。 由于我们的例子将用整齐地聚集到一年的部分数据的工作，我们就基于时间戳的数据。 我们可以将其分类到使用SQL后群体。

SQL创建数据库表： 

CREATE TABLE 'revenue'

(

  'ID' int(10) unsigned NOT NULL AUTO_INCREMENT,

  'Time' timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',

  PRIMARY KEY ('ID'),

  KEY 'Time' ('Time')

)

另一个PHP脚本，将产生10,000行两年多时间戳记，可以随着时间的推移可以作为我们的销售数据的方式填写表格：

generate-random-data.php 

<?php

//Connect to database

$db_host     = 'database-url-goes-here';

$db_database = 'database-name-goes-here';

$db_username = 'database-username-goes-here';

$db_password = 'database-password-here';

if ( !mysql_connect($db_host, $db_username, $db_password))

    die ("Could not connect to the database server.");

if ( !mysql_select_db($db_database))

    die ("Could not select the database.");

//Set variables

$MinTime = strtotime('2010-01-01');

$MaxTime = strtotime('2010-12-12');

$RecordsToInsert = 10000;

//Generate random time and insert records

for($i = 0; $i < $RecordsToInsert; $i++)

{

      $RandomTime = rand($MinTime, $MaxTime);

      mysql_query("INSERT INTO 'revenue' (Time) VALUES
(FROM_UNIXTIME({$RandomTime}))") or die(mysql_error());

}

//Completed

echo "Inserted {$RecordsToInsert} records.";

?>

现在，让我们打造出来的逻辑层。 这是应用程序的心脏，因为它处理请求并管理数据的检索和响应的格式。 由于它的PHP我们将在一个文件中做了很多：建立数据库连接，收集我们需要使用SQL语句，排序和过滤的响应，然后将该响应格式化成JSON对象。

首先，我们将处理该请求，并确定我们会在URI接受PARAMS： 

<?php

//Sanitizing the input

$Type  = $_GET['type'];

$Year  = intval($_GET['year']);

$Month = intval($_GET['month']);

下一步，我们将建立阵列来处理我们的价值观，用于分割月份的名称。 然后使用基于请求参数去选择和筛选数据为我们想为向下钻取的聚集case语句 - 在这种情况下，月和日。 返回的数据填充的阵列和将被发送到的呼叫FusionCharts.js JSON响应以后使用。 

//Months Names

$MonthsNames = array(null, 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');

//Prepare variables according to type-of-chart

switch($Type)

{

       default:

       case 'monthly':

              $Query = "SELECT MONTH(Time) AS Value, COUNT(*) AS Total FROM 'revenue' WHERE YEAR(Time)={$Year} GROUP BY Value";

              $ResultArray = array_fill(1, 12, 0); // fill the Result array with 0 values for each month

              $ChartHeading = 'Monthly Revenue for the Year: '.$Year;

              $XaxisName = 'Months';

              break;

       case 'daily':

              $Query = "SELECT DAY(Time) AS Value, count(*) AS Total FROM 'revenue' WHERE YEAR(Time)={$Year} AND MONTH(Time)={$Month} GROUP BY Value";

              $ResultArray = array_fill(1, 31, 0);  // fill the Result array with 0 values for each day

              $ChartHeading = 'Daily Revenue for the Month: '.$MonthsNames[$Month].'/'.$Year;

              $XaxisName = 'Days';

              break;

}

建立数据库连接和检索数据 

//Connect to database

$db_host     = 'database-url-goes-here';

$db_database = 'database-name-goes-here';

$db_username = 'database-username-goes-here';

$db_password = 'database-password-here';

if ( !mysql_connect($db_host, $db_username, $db_password))

    die ("Could not connect to the database server.");

if ( !mysql_select_db($db_database))

    die ("Could not select the database.");

//Query the database

$QueryResult = mysql_query($Query);

//Fetch results in the Result Array

while($Row = mysql_fetch_assoc($QueryResult))

       $ResultArray[$Row['Value']]=$Row['Total'];

现在，数据已被检索和存储阵列中的，我们需要格式化我们的JSON响应。 JSON的第一部分将包含FusionCharts的将用于标签的信息。 基于水平，JSON将包含更多或更少的数据 - 对于月12行数据，和行日常的可变数目。

在向下钻取功能的关键是在“链接”属性-通过将URI newchart-jsonurl-get-data.php?type=daily&year='.$Year.'&month='.$MonthNumber.' FusionCharts的将数据的区域内的链接，当用户点击它向下钻取数据的相应月份将被载入。

这里是PHP的样子来生成JSON 

//Generate json: parent node

$Output = '{"chart":{"caption":"'.$ChartHeading.'","xaxisname":"'.$XaxisName.'","yaxisname":"Revenue"}, "data":[';

//Generate JSON: inner nodes for monthly and daily view

switch($Type)

{

       default:

       case 'monthly':

              foreach($ResultArray as $MonthNumber => $value) {  // MonthNumber is month number (1-12)

                     $Output .= '{ "value" : "'.$value.'", "label":"'.$MonthsNames[$MonthNumber].'", "link":"newchart-jsonurl-get-data.php?type=daily&year='.$Year.'&month='.$MonthNumber.'" } ';

                     if ($MonthNumber < count($ResultArray)) {

                           $Output .= ',';

                     }

              }             

              break;

       case 'daily':

              foreach($ResultArray as $DayNumber => $value) { // DayNumber is day (1-31)

                     $Output .= '{ "value" : "'.$value.'", "label":"'.$DayNumber.'" } ';

                     if ($DayNumber < count($ResultArray)) {

                           $Output .= ',';

                     }

              }

              break;

}

$Output .= ']}';

//Send output

echo $Output;

?>

最后，我们需要的是表现层，我们将创建一个HTML页面将包含我们所需要的要求，我们希望传递给LinkedChart的PARAMS。

代码chart-json.html ： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 

<html> 

<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>Linked FusionChart using PHP, JSON and MySQL</title> 

<script type="text/javascript" src="Charts/FusionCharts.js"></script> 

</head> 

<body> 

<div id="chartContainer">FusionCharts will load here</div> 

<script type="text/javascript"> 

<!--

FusionCharts._fallbackJSChartWhenNoFlash();

var myChart = new FusionCharts("Charts/Column3D.swf", "myChartId", "700", "500", "0", "1");

myChart.setJSONUrl("linked-chart.php?year=2010");

myChart.render("chartContainer");

// -->

</script> 

</body> 

</html>

而这里的结果：

使用FusionCharts，PHP，MySQL和JSON创建深入分析

FusionCharts的预期链接是URL编码的，但你可以通过使用“unes​​capelinks”属性为图表覆盖。 由于FusionCharts的建立图表，链接嵌在允许用户每天点击列，并深入到数据的一个新的水平，在这种情况下，列。

使用FusionCharts，PHP，MySQL和JSON创建深入分析

您可以配置的颜色和款式和水平向下钻取由您正在使用的数据真的是节流。

这是一个非常简单的例子，但你可以在很多方面扩展这个。 你可以把通过RESTful接口的数据访问，并添加参数到URI模式，例如。 什么是一些想法，你有吗？ 这个例子使用的表格数据，怎么样钻取地理人口统计数据？ 让我们知道。

From: https://www.sitepoint.com//creating-drill-down-analytics-with-fusioncharts-php-mysql-and-json/

相关推荐