Home > Article > Backend Development > php+highchats generates dynamic statistical chart example code_PHP tutorial

php+highchats generates dynamic statistical chart example code_PHP tutorial

WBOYOriginal: 2016-07-13 10:29:29786browse

Share how php+highchats generates dynamic statistical charts.

Example:

series:<span> [{ 
type</span>: 'pie',<span> 
name</span>: 'Browser share',<span> 
data</span>:<span> [ 
[</span>'Firefox', 45.0],<span> 
[</span>'IE', 26.8],<span> 
{ 
name</span>: 'Chrome',<span> 
y</span>: 12.8,<span> 
sliced</span>: <span>true</span>,<span> 
selected</span>: <span>true</span><span> 
}</span>,<span> 
[</span>'Safari', 8.5],<span> 
[</span>'Opera', 6.2],<span> 
[</span>'Others', 0.7<span>] 
] 
}] </span>

Watch this paragraph mainly:

<span>{ 
name</span>: 'Chrome',<span> 
y</span>: 12.8,<span> 
sliced</span>: <span>true</span>,<span> 
selected</span>: <span>true</span><span> 
}</span>

Articles you may be interested in:

Highcharts Tutorial (22) Bar Chart Example
Highcharts Tutorial (21) Bar Chart Example
Highcharts Tutorial (20) Curve Chart Example 2
Highcharts Tutorial (19) Curve Chart Example 1
Highcharts Tutorial (18) xAxis x-axis style 2
Highcharts Tutorial (17) xAxis x-axis style 1
Highcharts tutorial (16) tooltip tool tip
Highcharts tutorial (15) title title, subtitle subtitle
Highcharts Tutorial (14) Series Data Column Options
Highcharts Tutorial (13) Pie Chart and Other Graphics
Highcharts Tutorial (12) Gauge Measurement Chart
Highcharts tutorial (11) bar chart, column chart, column range chart
Highcharts Tutorial (10) arearange area arrangement chart VSareaspline area curve chart VSareasplinerangeVSbar bar chart
Highcharts tutorial (9) PlotOptions area map
Highcharts tutorial (8) Overview of Pane options and PlotOptions drawing options
Highcharts tutorial (7) loading loading options, navigation options
Highcharts Tutorial (6) legend Legend Options
Highcharts Tutorial (5) Lang Language Options
Highcharts tutorial (4) global global options and labels label options
Highcharts tutorial (3) exporting export and print options
Highcharts tutorial (2) colors and credits business card options
Highcharts tutorial (1) chart chart options

Code:

<!DOCTYPE HTML> 

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>FusionCharts</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript"><span> 
$(</span><span>function</span><span> () { 
</span><span>var</span> ds = [{"name":"\u4e0a\u6d77","y":28.2},{"name":"\u5317\u4eac","y":48.2},{"name":"\u5e7f\u4e1c","y":18.2<span>}]; 
</span><span>//</span><span>其实只要按照例子中的json显示方式展示就行了,如chrome。 
// Radialize the colors </span>
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, <span>function</span><span>(color) { 
</span><span>return</span><span> { 
radialGradient</span>: { cx: 0.5, cy: 0.3, r: 0.7 },<span> 
stops</span>:<span> [ 
[</span>0, color],<span> 
[</span>1, Highcharts.Color(color).brighten(-0.3).get('rgb')] <span>//</span><span> darken </span>
<span>] 
}; 
}); 
</span><span>//</span><span> Build the chart </span>
$('#container').<span>highcharts({ 
chart</span>:<span> { 
plotBackgroundColor</span>: <span>null</span>,<span> 
plotBorderWidth</span>: <span>null</span>,<span> 
plotShadow</span>: <span>false</span><span> 
}</span>,<span> 
title</span>:<span> { 
text</span>: 'Browser market shares at a specific website, 2010'<span> 
}</span>,<span> 
tooltip</span>:<span> { 
pointFormat</span>: '{series.name}: <b>{point.percentage:.1f}%</b>'<span> 
}</span>,<span> 
plotOptions</span>:<span> { 
pie</span>:<span> { 
allowPointSelect</span>: <span>true</span>,<span> 
cursor</span>: 'pointer',<span> 
dataLabels</span>:<span> { 
enabled</span>: <span>true</span>,<span> 
color</span>: '#000000',<span> 
connectorColor</span>: '#000000',<span> 
formatter</span>: <span>function</span><span>() { 
</span><span>return</span> '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'<span>; 
} 
} 
} 
}</span>,<span> 
series</span>:<span> [{ 
type</span>: 'pie',<span> 
name</span>: 'Browser share',<span> 
data</span>: ds,<span> 
}] 
}); 
}); 
</span></script> 
</head> 
<body> 
<script src="js/hc.js"></script> 
<script src="js/modules/exporting.js"></script> 
<div id="container">php 
area(); 
</span><span>/*</span><span>* 
* 地区接口 
* name名称 
* y数据值 
* 
</span><span>*/</span> 
<span>function</span><span> area() 
{ 
</span><span>$b</span> = <span>array</span><span>( 
</span><span>array</span>('name'=>'上海', 'y'=>28.2), 
<span>array</span>('name'=>'北京', 'y'=>48.2), 
<span>array</span>('name'=>'广东', 'y'=>18.2),<span> 
); 
</span><span>$data</span> = json_encode(<span>$b</span><span>); 
</span><span>echo</span>(<span>$data</span><span>); 
} 
</span>?> 
</body> 
</html><span> 
以下是php输出json数据，供js使用</span>:


<?<span>php 
</span><span>$strs</span> = @<span>file</span>("/proc/net/dev"<span>); 
</span><span>for</span> (<span>$i</span> = 2; <span>$i</span> < <span>count</span>(<span>$strs</span>); <span>$i</span>++<span> ) 
{ 
</span><span>preg_match_all</span>( "/([^\s]+):[\s]{0,}(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)/", <span>$strs</span>[<span>$i</span>], <span>$info</span><span> ); 
</span><span>/*</span><span> $NetInput[$i] = formatsize($info[2][0]); 
$NetOut[$i] = formatsize($info[10][0]); 
</span><span>*/</span> 
<span>$tmo</span> = <span>round</span>(<span>$info</span>[2][0]/1024/1024, 5<span>); 
</span><span>$tmo2</span> = <span>round</span>(<span>$tmo</span> / 1024, 5<span>); 
</span><span>$NetInput</span>[<span>$i</span>] = <span>$tmo2</span><span>; 
</span><span>$tmp</span> = <span>round</span>(<span>$info</span>[10][0]/1024/1024, 5<span>); 
</span><span>$tmp2</span> = <span>round</span>(<span>$tmp</span> / 1024, 5<span>); 
</span><span>$NetOut</span>[<span>$i</span>] = <span>$tmp2</span><span>;

}

</span><span>$arr</span> = <span>array</span><span>(); 
</span><span>if</span> (<span>false</span> !== (<span>$strs</span> = @<span>file</span>("/proc/net/dev"))) : 
<span>for</span> (<span>$i</span> = 2; <span>$i</span> < <span>count</span>(<span>$strs</span>); <span>$i</span>++ ) : 
<span>preg_match_all</span>( "/([^\s]+):[\s]{0,}(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)/", <span>$strs</span>[<span>$i</span>], <span>$info</span><span> ); 
</span><span>$arr</span>[<span>$i</span>]["name"] = <span>$info</span>[1][0<span>]; 
</span><span>$arr</span>[<span>$i</span>]["data"][0] = <span>$NetInput</span>[<span>$i</span><span>]; 
</span><span>$arr</span>[<span>$i</span>]["data"][1] = <span>$NetOut</span>[<span>$i</span><span>];

</span><span>endfor</span><span>; 
</span><span>endif</span><span>; 
</span><span>echo</span>(json_encode(<span>$arr</span><span>)); 
</span>?>

Output:

{"2":{"name":"lo","data":[0,0]},"3":{"name":"eth0","data":[0.40377 ,0.00353]}}
js call:

series:<span> [ 
</span><span>] 
</span><span style="white-space:pre"> </span>]

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：PhpDocumentor 2 installation and how to generate API documentation_PHP tutorialNext article：PhpDocumentor 2 installation and how to generate API documentation_PHP tutorial

See more

php+highchats generates dynamic statistical chart example code_PHP tutorial

Articles you may be interested in:

Related articles