Slyweb
На разработку сайта! Скидки 50%!

Рисуем графики на PHP

Графики на страницах с помощью PHP необходимы во многих случаях - для создания опросов и голосований, статистики. Иногда можно использовать Google Api для создания графиков, иногда PHP. Исходя из этого, мы рассмотрим сегодня примеры различных графиков на PHP и Javascript.

В статье я буду использовать классы, изъятые из разных платных приложений, в некоторых случаях их использование разрешается, например, если вы их используете на бесплатном, некоммерческом сайте, более подробное описание лицензии можно найти на сайте http://www.pchart.net/license.

Возможности классов pChart

  • множество геометрических фигур (круги, многоугольники, линии);
  • поддержка теней для фигур;
  • возможность использовать собственные ttf шрифты
  • возможность лёгкой установки и настройки;
  • рисование кривых;
  • создание полупрозрачного эффекта для фигур и линий;

Скачать архив классов php для работы с рисованием графиков.

Пример простого графика нарисованного в php:

Для того чтобы нарисовать этот график понадобился следующий код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.
  3.define('DS', '/');
  4.define('PCHART_CLASS_PATH', './chart'.DS.'class'.DS);
  5.define('PCHART_FONTS_PATH', './chart'.DS.'fonts'.DS);
  6.define('P_TEMP_STORE', './chart'.DS.'tmp'.DS);
  7.
  8.include(PCHART_CLASS_PATH.'pData.class.php');
  9.include(PCHART_CLASS_PATH.'pDraw.class.php');
