1: <?php
  2: /**
  3:  * WsChart
  4:  * Is class for drawing animated and interactive charts. It uses Chart.js in the
  5:  * background.
  6:  *
  7:  * @var integer $width Chart width
  8:  * @var integer $height Chart height
  9:  * @var array $options Global Chart.js options
 10:  * @var array $attributes HTML Canvas attributes
 11:  *
 12:  */
 13: class WsChart
 14: {
 15:     /**
 16:      * @var array $_labels Chart labels
 17:      *
 18:      */
 19:     protected $_labels = array();
 20:     /**
 21:      * @var array $_datasets Chart datasets
 22:      *
 23:      */
 24:     protected $_datasets = array();
 25:     /**
 26:      * @var array $_options Global Chart.js options
 27:      *
 28:      */
 29:     protected $_options = array();
 30:     /**
 31:      * @var array $_attributes HTML canvas attributes
 32:      *
 33:      */
 34:     protected $_attributes = array();
 35:     /**
 36:      * @var string $_id ID of canvas where chart will be drawn
 37:      *
 38:      */
 39:     protected $_id = '';
 40:     /**
 41:      * @var string $_chart Chart object
 42:      *
 43:      */
 44:     protected $_chart = '';
 45:     /**
 46:      * @var integer $_width Chart width
 47:      *
 48:      */
 49:     protected $_width;
 50:     /**
 51:      * @var integer $_height Chart height
 52:      *
 53:      */
 54:     protected $_height;
 55:     /**
 56:      *@var string #_type Chart type
 57:      *
 58:      */
 59:     protected $_type = 'Line';
 60: 
 61: 
 62:     public function __construct($width='', $height='',
 63:             $options=array(), $attributes=array())
 64:     {
 65:         $this->_id = uniqid('WsChart_');
 66: 
 67:         // Always save canvas attributes as array
 68:         if ($attributes && !is_array($attributes)) {
 69:             $attributes = array($attributes);
 70:         }
 71:         $this->_attributes = $attributes;
 72: 
 73:         // global Chart.js options
 74:         if (!empty($options)) {
 75:             $this->_options = $options;
 76:         }
 77: 
 78:         $this->_width = intval($width);
 79:         $this->_height = intval($height);
 80:     }
 81: 
 82: 
 83:     public function __toString()
 84:     {
 85:         $this->renderChart();
 86:         return $this->_chart;
 87:     }
 88: 
 89: 
 90:     /**
 91:      * show chart
 92:      *
 93:      */
 94:     public function show()
 95:     {
 96:         $this->renderChart();
 97:         echo $this->_chart;
 98:     }
 99: 
100: 
101:     /**
102:      * add labels for chart
103:      *
104:      * @var array/string $labels List of labels or single label to add
105:      * @var boolean $reset Create new list of labels or append to existing
106:      *
107:      */
108:     public function addLabels($label, $reset=false)
109:     {
110:         // new list of labels
111:         if ($reset) {
112:             $this->_labels = array();
113:         }
114: 
115:         if (is_array($label)) {
116:             $this->_labels = array_merge($this->_labels, $label);
117:         } else {
118:             array_push($this->_labels, $label);
119:         }
120:     }
121: 
122: 
123:     /**
124:      * add datasets to chart
125:      *
126:      * @var array $dataset Dataset to add
127:      *
128:      */
129:     public function addDataset($dataset, $reset=null)
130:     {
131:         // new list of dataset
132:         if ($reset) {
133:             $this->_datasets = array();
134:         }
135: 
136:         if (is_array($dataset)) {
137:             array_push($this->_datasets, $dataset);
138:         }
139:     }
140: 
141: 
142:     private function renderChart()
143:     {
144:         // canvas attributes
145:         $attributes = '';
146:         foreach ($this->_attributes as $attribute => $value) {
147:             $attributes .= ' '.$attribute.'="'.$value.'"';
148:         }
149: 
150:         // canvas width
151:         $width = '';
152:         if ($this->_width) {
153:             $width = ' width="' . $this->_width . '"';
154:         }
155: 
156:         // canvas height
157:         $height = '';
158:         if ($this->_height) {
159:             $height = ' height="' . $this->_height . '"';
160:         }
161: 
162:         // HTML canvas that will store chart
163:         $this->_chart = '<canvas id="'
164:                 .$this->_id
165:                 .'" style="border: 1px solid black;" '.$height.$width.$attributes
166:                 .'></canvas>';
167: 
168:         // begining of chart script
169:         $this->_chart .= '<script language="javascript">';
170: 
171:         // prepare chart data
172:         $data = '';
173:         foreach ($this->_datasets as $dataset) {
174:             $data .= '{';
175:             $separator = '';
176: 
177:             // check for background color
178:             if (!array_key_exists('backgroundColor', $dataset)) {
179:                 $data .= 'backgroundColor: randomColor(),';
180:             }
181:             foreach ($dataset as $key=>$val) {
182:                 $data .= $separator.$key.': ';
183: 
184:                 if (is_int( $val )) {
185:                     $data .= $val;
186:                 } elseif (is_string($val)) {
187:                     $data .= '"'.str_replace('"', '\"', $val).'"';
188:                 } elseif (is_bool($val)) {
189:                     $data .= $val ? 'true' : 'false';
190:                 } elseif (is_array($val)) {
191:                     $data .= json_encode($val);
192:                 } else {
193:                     $data .= $val;
194:                 }
195:                 $separator = ', ';
196:             }
197:             $data .= '},';
198:         }
199: 
200: 
201:         // chart data start
202:         $this->_chart .= 'var '.$this->_id.'_data = {';
203:         // labels
204:         $this->_chart .= 'labels: '.json_encode($this->_labels).',';
205:         // datasets
206:         $this->_chart .= 'datasets: ['.$data.'],';
207:         // chart data end
208:         $this->_chart .= '};';
209: 
210:         // caller for Chart.js
211:         $this->_chart .= 'var ctx_'.$this->_id
212:                 .' = document.getElementById("'.$this->_id.'").getContext("2d");'
213:                 .'var '.$this->_id.' = new Chart.'.$this->_type
214:                 .'(ctx_'.$this->_id.', {data: '.$this->_id.'_data});';
215: 
216:         // end of chart script
217:         $this->_chart .= '</script>';
218:     }
219: 
220: 
221:     /**
222:      * set chart type
223:      *
224:      * @var string $type Chart type
225:      *
226:      */
227:     public function setType($type)
228:     {
229:         $accepted_types = array(
230:           'Line',
231:           'Bar',
232:           'Radar',
233:           'PolarArea',
234:           'Pie',
235:           'Doughnut'
236:         );
237: 
238:         if (in_array($type, $accepted_types)) {
239:             $this->_type = $type;
240:         }
241:     }
242: }
243: