Highcharts – deeper practice for real statistics Everyone of us can face with a situation, when we need to handle with some statistics. Me too, I was going to make a short review on how to build active charts (diagrams), and in the long run I built quite actual statistical graphs, which initially are presented as CSV files. I found this statistics here, where I chose a couple of interesting tables: Marital Status and Educational Attainment. I developed the script that is able to select data from one or even multiple tables (of a CSV file), drawing various graphs for analyzing. In today’s article I will show you an interesting method of parsing CSV files, and displays the results in graphs using Highcharts.
高图–进行实际统计的更深入实践 ，当我们需要处理一些统计数据时，我们每个人都可以面对这种情况。 我也是，我将简短地回顾如何构建活动图表(图表)，从长远来看，我会构建相当实际的统计图，最初以CSV文件形式显示。 我在这里找到了这些统计数据，在这里我选择了几个有趣的表格：婚姻状况和受教育程度。 我开发了能够从一个或多个表(一个CSV文件)中选择数据的脚本，可以绘制各种图形进行分析。 在今天的文章中，我将向您展示一种解析CSV文件的有趣方法，并使用Highcharts将结果显示在图形中。
现场演示
现场演示2
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
Ok, let’s download the source files and start coding !
好的，让我们下载源文件并开始编码！
步骤1. HTML (Step 1. HTML)
In the most beginning we have to include all necessary styles scripts in the header section:
首先，我们必须在标题部分中包含所有必需的样式脚本：
<!-- add styles -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!-- add scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/skies.js"></script>
<script src="main.js"></script>
<!-- add styles -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!-- add scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/skies.js"></script>
<script src="main.js"></script>
We included jQuery and highcharts libraries, one small CSS file to stilize our page, and one main.js file with our own custom code. Rest of the code can looks like this:
我们包括jQuery和highcharts库，一个用于填充页面的小型CSS文件以及一个具有我们自己的自定义代码的main.js文件。 其余代码如下所示：
<!-- Various actions -->
<div class="actions">
<button class="switcher" id="2">Get stat #2 (Both)</button>
<button class="switcher" id="19">Get stat #19 (Males)</button>
<button class="switcher" id="36">Get stat #36 (Females)</button>
<button class="switcher" id="multiple">Range</button>
</div>
<!-- Chart container object -->
<div id="container" class="chart"></div>
<!-- Various actions -->
<div class="actions">
<button class="switcher" id="2">Get stat #2 (Both)</button>
<button class="switcher" id="19">Get stat #19 (Males)</button>
<button class="switcher" id="36">Get stat #36 (Females)</button>
<button class="switcher" id="multiple">Range</button>
</div>
<!-- Chart container object -->
<div id="container" class="chart"></div>
There are just several buttons (to evoke different events) and the container for chart object.
只有几个按钮(用于引发不同事件)和用于图表对象的容器。
步骤2. CSS (Step 2. CSS)
css / main.css (css/main.css)
All we need is to add few styles for our buttons:
我们所需要做的就是为按钮添加一些样式：
.actions, .chart {
margin: 15px auto;
width: 1000px;
}
button {
background: none repeat scroll 0 0 #E3E3E3;
border: 1px solid #BBBBBB;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 1px 1px #F6F6F6 inset;
color: #333333;
font: bold 12px;
margin: 0 5px;
padding: 8px 0 9px;
text-align: center;
text-shadow: 0 1px 0 #FFFFFF;
width: 150px;
}
button:hover {
background: none repeat scroll 0 0 #D9D9D9;
box-shadow: 0 0 1px 1px #EAEAEA inset;
color: #222222;
cursor: pointer;
}
button:active {
background: none repeat scroll 0 0 #D0D0D0;
box-shadow: 0 0 1px 1px #E3E3E3 inset;
color: #000000;
}
.actions, .chart {
margin: 15px auto;
width: 1000px;
}
button {
background: none repeat scroll 0 0 #E3E3E3;
border: 1px solid #BBBBBB;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 1px 1px #F6F6F6 inset;
color: #333333;
font: bold 12px;
margin: 0 5px;
padding: 8px 0 9px;
text-align: center;
text-shadow: 0 1px 0 #FFFFFF;
width: 150px;
}
button:hover {
background: none repeat scroll 0 0 #D9D9D9;
box-shadow: 0 0 1px 1px #EAEAEA inset;
color: #222222;
cursor: pointer;
}
button:active {
background: none repeat scroll 0 0 #D0D0D0;
box-shadow: 0 0 1px 1px #E3E3E3 inset;
color: #000000;
}
步骤3. JS (Step 3. JS)
Now, we can overview the final JS code and I will explain how it works:
现在，我们可以概述最终的JS代码，我将解释其工作方式：
main.js (main.js)
// on document ready
$(document).ready(function() {
// prepare an empty Highcharts object
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
showAxes: true,
height: 700
},
title: {
text: 'Marital Status (United States: 2011)',
},
credits: {
text: 'By Script Tutorials'
},
xAxis: {
title: {
text: 'Categories'
}
},
yAxis: {
title: {
text: 'Amount'
}
}
});
$('.switcher').click(function () {
var id = $(this).attr('id');
// display Loading message
chart.showLoading('Getting stat data ....');
if (id != 'multiple') {
// get stat data (json)
$.getJSON('data.php?id=' + id, function(aData) {
// remove all existing series
while (chart.series.length) {
chart.series[0].remove();
}
// re-set categories for X axe
var categories = [];
$.each(aData.categories, function(idx, res) {
categories.push(res);
});
chart.xAxis[0].setCategories(categories);
chart.yAxis[0].axisTitle.attr({
text: 'Amount of ' + aData.name + 's (thousands)'
});
// gather data (values) and prepare a new Series array
var seriesValData = [];
$.each(aData.values, function(idx, res) {
seriesValData.push([res.name, parseFloat(res.val)]);
});
var seriesValues = {
name: aData.name,
data: seriesValData,
type: 'column'
}
// gather data (percentages) and prepare a new Series array
var seriesPerData = [];
$.each(aData.percentages, function(idx, res) {
seriesPerData.push([res.name, parseFloat(res.val)]);
});
var seriesPercentages = {
name: aData.name + ' (%)',
data: seriesPerData,
type: 'pie',
size: '40%',
center: ['60%', '30%'],
showInLegend: true
}
// hide Loading, add both series and redraw our chart
chart.hideLoading();
chart.addSeries(seriesValues, false);
chart.addSeries(seriesPercentages, false);
chart.redraw();
});
} else {
// get stat data (json)
$.getJSON('data2.php', function(aData) {
// remove all existing series
while (chart.series.length) {
chart.series[0].remove();
}
// re-set categories for X axe
var categories = [];
$.each(aData.categories, function(idx, res) {
categories.push(res);
});
chart.xAxis[0].setCategories(categories);
chart.yAxis[0].axisTitle.attr({
text: 'Percentage'
});
// hide Loading
chart.hideLoading();
$.each(aData.series, function(idx, ser) {
// gather data (percentages) and prepare a new Series array
var seriesValData = [];
$.each(ser.values, function(idx, res) {
seriesValData.push([res.name, parseFloat(res.val)]);
});
var seriesValues = {
name: ser.name,
data: seriesValData,
type: 'column',
}
// and add the series into chart
chart.addSeries(seriesValues, false);
});
// add both series and redraw our chart
chart.redraw();
});
}
});
});
// on document ready
$(document).ready(function() {
// prepare an empty Highcharts object
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
showAxes: true,
height: 700
},
title: {
text: 'Marital Status (United States: 2011)',
},
credits: {
text: 'By Script Tutorials'
},
xAxis: {
title: {
text: 'Categories'
}
},
yAxis: {
title: {
text: 'Amount'
}
}
});
$('.switcher').click(function () {
var id = $(this).attr('id');
// display Loading message
chart.showLoading('Getting stat data ....');
if (id != 'multiple') {
// get stat data (json)
$.getJSON('data.php?id=' + id, function(aData) {
// remove all existing series
while (chart.series.length) {
chart.series[0].remove();
}
// re-set categories for X axe
var categories = [];
$.each(aData.categories, function(idx, res) {
categories.push(res);
});
chart.xAxis[0].setCategories(categories);
chart.yAxis[0].axisTitle.attr({
text: 'Amount of ' + aData.name + 's (thousands)'
});
// gather data (values) and prepare a new Series array
var seriesValData = [];
$.each(aData.values, function(idx, res) {
seriesValData.push([res.name, parseFloat(res.val)]);
});
var seriesValues = {
name: aData.name,
data: seriesValData,
type: 'column'
}
// gather data (percentages) and prepare a new Series array
var seriesPerData = [];
$.each(aData.percentages, function(idx, res) {
seriesPerData.push([res.name, parseFloat(res.val)]);
});
var seriesPercentages = {
name: aData.name + ' (%)',
data: seriesPerData,
type: 'pie',
size: '40%',
center: ['60%', '30%'],
showInLegend: true
}
// hide Loading, add both series and redraw our chart
chart.hideLoading();
chart.addSeries(seriesValues, false);
chart.addSeries(seriesPercentages, false);
chart.redraw();
});
} else {
// get stat data (json)
$.getJSON('data2.php', function(aData) {
// remove all existing series
while (chart.series.length) {
chart.series[0].remove();
}
// re-set categories for X axe
var categories = [];
$.each(aData.categories, function(idx, res) {
categories.push(res);
});
chart.xAxis[0].setCategories(categories);
chart.yAxis[0].axisTitle.attr({
text: 'Percentage'
});
// hide Loading
chart.hideLoading();
$.each(aData.series, function(idx, ser) {
// gather data (percentages) and prepare a new Series array
var seriesValData = [];
$.each(ser.values, function(idx, res) {
seriesValData.push([res.name, parseFloat(res.val)]);
});
var seriesValues = {
name: ser.name,
data: seriesValData,
type: 'column',
}
// and add the series into chart
chart.addSeries(seriesValues, false);
});
// add both series and redraw our chart
chart.redraw();
});
}
});
});
In the beginning (on document ready) our script prepares an empty Highcharts object (where we can put initial params like various titles and height. After, I added onclick event handler for our buttons. First three buttons are to generate sumple charts (using only one table from CSV file). The last one button is to obtain range (which is predefined by me). This range is a range between tables 3 and 17. I will explain the structure of tables soon (in next step). Well, when we click to the one of buttons, we send a request ($.getJSON) to data.php file, this file parses CSV file and returns a JSON response to us. And now we can: remove all existing series of our Chart object (series – means some data here), then we parse all categories from server response and add own custom categories for X axis, then we parse all stat data in order to prepare a new object (of series) for Chart. In case if we request for a single table, our script (data.php) returns categories, values (amounts of people) and percentages. For values, I use ‘column’ chart, for percentages – ‘pie’. In case when we request for a whole range, we age going to use only percentages (for every used table).
在开始时(准备好文档)，我们的脚本准备了一个空的Highcharts对象(我们可以在其中放置初始参数，例如各种标题和高度。之后，为按钮添加了onclick事件处理程序。前三个按钮用于生成汇总图表(仅使用CSV文件中的一个表)。最后一个按钮是获取范围(由我预先定义)。该范围是表3和表17之间的范围。我将很快解释表的结构(在下一步中)。当我们单击按钮之一时，我们向data.php文件发送一个请求($ .getJSON)，该文件将解析CSV文件并返回JSON响应给我们，现在我们可以：删除所有现有的Chart对象系列(系列-这里表示一些数据)，然后我们从服务器响应中解析所有类别，并为X轴添加自己的自定义类别，然后我们解析所有统计数据，以便为Chart准备一个新的(系列)对象。请求单个表时，我们的脚本(data.php)返回类别，值(人数) 和百分比。 对于值，我使用“列”图表，对于百分比–“饼”。 如果我们要求整个范围，我们将仅使用百分比(对于每个使用的表)。
Now, I think that I have to explain a bit about structure of provided CSV files. I downloaded two files (2011gender_table10.csv and 2011gender_table11.csv) from census.gov website. I’m pretty sure that this is official statistics of US. Every file, consists of some comments (I noticed, that first 4 rows as usual – comments, which explain content of this file) and various ‘tables’ with necessary content. Few weeks ago I located the very good PHP parser for CSV files (http://code.google.com/p/parsecsv-for-php/). So, I decided to use it for today’s demos. And, the result surpassed all expectations! This library was able to skip all these comments in the beginning of CSV file (using ‘offset’ param). In the result, I got a set of various tables (after it parses CSV files). In case of selected CSV files, I noticed, that few two tables contain set of ‘categories’ (like Married, Widowed, Divorced, Separated and Never married) and types of information for next tables. All other tables contain actual statistics.
现在，我想我不得不解释一下所提供的CSV文件的结构。 我从census.gov网站下载了两个文件(2011gender_table10.csv和2011gender_table11.csv)。 我很确定这是美国的官方统计数据。 每个文件都包含一些注释(我注意到，前四行照常-注释，用于解释该文件的内容)以及各种带有必要内容的“表”。 几周前，我找到了非常好的CSV文件PHP分析器(http://code.google.com/p/parsecsv-for-php/)。 因此，我决定将其用于今天的演示。 并且，结果超出了所有期望！ 该库能够跳过CSV文件开头的所有这些注释(使用“偏移”参数)。 结果，我得到了一组各种表(在解析CSV文件之后)。 我注意到，在选择CSV文件的情况下，很少有两个表包含一组“类别”(例如“已婚”，“丧偶”，“离婚”，“分居”和“未婚”)以及下一个表的信息类型。 所有其他表均包含实际统计信息。
As example, in ‘Marital status’ table (2011gender_table10.csv) you can find information about Marital Status of the Population 15 Years and Over by Sex and Age (US, 2011).
例如，在“婚姻状况”表(2011gender_table10.csv)中，您可以找到按性别和年龄划分的15岁及15岁以上人口的婚姻状况信息(美国，2011年)。
In ‘Educational Attainment’ table (2011gender_table11.csv) you can find information about Educational Attainment of the Population 15 Years and Over by Sex and Age (US, 2011).
在“教育程度”表(2011gender_table11.csv)中，您可以找到按性别和年龄分列的15岁及15岁以上人口的教育程度(美国，2011年)。
步骤4. PHP (Step 4. PHP)
Now, the final step – where I will tell you how to make a server-side script to prepare data for our JS code:
现在，最后一步–我将告诉您如何制作服务器端脚本来为JS代码准备数据：
data.php (data.php)
function splitByPairs($array) {
$odd = array();
$even = array();
$both = array(&$even, &$odd);
array_walk($array, function($v, $k) use ($both) { $both[$k % 2][] = $v; });
return array($odd, $even);
}
require_once('parsecsv.lib.php');
// select filename
$sFilename = (isset($_GET['extra'])) ? '2011gender_table11.csv' : '2011gender_table10.csv';
// parse CSV
$csv = new parseCSV($sFilename, 4); // 4 is offset (of rows with comments)
// get all categories from the first table
$aCats = array();
foreach ($csv->data[0] as $s) {
if ($s = trim($s)) {
$aCats[] = $s;
}
}
// get stat number (ID)
$i = (int)$_GET['id'];
// Get exact Stat info by ID
$sTitle = $csv->data[$i]['Sex and age'];
$aDataSlc = array_slice($csv->data[$i], 3); // we can remove (slice) first three fields (they contain title and total information)
$aData = array();
foreach ($aDataSlc as $s) {
$aData[] = $s;
}
// separate $aData array to odd and even pairs
list($aPerc, $aVals) = splitByPairs($aData);
// prepare separated arrays of amounts and percentages with category names
$i = 0;
$aValRows = $aPercRows = array();
foreach ($aCats as $s) {
$fValue = str_replace(',', '.', $aVals[$i]);
$fValue = ((float)$fValue) ? (float)$fValue : 0;
$aValRows[] = array('name' => $s, 'val' => $fValue);
$fPercent = str_replace(',', '.', $aPerc[$i]);
$fPercent = ((float)$fPercent) ? (float)$fPercent : 0;
$aPercRows[] = array('name' => $s, 'val' => $fPercent);
$i++;
}
// echo JSON data
$aJson = array();
$aJson['name'] = trim($sTitle);
$aJson['categories'] = $aCats;
$aJson['values'] = $aValRows;
$aJson['percentages'] = $aPercRows;
echo json_encode($aJson);
function splitByPairs($array) {
$odd = array();
$even = array();
$both = array(&$even, &$odd);
array_walk($array, function($v, $k) use ($both) { $both[$k % 2][] = $v; });
return array($odd, $even);
}
require_once('parsecsv.lib.php');
// select filename
$sFilename = (isset($_GET['extra'])) ? '2011gender_table11.csv' : '2011gender_table10.csv';
// parse CSV
$csv = new parseCSV($sFilename, 4); // 4 is offset (of rows with comments)
// get all categories from the first table
$aCats = array();
foreach ($csv->data[0] as $s) {
if ($s = trim($s)) {
$aCats[] = $s;
}
}
// get stat number (ID)
$i = (int)$_GET['id'];
// Get exact Stat info by ID
$sTitle = $csv->data[$i]['Sex and age'];
$aDataSlc = array_slice($csv->data[$i], 3); // we can remove (slice) first three fields (they contain title and total information)
$aData = array();
foreach ($aDataSlc as $s) {
$aData[] = $s;
}
// separate $aData array to odd and even pairs
list($aPerc, $aVals) = splitByPairs($aData);
// prepare separated arrays of amounts and percentages with category names
$i = 0;
$aValRows = $aPercRows = array();
foreach ($aCats as $s) {
$fValue = str_replace(',', '.', $aVals[$i]);
$fValue = ((float)$fValue) ? (float)$fValue : 0;
$aValRows[] = array('name' => $s, 'val' => $fValue);
$fPercent = str_replace(',', '.', $aPerc[$i]);
$fPercent = ((float)$fPercent) ? (float)$fPercent : 0;
$aPercRows[] = array('name' => $s, 'val' => $fPercent);
$i++;
}
// echo JSON data
$aJson = array();
$aJson['name'] = trim($sTitle);
$aJson['categories'] = $aCats;
$aJson['values'] = $aValRows;
$aJson['percentages'] = $aPercRows;
echo json_encode($aJson);
In the beginning of this script, you can see that we use ‘parsecsv.lib.php’ library to parse the one of CSV files. Then we walk (foreach) through first table in order to obtain categories (of statistics). After, we extract a requested table (by ID) and gather all it’s fields (except for the first three fields, They contain title of table, total amount and total percentage). Then, we have to split result array with data to odd and even values (all because there are mix of Valies and Percentages). I made the special function to separate arrays: splitByPairs. Finally, we can prepare final separated arrays with values (amounts of people) and percentages for our JS script.
在此脚本的开头，您可以看到我们使用“ parsecsv.lib.php”库来解析一个CSV文件。 然后，我们遍历(foreach)第一个表，以获得(统计)类别。 之后，我们提取请求的表(按ID)并收集其所有字段(前三个字段除外，它们包含表的标题，总金额和总百分比)。 然后，我们必须将带有数据的结果数组拆分为奇数和偶数值(所有这些都是因为混合了价位和百分比)。 我做了特殊的功能来分离数组：splitByPairs。 最后，我们可以为JS脚本准备包含值(人数)和百分比的最终分隔的数组。
Now please pay attention that I use another one ‘data2.php’ file to prepare data for range of tables, here it is:
现在请注意，我使用另一个“ data2.php”文件来准备表范围的数据，这里是：
data2.php (data2.php)
function splitByPairs($array) {
$odd = array();
$even = array();
$both = array(&$even, &$odd);
array_walk($array, function($v, $k) use ($both) { $both[$k % 2][] = $v; });
return array($odd, $even);
}
require_once('parsecsv.lib.php');
// select filename
$sFilename = (isset($_GET['extra'])) ? '2011gender_table11.csv' : '2011gender_table10.csv';
// parse CSV
$csv = new parseCSV($sFilename, 4); // 4 is offset (of rows with comments)
// get all categories from the first table
$aCats = array();
foreach ($csv->data[0] as $s) {
if ($s = trim($s)) {
$aCats[] = $s;
}
}
// prepare array of series (range of tables)
$iStart = 3;
$iEnd = 17;
$aSeries = array();
for ($x = $iStart; $x <= $iEnd; $x++) {
// Get exact Stat info by ID
$sTitle = $csv->data[$x]['Sex and age'];
$aDataSlc = array_slice($csv->data[$x], 3); // we can remove (slice) first three fields (they contain title and total information)
$aData = array();
foreach ($aDataSlc as $s) {
$aData[] = $s;
}
// separate $aData array to odd and even pairs
list($aPerc, $aVals) = splitByPairs($aData);
// prepare separated array of percentages with category names
$i = 0;
$aPercRows = array();
foreach ($aCats as $s) {
$fPercent = str_replace(',', '.', $aPerc[$i]);
$fPercent = ((float)$fPercent) ? (float)$fPercent : 0;
$aPercRows[] = array('name' => $s, 'val' => $fPercent);
$i++;
}
$aSeries[] = array(
'name' => trim($sTitle),
'values' => $aPercRows
);
}
// echo JSON data
$aJson = array();
$aJson['categories'] = $aCats;
$aJson['series'] = $aSeries;
echo json_encode($aJson);
function splitByPairs($array) {
$odd = array();
$even = array();
$both = array(&$even, &$odd);
array_walk($array, function($v, $k) use ($both) { $both[$k % 2][] = $v; });
return array($odd, $even);
}
require_once('parsecsv.lib.php');
// select filename
$sFilename = (isset($_GET['extra'])) ? '2011gender_table11.csv' : '2011gender_table10.csv';
// parse CSV
$csv = new parseCSV($sFilename, 4); // 4 is offset (of rows with comments)
// get all categories from the first table
$aCats = array();
foreach ($csv->data[0] as $s) {
if ($s = trim($s)) {
$aCats[] = $s;
}
}
// prepare array of series (range of tables)
$iStart = 3;
$iEnd = 17;
$aSeries = array();
for ($x = $iStart; $x <= $iEnd; $x++) {
// Get exact Stat info by ID
$sTitle = $csv->data[$x]['Sex and age'];
$aDataSlc = array_slice($csv->data[$x], 3); // we can remove (slice) first three fields (they contain title and total information)
$aData = array();
foreach ($aDataSlc as $s) {
$aData[] = $s;
}
// separate $aData array to odd and even pairs
list($aPerc, $aVals) = splitByPairs($aData);
// prepare separated array of percentages with category names
$i = 0;
$aPercRows = array();
foreach ($aCats as $s) {
$fPercent = str_replace(',', '.', $aPerc[$i]);
$fPercent = ((float)$fPercent) ? (float)$fPercent : 0;
$aPercRows[] = array('name' => $s, 'val' => $fPercent);
$i++;
}
$aSeries[] = array(
'name' => trim($sTitle),
'values' => $aPercRows
);
}
// echo JSON data
$aJson = array();
$aJson['categories'] = $aCats;
$aJson['series'] = $aSeries;
echo json_encode($aJson);
This is similar script as our first ‘data.php’. But, we don’t extract data from only one table, but we use a range of tables (from 3 to 17 tables). And, we don’t use values (amounts), but only Percentages. I think that it is enough for our demo.
这与我们的第一个“ data.php”脚本相似。 但是，我们不仅仅从一个表中提取数据，而是使用一系列表(3到17个表)。 而且，我们不使用值(金额)，而仅使用百分比。 我认为这足以满足我们的演示要求。
现场演示
现场演示2
结论 (Conclusion)
That is all for today. We have just created the really interesting and actual charts (with Highcharts) of real marital and educational statistics of 2011 (for US). I’m sure that this material will be very useful for you. Good luck and welcome back
今天就这些。 我们刚刚创建了2011年(针对美国)真实的婚姻和教育统计数据的非常有趣和实际的图表(带有Highcharts)。 我相信这份资料对您将非常有用。 祝你好运，欢迎回来
翻译自: https://www.script-tutorials.com/highcharts-deeper-practice-for-real-statistics/
438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