10.include(PCHART_CLASS_PATH.'pImage.class.php');
11.include(PCHART_CLASS_PATH.'pPie.class.php');
12.include(PCHART_CLASS_PATH.'pCache.class.php');
13.
14.class ChartsHelper{
15.
16.
17.    public function arrayToObject($array) {
18.        if(!is_array($array)) {
19.            return $array;
20.        }
21.        
22.        $object = new stdClass();
23.        if (is_array($array) && count($array) > 0) {
24.         foreach ($array as $name=>$value) {
25.             $name = strtolower(trim($name));
26.             if (!empty($name)) {
27.                $object->$name = ChartsHelper::arrayToObject($value);
28.             }
29.         }
30.         return $object;
31.        }
32.        else {
33.         return FALSE;
34.        }
35.    }
36.
37.
38.    public static function get_poll_bar_chart($poll, $width=0){
39.        
40.        $palette = ChartsHelper::get_pallete($poll->pallete);
41.
42.        $MyData = new pData();
43.        $votes_array = array();
44.        $filename = $poll->id.'-poll-barchart.png';
45.        
46.        $person = array (
47.        array(
48.            'pct' => 1,
49.            'votes' => 2,
50.            'title' => 'Тест'
51.        ),
52.        array(
53.            'pct' => 1,
54.            'votes' => 2,
55.            'title' => 'Тест 2'
56.        ));
57.
58.    
59.        foreach ($person as $answer){
60.        
61.            $votes_array[] = round($answer['pct']);
62.            $labels_array[] = $answer['title']. ' ('.$answer['votes'].' '.($answer['votes'] == 1 ? 'голос' : 'голосов').')';
63.        }
64.        
65.        
66.        $width = $width > 100 ? $width : 500;
67.        $height = count($labels_array)*60;
68.
69.        $MyData->addPoints($labels_array, 'Ответы');
70.        $MyData->addPoints($votes_array, 'Всего голосов');
71.        $MyData->setAxisName(0, 'Всего голосов'.' (in %)');
72.        $MyData->setAbscissaName('Ответы');
73.        //$MyData->setAxisUnit(0, '%');
74.
75.        $myCache = new pCache(array('CacheFolder'=>P_TEMP_STORE));
76.//         $myCache->flush();
77.        
78.        $ChartHash = $myCache->getHash($MyData);
79.
80.        if ( $myCache->isInCache($ChartHash) ){
81.
82.            $myCache->saveFromCache($ChartHash, P_TEMP_STORE.DS.$filename);
83.        }else{
84.
85.            $image = new pImage($width, $height, $MyData);
86.            $image->setFontProperties(array('FontName'=>PCHART_FONTS_PATH.'verdana.ttf','FontSize'=>8));
87.            $image->setGraphArea(30,30,$width-20,$height-20);
88.            $image->drawScale(array('CycleBackground'=>TRUE,'DrawSubTicks'=>TRUE,'GridR'=>0,'GridG'=>0,'GridB'=>0,'GridAlpha'=>10,'Pos'=>SCALE_POS_TOPBOTTOM,'Mode'=>SCALE_MODE_START0,'ManualScale'=>array('0'=>array('Min'=>0,'Max'=>100))));
89.            $image->setShadow(TRUE,array('X'=>1,'Y'=>1,'R'=>0,'G'=>0,'B'=>0,'Alpha'=>10));
90.            $image->drawBarChart(array('DisplayPos'=>LABEL_POS_INSIDE,'GradientMode'=>GRADIENT_EFFECT_CAN,'DisplayValues'=>TRUE,'Rounded'=>TRUE,'Surrounding'=>30,'OverrideColors'=>$palette));
91.
92.            $myCache->writeToCache($ChartHash, $image);
93.
94.            $image->Render(P_TEMP_STORE.DS.$filename);
95.        }
96.            
97.        return $filename;
98.    }
99.
100.    public static function get_poll_pie_chart($poll, $width=0, $height=0){
101.    
102.        $palette = ChartsHelper::get_pallete($poll->pallete);
103.
104.        $MyData = new pData();
105.        $votes_array = array();
106.        $filename = $poll->id.'-poll-barchart.png';
107.
108.        
109.        $person = array (
110.        array(
111.            'pct' => 1,
112.            'votes' => 2,
113.            'title' => 'Тест'
114.        ),
115.        array(
116.            'pct' => 10,
117.            'votes' => 2,
118.            'title' => 'Тест 2'
119.        ),
120.        array(
121.            'pct' => 1,
122.            'votes' => 2,
123.            'title' => 'Тест 3'
124.        ),
125.        array(
126.            'pct' => 1,
127.            'votes' => 2,
128.            'title' => 'Тест 4'
129.        ));
130.
131.    
132.        foreach ($person as $answer){
133.            
134.            $votes_array[] = round($answer['pct']);
135.            $labels_array[] = $answer['title'];
136.        }
137.
138.        $width = $width > 100 ? $width : 300;
139.        $height = $height > 50 ? $height : 200;
140.
141.        $MyData->addPoints($votes_array,'Всего голосов');
142.        $MyData->setAxisName(0, 'Всего голосов'.' (in %)');
143.        $MyData->addPoints($labels_array, 'Answers');
144.        $MyData->setAbscissa('Answers');
145.        $MyData->setAbscissaName('Ответы');
146.
147.        $myCache = new pCache(array('CacheFolder'=>P_TEMP_STORE));
148.        $ChartHash = $myCache->getHash($MyData);
149.
150.//         $myCache->flush();
151.
152.        if ( $myCache->isInCache($ChartHash)){
153.
154.            $myCache->saveFromCache($ChartHash, P_TEMP_STORE.DS.$filename);
155.        }else{
156.
157.            $image = new pImage($width, $height, $MyData, TRUE);
158.            
159.//             $image->dumpImageMap("ImageMap3DPieChart",IMAGE_MAP_STORAGE_FILE,"3DPieChart",P_TEMP_STORE);
160.//             $image->initialiseImageMap("ImageMap3DPieChart",IMAGE_MAP_STORAGE_FILE,"3DPieChart",P_TEMP_STORE);
161.            
162.            $image->setFontProperties(array('FontName'=>PCHART_FONTS_PATH.'verdana.ttf','FontSize'=>8));
163.            $image->setGraphArea(30,30,$width-20,$height-20);
164.            $image->setShadow(TRUE,array('X'=>1,'Y'=>1,'R'=>0,'G'=>0,'B'=>0,'Alpha'=>10));
165.            
166.            $PieChart = new pPie($image, $MyData);
167.            
168.            foreach ($votes_array as $i=>$arr){
169.                
170.                $PieChart->setSliceColor($i, $palette[$i%count($palette)]);
171.            }
172.                
173.            $PieChart->draw3DPie($width/2, $height/2, array('Radius'=>$height/2,'DataGapAngle'=>0,'DataGapRadius'=>0,'Border'=>FALSE, 'WriteValues'=>PIE_VALUE_PERCENTAGE, 'RecordImageMap'=>TRUE, 'DrawLabels'=>FALSE));
174.//             $PieChart->drawPieLegend(30,180,array('Style'=>LEGEND_NOBORDER,'Mode'=>LEGEND_VERTICAL));
175.                
176.            $myCache->writeToCache($ChartHash, $image);
177.
178.            $image->Render(P_TEMP_STORE.DS.$filename);
179.        }
180.        
181.        return $filename;
182.    }
183.    
184.    public static function get_timeline_chart($poll){
185.        
186.        $MyData = new pData();
187.        
188.        $dates = array();
189.        $votes = array();
190.        
191.        $filename = $poll->id.'-timeline-chart.png';
192.        
193.        
194.        $person = array (
195.        array(
196.            'pct' => 1,
197.            'votes' => 1,
198.            'title' => 'Тест',
199.            'vdate' => '1992.03.02'
200.        ),
201.        array(
202.            'pct' => 10,
203.            'votes' => 3,
204.            'title' => 'Тест 2',
205.            'vdate' => '1992.04.02'
206.        ),
207.        array(
208.            'pct' => 1,
209.            'votes' => 2,
210.            'title' => 'Тест 3',
211.            'vdate' => '1992.05.02'
212.        ),
213.        array(
214.            'pct' => 1,
215.            'votes' => 10,
216.            'title' => 'Тест 4',
217.            'vdate' => '1992.06.02'
218.        ));
219.        
220.        foreach($person as $stat){
221.            
222.            $dates[] = $stat['vdate'];
223.            $votes[] = $stat['votes'];
224.        }
225.        
226.        $MyData->addPoints($votes, 'Votes');
227.        $MyData->setAxisName(0, 'Всего голосов');
228.        
229.        $MyData->addPoints($dates, 'Labels');
230.        $MyData->setSerieDescription('Labels', 'Дата');
231.        $MyData->setAbscissa('Labels');
232.        
233.        $myCache = new pCache(array('CacheFolder'=>P_TEMP_STORE));
234.        $ChartHash = $myCache->getHash($MyData);
235.        
236.//         $myCache->flush();
237.        
238.        if ( $myCache->isInCache($ChartHash)){
239.        
240.            $myCache->saveFromCache($ChartHash, P_TEMP_STORE.DS.$filename);
241.        }else{
242.        
243.            $image = new pImage(700, 230, $MyData);
244.            
245.            $image->Antialias = FALSE;
246.            $image->setFontProperties(array('FontName'=>PCHART_FONTS_PATH.'verdana.ttf','FontSize'=>8));
247.            $image->setGraphArea(60,40,650,200);
248.            
249.            $scaleSettings = array("XMargin"=>10,"YMargin"=>10,"Floating"=>TRUE,"GridR"=>55,"GridG"=>55,"GridB"=>55,"DrawSubTicks"=>TRUE,"CycleBackground"=>TRUE);
250.            $image->drawScale($scaleSettings);
251.            $image->drawAreaChart();
252.            
253.            $myCache->writeToCache($ChartHash, $image);
254.            $image->Render(P_TEMP_STORE.DS.$filename);
255.        }
256.        
257.        return $filename;
258.    }
259.    
260.    public static function get_pallete($name='default'){
261.        
262.        switch ($name){
263.            
264.            case 'shankar':
265.                
266.                return array(
267.                    "0"=>array("R"=>100,"G"=>151,"B"=>183,"Alpha"=>100),
268.                    "1"=>array("R"=>224,"G"=>151,"B"=>92,"Alpha"=>100),
269.                    "2"=>array("R"=>224,"G"=>46,"B"=>9,"Alpha"=>100),
270.                    "3"=>array("R"=>92,"G"=>224,"B"=>92,"Alpha"=>100),
271.                    '4'=>array('R'=>188,'G'=>46,'B'=>46,'Alpha'=>100),
272.                    '5'=>array('R'=>188,'G'=>224,'B'=>46,'Alpha'=>100),
273.                    '6'=>array('R'=>176,'G'=>46,'B'=>224,'Alpha'=>100),
274.                    '7'=>array('R'=>46,'G'=>151,'B'=>224,'Alpha'=>100),
275.                    '8'=>array('R'=>9,'G'=>87,'B'=>183,'Alpha'=>100),
276.                    '9'=>array('R'=>224,'G'=>100,'B'=>46,'Alpha'=>100));
277.                
278.            case 'kamala':
279.                
280.                return array(
281.                    "0"=>array("R"=>144,"G"=>189,"B"=>12,"Alpha"=>100),
282.                    "1"=>array("R"=>212,"G"=>80,"B"=>73,"Alpha"=>100),
283.                    "2"=>array("R"=>8,"G"=>145,"B"=>145,"Alpha"=>100),
284.                    "3"=>array("R"=>178,"G"=>219,"B"=>249,"Alpha"=>100),
285.                    '4'=>array('R'=>247,'G'=>192,'B'=>27,'Alpha'=>100),
286.                    '5'=>array('R'=>255,'G'=>235,'B'=>204,'Alpha'=>100),
287.                    '6'=>array('R'=>95,'G'=>216,'B'=>165,'Alpha'=>100),
288.                    '7'=>array('R'=>231,'G'=>45,'B'=>41,'Alpha'=>100),
289.                    '8'=>array('R'=>9,'G'=>87,'B'=>183,'Alpha'=>100),
290.                    '9'=>array('R'=>254,'G'=>254,'B'=>204,'Alpha'=>100));
291.                
292.            case 'autumn':
293.                
294.                return array(
295.                    "0"=>array("R"=>185,"G"=>106,"B"=>154,"Alpha"=>100),
296.                    "1"=>array("R"=>216,"G"=>137,"B"=>184,"Alpha"=>100),
297.                    "2"=>array("R"=>156,"G"=>192,"B"=>137,"Alpha"=>100),
298.                    "3"=>array("R"=>216,"G"=>243,"B"=>201,"Alpha"=>100),
299.                    '4'=>array('R'=>253,'G'=>232,'B'=>215,'Alpha'=>100),
300.                    '5'=>array('R'=>255,'G'=>255,'B'=>255,'Alpha'=>100));
301.                
302.            case 'blind':
303.                
304.                return array(
305.                    "0"=>array("R"=>109,"G"=>152,"B"=>171,"Alpha"=>100),
306.                    "1"=>array("R"=>0,"G"=>39,"B"=>94,"Alpha"=>100),
307.                    '2'=>array('R'=>254,'G'=>183,'B'=>41,'Alpha'=>100),
308.                    '3'=>array('R'=>168,'G'=>177,'B'=>184,'Alpha'=>100),
309.                    '4'=>array('R'=>255,'G'=>255,'B'=>255,'Alpha'=>100),
310.                    '5'=>array('R'=>0,'G'=>0,'B'=>0,'Alpha'=>100));
311.                
312.            case 'evening':
313.                
314.                return array(
315.                    "0"=>array("R"=>242,"G"=>245,"B"=>237,"Alpha"=>100),
316.                    "1"=>array("R"=>255,"G"=>194,"B"=>0,"Alpha"=>100),
317.                    '2'=>array('R'=>255,'G'=>91,'B'=>0,'Alpha'=>100),
318.                    '3'=>array('R'=>184,'G'=>0,'B'=>40,'Alpha'=>100),
319.                    '4'=>array('R'=>132,'G'=>0,'B'=>46,'Alpha'=>100),
320.                    '5'=>array('R'=>74,'G'=>192,'B'=>242,'Alpha'=>100));
321.                
322.            case 'kitchen':
323.                
324.                return array(
325.                    "0"=>array("R"=>155,"G"=>225,"B"=>251,"Alpha"=>100),
326.                    "1"=>array("R"=>197,"G"=>239,"B"=>253,"Alpha"=>100),
327.                    "2"=>array("R"=>189,"G"=>32,"B"=>49,"Alpha"=>100),
328.                    '3'=>array('R'=>35,'G'=>31,'B'=>32,'Alpha'=>100),
329.                    '4'=>array('R'=>255,'G'=>255,'B'=>255,'Alpha'=>100),
330.                    '5'=>array('R'=>0,'G'=>98,'B'=>149,'Alpha'=>100));
331.                
332.            case 'light':
333.                
334.                return array(
335.                    "0"=>array("R"=>239,"G"=>210,"B"=>121,"Alpha"=>100),
336.                    "1"=>array("R"=>149,"G"=>203,"B"=>233,"Alpha"=>100),
337.                    "2"=>array("R"=>2,"G"=>71,"B"=>105,"Alpha"=>100),
338.                    '3'=>array('R'=>175,'G'=>215,'B'=>117,'Alpha'=>100),
339.                    '4'=>array('R'=>44,'G'=>87,'B'=>0,'Alpha'=>100),
340.                    '5'=>array('R'=>222,'G'=>157,'B'=>127,'Alpha'=>100));
341.                
342.            case 'navy':
343.                
344.                return array(
345.                    "0"=>array("R"=>25,"G"=>78,"B"=>132,"Alpha"=>100),
346.                    "1"=>array("R"=>59,"G"=>107,"B"=>156,"Alpha"=>100),
347.                    "2"=>array("R"=>31,"G"=>36,"B"=>42,"Alpha"=>100),
348.                    '3'=>array('R'=>55,'G'=>65,'B'=>74,'Alpha'=>100),
349.                    '4'=>array('R'=>96,'G'=>187,'B'=>34,'Alpha'=>100),
350.                    '5'=>array('R'=>242,'G'=>186,'B'=>187,'Alpha'=>100));
351.                
352.            case 'shade':
353.                
354.                return array(
355.                    "0"=>array("R"=>117,"G"=>113,"B"=>22,"Alpha"=>100),
356.                    "1"=>array("R"=>174,"G"=>188,"B"=>33,"Alpha"=>100),
357.                    '2'=>array('R'=>217,'G'=>219,'B'=>86,'Alpha'=>100),
358.                    '3'=>array('R'=>0,'G'=>71,'B'=>127,'Alpha'=>100),
359.                    '4'=>array('R'=>76,'G'=>136,'B'=>190,'Alpha'=>100),
360.                    '5'=>array('R'=>141,'G'=>195,'B'=>233,'Alpha'=>100));
361.                
362.            case 'spring':
363.                
364.                return array(
365.                    "0"=>array("R"=>146,"G"=>123,"B"=>81,"Alpha"=>100),
366.                    "1"=>array("R"=>168,"G"=>145,"B"=>102,"Alpha"=>100),
367.                    "2"=>array("R"=>128,"G"=>195,"B"=>28,"Alpha"=>100),
368.                    '3'=>array('R'=>188,'G'=>221,'B'=>90,'Alpha'=>100),
369.                    '4'=>array('R'=>255,'G'=>121,'B'=>0,'Alpha'=>100),
370.                    '5'=>array('R'=>251,'G'=>179,'B'=>107,'Alpha'=>100));
371.                
372.            case 'summer':
373.                
374.                return array(
375.                    "0"=>array("R"=>253,"G"=>184,"B"=>19,"Alpha"=>100),
376.                    "1"=>array("R"=>246,"G"=>139,"B"=>31,"Alpha"=>100),
377.                    '2'=>array('R'=>241,'G'=>112,'B'=>34,'Alpha'=>100),
378.                    '3'=>array('R'=>98,'G'=>194,'B'=>204,'Alpha'=>100),
379.                    '4'=>array('R'=>228,'G'=>246,'B'=>248,'Alpha'=>100),
380.                    '5'=>array('R'=>238,'G'=>246,'B'=>108,'Alpha'=>100));
381.                
382.            default:
383.                
384.                return array(
385.                    '0'=>array('R'=>255,'G'=>91,'B'=>0,'Alpha'=>100),
386.                    '1'=>array('R'=>74,'G'=>192,'B'=>242,'Alpha'=>100),
387.                    '2'=>array('R'=>184,'G'=>0,'B'=>40,'Alpha'=>100),
388.                    '3'=>array('R'=>238,'G'=>246,'B'=>108,'Alpha'=>100),
389.                    '4'=>array('R'=>96,'G'=>187,'B'=>34,'Alpha'=>100),
390.                    "5"=>array("R"=>185,"G"=>106,"B"=>154,"Alpha"=>100),
391.                    '6'=>array('R'=>98,'G'=>194,'B'=>204,'Alpha'=>100)
392.                );
393.        }
394.    }
395.    
396.    public static function get_color_palletes(){
397.        
398.        return array(
399.            'default' => 'Default',
400.            'shankar' => 'Shankar',
401.            'kamala' => 'Kamala',
402.            'autumn' => 'Autumn',
403.            'blind' => 'Blind',
404.            'evening' => 'Evening',
405.            'kitchen' => 'Kitchen',
406.            'light' => 'Light',
407.            'navy' => 'Navy',
408.            'shade' => 'Shade',
409.            'spring' => 'Spring',
410.            'summer' => 'Summer'
411.        );
412.    }
413.    
414.    public static function get_rgb_colors($name='default'){
415.        
416.        $colors = array();
417.        $pallete = ChartsHelper::get_pallete($name);
418.        
419.        foreach($pallete as $color){
420.            
421.            $colors[] = ChartsHelper::RGBToHex($color);
422.        }
423.        
424.        return $colors;
425.    }
426.    
427.    public static function HexToRGB($hex) {
428.        
429.        $hex = str_replace('#', '', $hex);
430.        $color = array();
431.        
432.        if(strlen($hex) == 3) {
433.            
434.            $color['R'] = hexdec(substr($hex, 0, 1) . $r);
435.            $color['G'] = hexdec(substr($hex, 1, 1) . $g);
436.            $color['B'] = hexdec(substr($hex, 2, 1) . $b);
437.        }else if(strlen($hex) == 6) {
438.            
439.            $color['R'] = hexdec(substr($hex, 0, 2));
440.            $color['G'] = hexdec(substr($hex, 2, 2));
441.            $color['B'] = hexdec(substr($hex, 4, 2));
442.        }
443.        
444.        $color['Alpha'] = 100;
445.        
446.        return $color;
447.    }
448.    
449.    public static function RGBToHex($rgb) {
450.        
451.        $hex = '#';
452.        $hex.= str_pad(dechex($rgb['R']), 2, '0', STR_PAD_LEFT);
453.        $hex.= str_pad(dechex($rgb['G']), 2, '0', STR_PAD_LEFT);
454.        $hex.= str_pad(dechex($rgb['B']), 2, '0', STR_PAD_LEFT);
455.        
456.        return $hex;
457.    }
458.}
459.
460.
461.$chart = new ChartsHelper();
462.
463.
464.
465.$poll = new stdClass();
466.$poll->id = 2;
467.$poll->pallete = 'spring';
468.$src = $chart->get_poll_pie_chart($poll);
469.
470.$poll = new stdClass();
471.$poll->id = 3;
472.
473.$chart->get_timeline_chart($poll);
474.echo '<div style="width:100%;text-align:center;"><img src="chart/tmp/'.$src.'" /></div>';
475.?>

        

