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

fusioncharts

如果可以衡量，就可以对其进行管理。 如果您也可以将其可视化，那就更好了。 从社交网络到预算，再到资源计划，企业和个人都在使用大量数据，我们周围都是生成数据的工具，并且我们大多数人构建的应用程序会为我们自己和我们的客户生成更多的数据。 提取和呈现您（或您客户的）企业生成的数据的方式可能是一个挑战，使他们能够探索数据以回答有关其业务的问题并以明智的方式做出决策。

FusionCharts是一个非常易于访问的应用程序，可让您配置和部署多层深入图表，以有吸引力的简单界面显示数据。 在本文中，我们将介绍使用PHP，MySQL和JSON的FusionCharts的简单实现-您可以使用自己的数据立即启动并运行。

当使用向下钻取数据时，您需要从自然聚合为有意义的组的数据开始。 在此示例中，我们将随着时间使用销量。 时间段将提供详细信息-我们将从几年开始，然后从那里进行详细信息，核心数据将是特定日期的销售计数。 其他示例可以是地理数据，也可以是通过类别汇总（或汇总）的数据。

方法和假设

对于此解决方案，将结合定制开发和集成的独立应用程序，即FusionCharts的3D柱形图。 几乎有3种图表变体可供选择，包括散点图，折线图，2D和3D选项等。 FusionCharts提供运行图表所需的.swf和.js文件，您将必须提供数据和请求/响应处理程序。

本教程假定您在Web服务器上安装了PHP5和mySQL数据库。 需要对JSON和PHP具有功能上的了解。 对HTML，CSS和JavaScript的理解也很有帮助，但对本教程而言并不那么重要。 不需要此堆栈-您真正需要的是一个数据源和一个处理程序，可以处理http请求，访问数据并格式化响应。

为了我们的目的，尽管我们将非常简单地实现此目的，以便对我们的php文件的任何请求都将具有一个JSON响应，其中包含我们需要的所有数据。

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

因此，在我们的示例中，对chart-json.html任何请求chart-json.html将导致客户端请求多个资产，包括javascript文件和swf 。 当swf加载时，它将遵循传递给它的属性以加载数据，从而向php应用程序发出请求。 该应用将访问数据库，检索数据并格式化响应。 swf将解析JSON文件中包含的数据并构建我们的图形。

准备开始吗？ 我们开始做吧。

实施链接的FusionChart

首先，在此处下载核心的FusionChart JavaScript和Flash文件。 请按照zip中包含的index.html文件中的安装说明进行操作。 LinkedCharts是FusionCharts的一项功能，可让您拥有无限的向下钻取功能，用户可以单击数据图项，然后将提供子图，以替换当前图或将其生成到子窗口或框架。

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

• /chart-json.html （ 单击此处获取代码，包含显示图表的标记。包括专有的FusionChart JavaScript和Flash文件。调用linked-chart.php）
• /linked-chart.php （ 单击此处以获取连接到mySQL数据库并以JSON输出数据的代码 php）
• /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中接受的参数：

<?php

//Sanitizing the input

$Type  = $_GET['type'];

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

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

接下来，我们将设置数组以处理用于细分月份名称的值。 然后根据请求中的参数使用案例语句，以选择数据并将其过滤到我们要提供的汇总中（在这种情况下为几个月和几天）。 返回的数据将填充数组，稍后将在发送给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行数据，每天行数不定。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

向下钻取功能的关键是在“链接”属性中-通过传递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的参数。

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希望链接经过URL编码，但是您可以通过为图表使用'unescapelinks'属性来覆盖此链接。 在FusionCharts构建图表时，链接嵌入在列中，允许用户单击列并向下钻取下一级数据（在本例中为每日数据）。

您可以配置颜色和样式，并且所使用的数据实际上限制了向下钻取的级别。

这是一个非常简单的示例，但是您可以通过很多方式扩展它。 例如，您可以使数据通过RESTful接口访问，并向URI模式添加参数。 您有什么想法？ 此示例使用表格数据，而向下钻取的人口统计数据如何？ 让我们知道

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

fusioncharts