Для правильной работы класса создающиего риснуки графиков необходима следубщая структура директорий (скачать её можно в конце статьи):

./
index.php
	chart/
		class/
		data/
		fonts/
		palettes/
		tmp/

  • index.php - текший страница;
  • class - директория с классами для рисования гарфиков;
  • fonts - шрифты, которые вы можете использовать в графиках;
  • цветовая схема графика;
  • директория в которую помещаяется кэш файл и изображение;

Мы использовали функцию get_poll_pie_chart для того чтобы нарисовать круговую диаграмму. Вместо этой функции можно использовать следующие функции:

  • get_timeline_chart - линейный график с равномерным отображением линии;
  • get_poll_bar_chart - линейный график с динамическим отображением линии на графике;

Пример графика, созданного функцией get_poll_bar_chart:

Пример графика, созданного функцией get_timeline_chart:

Скачать архив классов php для работы с рисованием графиков.

Некоторые графики на php вполне возможно объединить с графиками из Google Charts. Например, круговой график в Google Charts полностью соответствует круговой диаграмме отображённой ранее на странице:

Пример использования графиков Google Charts

Один из возможных вариантов использования графиков Google Charts создание индикатора загрузки файла:

Для создания индикатора можно использовать следующий код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.    <!--Load the AJAX API-->
  2.    <script type="text/javascript" src="jsapi.js"></script>
  3.    <script type="text/javascript">
  4.
  5.     // Load the Visualization API and the piechart package.
  6.     google.load('visualization', '1.0', {'packages':['corechart']});
  7.
  8.     // Set a callback to run when the Google Visualization API is loaded.
  9.     google.setOnLoadCallback(drawChart);
10.
11.     // Callback that creates and populates a data table,
12.     // instantiates the pie chart, passes in the data and
13.     // draws it.
14.     function drawChart() {
15.
16.        
17.        var data = new google.visualization.DataTable();
18.        data.addColumn('string', '%');
19.        data.addColumn('number', 'Загружено');
20.        data.addRows([
21.         ['Загрузка...', 0]
22.
23.        ]);
24.
25.
26.        var options = {
27.            title: 'Загрузка файла в %',
28.            width: 200,
29.            height: 140,
30.            animation:{
31.             duration: 1000,
32.             easing: 'out',
33.            },
34.            vAxis: {minValue:0, maxValue:100}
35.        };
36.        
37.        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div5'));
38.        chart.draw(data, options);
39.    
40.    var i = 0;
41.    var ss;
42.    $.fn.st = function(){
43.
44.            var newValue = 2;
45.
46.    i++;    
47.            if(i<=100) {
48.                data.setValue(0, 1, i);
49.            } else {
50.                clearInterval(ss);
51.            }
52.
53.            chart.draw(data, options);
54.
55.    
56.    }
57.    $('#chart_div4').click(function(){
58.        var ss = setInterval("$('body').st();",1000);
59.    });
60.    }
61.    
62.    
63.
64.
65.</script>
66.
67.<button id="chart_div4" style="margin:0 auto;width:300px;">Нажмите</button>
68.
69.<div id="chart_div5" style="margin:0 auto;width:300px;"></div>

        

Для того чтобы этот код использовать в реальном приложении нужно заменить этот код ajax запросом, который будет возвращать ответ с данными о количестве загруженного файла:

  • Код
  • Чистый код
  • Копировать в буфер
  1. $('#chart_div4').click(function(){
  2.        var ss = setInterval("$('body').st();",1000);
  3.    });

        

ранее я писал о том как использовать кроссбраузерный способ отображения статуса загрузки файла (...cross-fileupload-progressbar) он может пригодиться Вам для замены тестового примера.

gChart

Если Вам не хватило инструментов для работы с графиками и диаграммами то можете использовать класс php "gChart" от Google. Все нижеуказанные диаграммы и графики созданы с использованием "gChart".

Диаграмма


код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.$piChart = new gPieChart();
  3.$piChart->addDataSet(array(112,315,66,40));
  4.$piChart->setLegend(array("first", "second", "third","fourth"));
  5.$piChart->setLabels(array("first", "second", "third","fourth"));
  6.$piChart->setColors(array("ff3344", "11ff11", "22aacc", "3333aa"));
  7.?>

        

3D диаграмма


код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.$pie3dChart = new gPie3DChart();
  3.$pie3dChart->addDataSet(array(112,315,66,40));
  4.$pie3dChart->setLegend(array("first", "second", "third","fourth"));
  5.$pie3dChart->setLabels(array("first", "second", "third","fourth"));
  6.$pie3dChart->setColors(array("ff3344", "11ff11", "22aacc", "3333aa"));
  7.?>

        

Диаграмма


код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.$CPChart = new gConcentricPieChart();
  3.$CPChart->addDataSet(array(112,315,66,40));
  4.$CPChart->addDataSet(array(100,235,346,50));
  5.$CPChart->addColors(array("008800", "880000"));
  6.$CPChart->addColors(array("000088", "888800"));
  7.$CPChart->addLegend(array('1', '2', '3', '4'));
  8.$CPChart->addLegend(array('1a', '2a', '3a', '4a'));
  9.?>

        

Линейный график


код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.$lineChart = new gLineChart(300,300);
  3.$lineChart->addDataSet(array(112,315,66,40));
  4.$lineChart->addDataSet(array(212,115,366,140));
  5.$lineChart->addDataSet(array(112,95,116,140));
  6.$lineChart->setLegend(array("first", "second", "third","fourth"));
  7.$lineChart->setColors(array("ff3344", "11ff11", "22aacc", "3333aa"));
  8.$lineChart->setVisibleAxes(array('x','y'));
  9.$lineChart->setDataRange(30,400);
10.$lineChart->addAxisRange(0, 1, 4, 1);
11.$lineChart->addAxisRange(1, 30, 400);
12.$lineChart->addBackgroundFill('bg', 'EFEFEF');
13.$lineChart->addBackgroundFill('c', '000000');
14.?>

        

Линейный график с заполнением


код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.$lineChart = new gLineChart(300,300);
  3.$lineChart->addDataSet(array(112,315,66,40));
  4.$lineChart->addDataSet(array(212,115,366,140));
  5.$lineChart->addDataSet(array(112,95,116,140));
  6.$lineChart->setLegend(array("first", "second", "third","fourth"));
  7.$lineChart->setColors(array("ff3344", "11ff11", "22aacc", "3333aa"));
  8.$lineChart->setVisibleAxes(array('x','y'));
  9.$lineChart->setDataRange(30,400);
10.$lineChart->addAxisLabel(0, array("This", "axis", "has", "labels!"));
11.$lineChart->addAxisRange(1, 30, 400);
12.$lineChart->setStripFill('bg',0,array('CCCCCC',0.15,'FFFFFF',0.1));
13.?>

        

Линейный график


код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.$lineChart = new gLineChart(300,300);
  3.$lineChart->addDataSet(array(112,125,66,40));
  4.$lineChart->setLegend(array("first"));
  5.$lineChart->setColors(array("ff3344"));
  6.$lineChart->setVisibleAxes(array('x','y'));
  7.$lineChart->setDataRange(30,130);
  8.$lineChart->addAxisRange(0, 1, 4, 1);
  9.$lineChart->addAxisRange(1, 30, 130);
10.$lineChart->addLineFill('B','76A4FB',0,0);
11.?>

        

Линейный график с несколькими линиями


код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.$lineChart = new gLineChart(300,300);
  3.$lineChart->addDataSet(array(112,315,66,40));
  4.$lineChart->addDataSet(array(212,115,366,140));
  5.$lineChart->addDataSet(array(112,95,116,140));
  6.$lineChart->setLegend(array("first", "second", "third","fourth"));
  7.$lineChart->setColors(array("ff3344", "11ff11", "22aacc", "3333aa"));
  8.$lineChart->setVisibleAxes(array('x','y'));
  9.$lineChart->setDataRange(0,400);
10.$lineChart->addAxisRange(0, 1, 4, 1);
11.$lineChart->addAxisRange(1, 0, 400);
12.$lineChart->setGridLines(33,10);
13.?>

        

Групповая диаграмма


код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.$barChart = new gBarChart(500,150,'g');
  3.$barChart->addDataSet(array(112,315,66,40));
  4.$barChart->addDataSet(array(212,115,366,140));
  5.$barChart->addDataSet(array(112,95,116,140));
  6.$barChart->setColors(array("ff3344", "11ff11", "22aacc"));
  7.$barChart->setLegend(array("first", "second", "third"));
  8.$barChart->setGradientFill('c',0,array('FFE7C6',0,'76A4FB',1));
  9.$barChart->setAutoBarWidth();
10.?>

        

Горизонтальная диаграмма


код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.$barChart = new gBarChart(150,500,'g','h');
  3.$barChart->addDataSet(array(112,315,66,40));
  4.$barChart->addDataSet(array(212,115,366,140));
  5.$barChart->addDataSet(array(112,95,116,140));
  6.$barChart->setColors(array("ff3344", "11ff11", "22aacc"));
  7.$barChart->setLegend(array("first", "second", "third"));
  8.$barChart->setGradientFill('c',0,array('FFE7C6',0,'76A4FB',1));
  9.$barChart->setLegend(array("This", "is", "different"));
10.?>

        

Верикальная диаграмма


код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.$barChart = new gStackedBarChart(450,350);
  3.$barChart->addDataSet(array(112,315,66,40));
  4.$barChart->addDataSet(array(212,115,366,140));
  5.$barChart->addDataSet(array(112,95,116,140));
  6.$barChart->setLegend(array("first", "second", "third","fourth"));
  7.$barChart->setColors(array("ff3344", "11ff11", "22aacc", "3333aa"));
  8.$barChart->setTitle("A multiline
  9.A Title");
10.?>

        

Горизонтальная диаграмма


код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.$barChart->setHorizontal(true);
  3.$barChart->groupSpacerWidth = 10;
  4.?>

        

Круговая диаграмма


код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.$vennDiagram = new gVennDiagram();
  3.$vennDiagram->setSizes(1120,3150);
  4.$vennDiagram->setIntersections(220, 320);
  5.$vennDiagram->setEncodingType('s');
  6.$vennDiagram->setColors(array("ff3344", "11ff11", "22aacc", "3333aa"));
  7.?>

        

Круговая диаграмма


код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.$vennDiagram = new gVennDiagram();
  3.$vennDiagram->setSizes(20, 20, 20);
  4.$vennDiagram->setIntersections(0, 4, 6, 2);
  5.$vennDiagram->setColors(array("ff3344", "11ff11", "22aacc", "3333aa"));
  6.?>

        

Формула


код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.$latex = new gFormula();
  3.$latex -> setLatexCode('\cos(x)^2+\sin(x)^2=1');
  4.?>

        

Штрих код


код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.$qr = new gQRCode();
  3.$qr -> setQRCode('gChartPhp is awesome!');
  4.?>

        

Google-o-Meter


код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.$meter = new gMeterChart();
  3.$meter -> addDataSet(array(10, 50, 90));
  4.$meter -> setColors(array('FFFFFF','000000'));
  5.?>

        

Крата - диаграмма


код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.$map = new gMapChart();
  3.$map -> setZoomArea('usa');
  4.$map -> setStateCodes(array('CA', 'TX', 'NY', 'UT', 'NV'));
  5.$map -> addDataSet(array(23, 32, 12, 54, 23));
  6.$map -> setColors('342544', array('BE3481','34BE12'));
  7.?>

        

Разбросанная диаграмма


код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.$scatter = new gScatterChart();
  3.$scatter -> addDataSet(array(12,87,75,41,23,96,68,71,34,9));
  4.$scatter -> addDataSet(array(98,60,27,34,56,79,58,74,18,76));
  5.$scatter -> addValueMarkers('d','FF0000',0,-1,15);
  6.$scatter -> setVisibleAxes(array('x','y'));
  7.$scatter -> addAxisRange(0, 0, 100);
  8.$scatter -> addAxisRange(1, 0, 100);
  9.?>

        

Групповая диаграмма

код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.$barChart = new gBarChart(250,250,'s');
  3.$barChart->addDataSet(array(0,10,20,30,20,70,80));
  4.$barChart->addDataSet(array(0,20,10,5,20,30,10));
  5.$barChart->addHiddenDataSet(array(10,0,20,15,60,40,30));
  6.$barChart->addValueMarkers('D','76A4FB',2,0,3);
  7.$barChart->setAutoBarWidth();
  8.?>

        

Подсвечники


диаграмма с подсвечнками, класс "gGroupedBarChart" и метод addValueMarkers().

код:

  • Код
  • Чистый код
  • Копировать в буфер
  1.<?php
  2.$candlestick = new gLineChart(200,125);
  3.$candlestick -> addDataSet(array(90,80,70,50,40,30,20,10));
  4.$candlestick -> addHiddenDataSet(array(0,5,10,0,5,10,0));
  5.$candlestick -> addHiddenDataSet(array(2,15,20,5,15,40,0));
  6.$candlestick -> addHiddenDataSet(array(5,35,20,2,35,20,0));
  7.$candlestick -> addHiddenDataSet(array(15,40,30,15,40,50,0));
  8.$candlestick -> addValueMarkers('F','000000',1,'1:-2',20);
  9.$candlestick -> setVisibleAxes(array('y'));
10.$candlestick -> addAxisRange(0, 0, 100);
11.?>

        


Александр Ермаков