From cfacf52a4203ad529a560ae490332c535550c94f Mon Sep 17 00:00:00 2001
From: FrancescoUK <francesco.lodolo.uk@gmail.com>
Date: Sun, 22 May 2016 19:01:16 +0100
Subject: [PATCH] Changed graphical reports to use Chartist (#342)

---
 application/controllers/Reports.php       | 304 ++++++++--------------
 application/views/reports/graphical.php   |  12 +-
 application/views/reports/graphs/bar.php  | 122 ++++++---
 application/views/reports/graphs/hbar.php | 129 +++++----
 application/views/reports/graphs/line.php | 141 ++++++----
 application/views/reports/graphs/pie.php  |  68 +++--
 6 files changed, 418 insertions(+), 358 deletions(-)

diff --git a/application/controllers/Reports.php b/application/controllers/Reports.php
index 73adf2709..fc226bb3f 100644
--- a/application/controllers/Reports.php
+++ b/application/controllers/Reports.php
@@ -398,77 +398,64 @@ class Reports extends Secure_area
 	{
 		$this->load->model('reports/Summary_sales');
 		$model = $this->Summary_sales;
+		
+		$report_data = $model->getData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type));
+
+		$labels = '';
+		$series = '';
+		foreach($report_data as $row)
+		{
+			$labels .= "'" . date($this->config->item('dateformat'), strtotime($row['sale_date'])) . "', ";
+			$series .= $row['total'] . ", ";
+		}
 
 		$data = array(
 			"title" => $this->lang->line('reports_sales_summary_report'),
-			"data_file" => site_url("reports/graphical_summary_sales_graph/$start_date/$end_date/$sale_type"),
 			"subtitle" => date($this->config->item('dateformat'), strtotime($start_date)) . '-' . date($this->config->item('dateformat'), strtotime($end_date)),
-			"summary_data" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type))
+			"chart_type" => "reports/graphs/line",
+			"labels_1" => rtrim($labels, ", "),
+			"series_data_1" => rtrim($series, ", "),
+			"summary_data_1" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type)),
+			"yaxis_title" => $this->lang->line('reports_revenue'),
+			"xaxis_title" => $this->lang->line('reports_date')
 		);
 
 		$this->load->view("reports/graphical", $data);
 	}
 
-	//The actual graph data
-	function graphical_summary_sales_graph($start_date, $end_date, $sale_type)
+	private function _escapeJavaScriptText($string)
 	{
-		$this->load->model('reports/Summary_sales');
-		$model = $this->Summary_sales;
-		$report_data = $model->getData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type));
-
-		$graph_data = array();
-		foreach($report_data as $row)
-		{
-			$graph_data[date($this->config->item('dateformat'), strtotime($row['sale_date']))] = $row['total'];
-		}
-
-		$data = array(
-			"title" => $this->lang->line('reports_sales_summary_report'),
-			"yaxis_label"=>$this->lang->line('reports_revenue'),
-			"xaxis_label"=>$this->lang->line('reports_date'),
-			"data" => $graph_data
-		);
-
-		$this->load->view("reports/graphs/line", $data);
+		return str_replace("\n", '\n', str_replace('"', '\"', addcslashes(str_replace("\r", '', (string)$string), "\0..\37'\\")));
 	}
-
+	
 	//Graphical summary items report
 	function graphical_summary_items($start_date, $end_date, $sale_type)
 	{
 		$this->load->model('reports/Summary_items');
 		$model = $this->Summary_items;
-
-		$data = array(
-			"title" => $this->lang->line('reports_items_summary_report'),
-			"data_file" => site_url("reports/graphical_summary_items_graph/$start_date/$end_date/$sale_type"),
-			"subtitle" => date($this->config->item('dateformat'), strtotime($start_date)) . '-' . date($this->config->item('dateformat'), strtotime($end_date)),
-			"summary_data" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type))
-		);
-
-		$this->load->view("reports/graphical", $data);
-	}
-
-	//The actual graph data
-	function graphical_summary_items_graph($start_date, $end_date, $sale_type)
-	{
-		$this->load->model('reports/Summary_items');
-		$model = $this->Summary_items;
+		
 		$report_data = $model->getData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type));
 
-		$graph_data = array();
+		$labels = '';
+		$series = '';
 		foreach($report_data as $row)
 		{
-			$graph_data[$row['name']] = $row['total'];
+			$labels .= "'" . $this->_escapeJavaScriptText($row['name']) . "', ";
+			$series .= $row['total'] . ", ";
 		}
 
 		$data = array(
 			"title" => $this->lang->line('reports_items_summary_report'),
-			"xaxis_label"=>$this->lang->line('reports_revenue'),
-			"yaxis_label"=>$this->lang->line('reports_items'),
-			"data" => $graph_data
+			"subtitle" => date($this->config->item('dateformat'), strtotime($start_date)) . '-' . date($this->config->item('dateformat'), strtotime($end_date)),
+			"chart_type" => "reports/graphs/hbar",
+			"labels_1" => rtrim($labels, ", "),
+			"series_data_1" => rtrim($series, ", "),
+			"summary_data_1" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type)),
+			"yaxis_title" => $this->lang->line('reports_items'),
+			"xaxis_title" => $this->lang->line('reports_revenue')
 		);
 
-		$this->load->view("reports/graphs/hbar", $data);
+		$this->load->view("reports/graphical", $data);
 	}
 
 	//Graphical summary customers report
@@ -476,36 +463,27 @@ class Reports extends Secure_area
 	{
 		$this->load->model('reports/Summary_categories');
 		$model = $this->Summary_categories;
-
-		$data = array(
-			"title" => $this->lang->line('reports_categories_summary_report'),
-			"data_file" => site_url("reports/graphical_summary_categories_graph/$start_date/$end_date/$sale_type"),
-			"subtitle" => date($this->config->item('dateformat'), strtotime($start_date)) . '-' . date($this->config->item('dateformat'), strtotime($end_date)),
-			"summary_data" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type))
-		);
-
-		$this->load->view("reports/graphical", $data);
-	}
-
-	//The actual graph data
-	function graphical_summary_categories_graph($start_date, $end_date, $sale_type)
-	{
-		$this->load->model('reports/Summary_categories');
-		$model = $this->Summary_categories;
+		
 		$report_data = $model->getData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type));
 
-		$graph_data = array();
+		$labels = '';
+		$series = '';
 		foreach($report_data as $row)
 		{
-			$graph_data[$row['category']] = $row['total'];
+			$labels .= "'" . $row['category'] . "', ";
+			$series .= $row['total'] . ", ";
 		}
 
 		$data = array(
 			"title" => $this->lang->line('reports_categories_summary_report'),
-			"data" => $graph_data
+			"subtitle" => date($this->config->item('dateformat'), strtotime($start_date)) . '-' . date($this->config->item('dateformat'), strtotime($end_date)),
+			"chart_type" => "reports/graphs/pie",
+			"labels_1" => rtrim($labels, ", "),
+			"series_data_1" => rtrim($series, ", "),
+			"summary_data_1" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type))
 		);
 
-		$this->load->view("reports/graphs/pie", $data);
+		$this->load->view("reports/graphical", $data);
 	}
 
 	//Graphical summary suppliers report
@@ -513,36 +491,27 @@ class Reports extends Secure_area
 	{
 		$this->load->model('reports/Summary_suppliers');
 		$model = $this->Summary_suppliers;
-
-		$data = array(
-			"title" => $this->lang->line('reports_suppliers_summary_report'),
-			"data_file" => site_url("reports/graphical_summary_suppliers_graph/$start_date/$end_date/$sale_type"),
-			"subtitle" => date($this->config->item('dateformat'), strtotime($start_date)) . '-' . date($this->config->item('dateformat'), strtotime($end_date)),
-			"summary_data" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type))
-		);
-
-		$this->load->view("reports/graphical", $data);
-	}
-
-	//The actual graph data
-	function graphical_summary_suppliers_graph($start_date, $end_date, $sale_type)
-	{
-		$this->load->model('reports/Summary_suppliers');
-		$model = $this->Summary_suppliers;
+		
 		$report_data = $model->getData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type));
 
-		$graph_data = array();
+		$labels = '';
+		$series = '';
 		foreach($report_data as $row)
 		{
-			$graph_data[$row['supplier']] = $row['total'];
+			$labels .= "'" . $row['supplier'] . "', ";
+			$series .= $row['total'] . ", ";
 		}
 
 		$data = array(
 			"title" => $this->lang->line('reports_suppliers_summary_report'),
-			"data" => $graph_data
+			"subtitle" => date($this->config->item('dateformat'), strtotime($start_date)) . '-' . date($this->config->item('dateformat'), strtotime($end_date)),
+			"chart_type" => "reports/graphs/pie",
+			"labels_1" => rtrim($labels, ", "),
+			"series_data_1" => rtrim($series, ", "),
+			"summary_data_1" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type))
 		);
 
-		$this->load->view("reports/graphs/pie", $data);
+		$this->load->view("reports/graphical", $data);
 	}
 
 	//Graphical summary employees report
@@ -550,36 +519,27 @@ class Reports extends Secure_area
 	{
 		$this->load->model('reports/Summary_employees');
 		$model = $this->Summary_employees;
-
-		$data = array(
-			"title" => $this->lang->line('reports_employees_summary_report'),
-			"data_file" => site_url("reports/graphical_summary_employees_graph/$start_date/$end_date/$sale_type"),
-			"subtitle" => date($this->config->item('dateformat'), strtotime($start_date)) . '-' . date($this->config->item('dateformat'), strtotime($end_date)),
-			"summary_data" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type))
-		);
-
-		$this->load->view("reports/graphical", $data);
-	}
-
-	//The actual graph data
-	function graphical_summary_employees_graph($start_date, $end_date, $sale_type)
-	{
-		$this->load->model('reports/Summary_employees');
-		$model = $this->Summary_employees;
+		
 		$report_data = $model->getData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type));
 
-		$graph_data = array();
+		$labels = '';
+		$series = '';
 		foreach($report_data as $row)
 		{
-			$graph_data[$row['employee']] = $row['total'];
+			$labels .= "'" . $row['employee'] . "', ";
+			$series .= $row['total'] . ", ";
 		}
 
 		$data = array(
 			"title" => $this->lang->line('reports_employees_summary_report'),
-			"data" => $graph_data
+			"subtitle" => date($this->config->item('dateformat'), strtotime($start_date)) . '-' . date($this->config->item('dateformat'), strtotime($end_date)),
+			"chart_type" => "reports/graphs/pie",
+			"labels_1" => rtrim($labels, ", "),
+			"series_data_1" => rtrim($series, ", "),
+			"summary_data_1" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type))
 		);
 
-		$this->load->view("reports/graphs/pie", $data);
+		$this->load->view("reports/graphical", $data);
 	}
 
 	//Graphical summary taxes report
@@ -587,36 +547,27 @@ class Reports extends Secure_area
 	{
 		$this->load->model('reports/Summary_taxes');
 		$model = $this->Summary_taxes;
-
-		$data = array(
-			"title" => $this->lang->line('reports_taxes_summary_report'),
-			"data_file" => site_url("reports/graphical_summary_taxes_graph/$start_date/$end_date/$sale_type"),
-			"subtitle" => date($this->config->item('dateformat'), strtotime($start_date)) . '-' . date($this->config->item('dateformat'), strtotime($end_date)),
-			"summary_data" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type))
-		);
-
-		$this->load->view("reports/graphical", $data);
-	}
-
-	//The actual graph data
-	function graphical_summary_taxes_graph($start_date, $end_date, $sale_type)
-	{
-		$this->load->model('reports/Summary_taxes');
-		$model = $this->Summary_taxes;
+		
 		$report_data = $model->getData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type));
 
-		$graph_data = array();
+		$labels = '';
+		$series = '';
 		foreach($report_data as $row)
 		{
-			$graph_data[$row['percent']] = $row['total'];
+			$labels .= "'" . $row['percent'] . "', ";
+			$series .= $row['total'] . ", ";
 		}
 
 		$data = array(
 			"title" => $this->lang->line('reports_taxes_summary_report'),
-			"data" => $graph_data
+			"subtitle" => date($this->config->item('dateformat'), strtotime($start_date)) . '-' . date($this->config->item('dateformat'), strtotime($end_date)),
+			"chart_type" => "reports/graphs/pie",
+			"labels_1" => rtrim($labels, ", "),
+			"series_data_1" => rtrim($series, ", "),
+			"summary_data_1" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type))
 		);
 
-		$this->load->view("reports/graphs/pie", $data);
+		$this->load->view("reports/graphical", $data);
 	}
 
 	//Graphical summary customers report
@@ -624,38 +575,29 @@ class Reports extends Secure_area
 	{
 		$this->load->model('reports/Summary_customers');
 		$model = $this->Summary_customers;
-
-		$data = array(
-			"title" => $this->lang->line('reports_customers_summary_report'),
-			"data_file" => site_url("reports/graphical_summary_customers_graph/$start_date/$end_date/$sale_type"),
-			"subtitle" => date($this->config->item('dateformat'), strtotime($start_date)) . '-' . date($this->config->item('dateformat'), strtotime($end_date)),
-			"summary_data" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type))
-		);
-
-		$this->load->view("reports/graphical", $data);
-	}
-
-	//The actual graph data
-	function graphical_summary_customers_graph($start_date, $end_date, $sale_type)
-	{
-		$this->load->model('reports/Summary_customers');
-		$model = $this->Summary_customers;
+		
 		$report_data = $model->getData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type));
 
-		$graph_data = array();
+		$labels = '';
+		$series = '';
 		foreach($report_data as $row)
 		{
-			$graph_data[$row['customer']] = $row['total'];
+			$labels .= "'" . $row['customer'] . "', ";
+			$series .= $row['total'] . ", ";
 		}
 
 		$data = array(
 			"title" => $this->lang->line('reports_customers_summary_report'),
-			"xaxis_label"=>$this->lang->line('reports_revenue'),
-			"yaxis_label"=>$this->lang->line('reports_customers'),
-			"data" => $graph_data
+			"subtitle" => date($this->config->item('dateformat'), strtotime($start_date)) . '-' . date($this->config->item('dateformat'), strtotime($end_date)),
+			"chart_type" => "reports/graphs/hbar",
+			"labels_1" => rtrim($labels, ", "),
+			"series_data_1" => rtrim($series, ", "),
+			"summary_data_1" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type)),
+			"yaxis_title" => $this->lang->line('reports_customers'),
+			"xaxis_title" => $this->lang->line('reports_revenue')
 		);
 
-		$this->load->view("reports/graphs/hbar", $data);
+		$this->load->view("reports/graphical", $data);
 	}
 
 	//Graphical summary discounts report
@@ -663,38 +605,29 @@ class Reports extends Secure_area
 	{
 		$this->load->model('reports/Summary_discounts');
 		$model = $this->Summary_discounts;
-
-		$data = array(
-			"title" => $this->lang->line('reports_discounts_summary_report'),
-			"data_file" => site_url("reports/graphical_summary_discounts_graph/$start_date/$end_date/$sale_type"),
-			"subtitle" => date($this->config->item('dateformat'), strtotime($start_date)) . '-' . date($this->config->item('dateformat'), strtotime($end_date)),
-			"summary_data" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type))
-		);
-
-		$this->load->view("reports/graphical", $data);
-	}
-
-	//The actual graph data
-	function graphical_summary_discounts_graph($start_date, $end_date, $sale_type)
-	{
-		$this->load->model('reports/Summary_discounts');
-		$model = $this->Summary_discounts;
+		
 		$report_data = $model->getData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type));
 
-		$graph_data = array();
+		$labels = '';
+		$series = '';
 		foreach($report_data as $row)
 		{
-			$graph_data[$row['discount_percent']] = $row['count'];
+			$labels .= "'" . $row['discount_percent'] . "', ";
+			$series .= $row['count'] . ", ";
 		}
 
 		$data = array(
 			"title" => $this->lang->line('reports_discounts_summary_report'),
-			"yaxis_label"=>$this->lang->line('reports_count'),
-			"xaxis_label"=>$this->lang->line('reports_discount_percent'),
-			"data" => $graph_data
+			"subtitle" => date($this->config->item('dateformat'), strtotime($start_date)) . '-' . date($this->config->item('dateformat'), strtotime($end_date)),
+			"chart_type" => "reports/graphs/bar",
+			"labels_1" => rtrim($labels, ", "),
+			"series_data_1" => rtrim($series, ", "),
+			"summary_data_1" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type)),
+			"yaxis_title" => $this->lang->line('reports_count'),
+			"xaxis_title" => $this->lang->line('reports_discount_percent')
 		);
 
-		$this->load->view("reports/graphs/bar", $data);
+		$this->load->view("reports/graphical", $data);
 	}
 
 	//Graphical summary payments report
@@ -702,38 +635,27 @@ class Reports extends Secure_area
 	{
 		$this->load->model('reports/Summary_payments');
 		$model = $this->Summary_payments;
-
-		$data = array(
-			"title" => $this->lang->line('reports_payments_summary_report'),
-			"data_file" => site_url("reports/graphical_summary_payments_graph/$start_date/$end_date/$sale_type"),
-			"subtitle" => date($this->config->item('dateformat'), strtotime($start_date)) . '-' . date($this->config->item('dateformat'), strtotime($end_date)),
-			"summary_data" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type))
-		);
-
-		$this->load->view("reports/graphical", $data);
-	}
-
-	//The actual graph data
-	function graphical_summary_payments_graph($start_date, $end_date, $sale_type)
-	{
-		$this->load->model('reports/Summary_payments');
-		$model = $this->Summary_payments;
+		
 		$report_data = $model->getData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type));
 
-		$graph_data = array();
+		$labels = '';
+		$series = '';
 		foreach($report_data as $row)
 		{
-			$graph_data[$row['payment_type']] = $row['payment_amount'];
+			$labels .= "'" . $row['payment_type'] . "', ";
+			$series .= $row['payment_amount'] . ", ";
 		}
 
 		$data = array(
 			"title" => $this->lang->line('reports_payments_summary_report'),
-			"yaxis_label"=>$this->lang->line('reports_revenue'),
-			"xaxis_label"=>$this->lang->line('reports_payment_type'),
-			"data" => $graph_data
+			"subtitle" => date($this->config->item('dateformat'), strtotime($start_date)) . '-' . date($this->config->item('dateformat'), strtotime($end_date)),
+			"chart_type" => "reports/graphs/pie",
+			"labels_1" => rtrim($labels, ", "),
+			"series_data_1" => rtrim($series, ", "),
+			"summary_data_1" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type))
 		);
 
-		$this->load->view("reports/graphs/pie", $data);
+		$this->load->view("reports/graphical", $data);
 	}
 
 	function specific_customer_input()
diff --git a/application/views/reports/graphical.php b/application/views/reports/graphical.php
index 46d66d336..f6c50e74b 100644
--- a/application/views/reports/graphical.php
+++ b/application/views/reports/graphical.php
@@ -4,19 +4,13 @@
 
 <div id="page_subtitle"><?php echo $subtitle ?></div>
 
-<div style="text-align: center;">
-	<script type="text/javascript">
-		swfobject.embedSWF("<?php echo base_url(); ?>open-flash-chart.swf", "chart", "800", "400", "9.0.0", "expressInstall.swf", {"data-file": "<?php echo $data_file; ?>"} );
-	</script>
-</div>
+<div class="ct-chart ct-golden-section" id="chart1"></div>
 
-<div id="chart_wrapper">
-	<div id="chart"></div>
-</div>
+<?php $this->load->view($chart_type); ?>
 
 <div id="report_summary">
 	<?php
-	foreach($summary_data as $name=>$value)
+	foreach($summary_data_1 as $name=>$value)
 	{
 	?>
 		<div class="summary_row"><?php echo $this->lang->line('reports_'.$name). ': ' . to_currency($value); ?></div>
diff --git a/application/views/reports/graphs/bar.php b/application/views/reports/graphs/bar.php
index c42baf1cf..9f5f01c57 100644
--- a/application/views/reports/graphs/bar.php
+++ b/application/views/reports/graphs/bar.php
@@ -1,46 +1,88 @@
-<?php
-$this->output->set_header("Cache-Control: no-store, no-cache, must-revalidate");
-$this->output->set_header("Pragma: public");
-$bar = new bar_filled( '#4386a1', '#577261' );
+<style>
+/* style X axis labels to be rotated of 60 degrees */
+.ct-label.ct-horizontal {
+	/* Safari */
+	-webkit-transform: rotate(-60deg);
 
-$bar_labels = array();
-$bar_values = array();
+	/* Firefox */
+	-moz-transform: rotate(-60deg);
 
-foreach($data as $label=>$value)
-{
-	$bar_labels[] = (string)$label;
-	$bar_values[] = (float)$value;
+	/* IE */
+	-ms-transform: rotate(-60deg);
+
+	/* Opera */
+	-o-transform: rotate(-60deg);
+
+	/* Internet Explorer */
+	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 }
 
-$bar->set_values($bar_values);
-
-$chart = new open_flash_chart();
-$chart->set_title(new title($title));
-$x = new x_axis();
-$x->steps(1);
-$x->set_labels_from_array($bar_labels);
-$chart->set_x_axis( $x );
-
-$y = new y_axis();
-$y->set_tick_length(7);
-$y->set_range(0, (count($data) > 0 ? max($data) : 0) + 25, ((count($data) > 0 ? max($data) : 0)+25)/10);
-$chart->set_y_axis( $y );
-$chart->set_bg_colour("#f3f3f3");
-
-$chart->add_element($bar);
-
-if (isset($yaxis_label))
-{
-	$y_legend = new y_legend($yaxis_label );
-	$y_legend->set_style( '{font-size: 20px; color: #000000}' );
-	$chart->set_y_legend( $y_legend );
+/* set all lables to be black with font size 1.2rem */
+.ct-label {
+	fill: rgba(0,0,0,1);
+	color: rgba(0,0,0,1);
+	font-size: 1.2rem;
 }
+</style>
 
-if (isset($xaxis_label))
-{
-	$x_legend = new x_legend($xaxis_label );
-	$x_legend->set_style( '{font-size: 20px; color: #000000}' );
-	$chart->set_x_legend( $x_legend );
-}
-echo $chart->toPrettyString();
-?>
\ No newline at end of file
+<script>
+	// Labels and data series
+	var data = {
+		labels: [<?php echo $labels_1; ?>],
+		series: [{
+			name: '<?php echo $yaxis_title; ?>',
+			data: [<?php echo $series_data_1; ?>]
+		}]
+	};
+
+	// We are setting a few options for our chart and override the defaults
+	var options = {
+		// X-Axis specific configuration
+		axisX: {
+			// Lets offset the chart a bit from the labels
+			offset: 120,
+			position: 'end'
+		},
+
+		// Y-Axis specific configuration
+		axisY: {
+			// Lets offset the chart a bit from the labels
+			offset: 60,
+			// The label interpolation function enables you to modify the values
+			// used for the labels on each axis.
+//			labelInterpolationFnc: function(value) {
+//				return '$' + value;
+//			}
+		},
+
+		// plugins configuration
+		plugins: [
+			Chartist.plugins.ctAxisTitle({
+				axisX: {
+					axisTitle: '<?php echo $xaxis_title; ?>',
+					axisClass: 'ct-axis-title',
+					offset: {
+						x: 0,
+						y: 100
+					},
+					textAnchor: 'middle'
+				},
+				axisY: {
+					axisTitle: '<?php echo $yaxis_title; ?>',
+					axisClass: 'ct-axis-title',
+					offset: {
+						x: 0,
+						y: 0
+					},
+					textAnchor: 'middle',
+					flipTitle: false
+				}
+			}),
+			Chartist.plugins.ctPointLabels({
+				textAnchor: 'middle'
+			})
+		]
+	};
+
+	new Chartist.Bar('#chart1', data, options);
+</script>
\ No newline at end of file
diff --git a/application/views/reports/graphs/hbar.php b/application/views/reports/graphs/hbar.php
index 10463f5c4..4803897d0 100644
--- a/application/views/reports/graphs/hbar.php
+++ b/application/views/reports/graphs/hbar.php
@@ -1,61 +1,90 @@
-<?php
-$this->output->set_header("Cache-Control: no-store, no-cache, must-revalidate");
-$this->output->set_header("Pragma: public");
+<style>
+/* style X axis labels to be rotated of 60 degrees */
+.ct-label.ct-horizontal {
+	/* Safari */
+	-webkit-transform: rotate(-60deg);
 
-$title = new title($title);
+	/* Firefox */
+	-moz-transform: rotate(-60deg);
 
-$hbar = new hbar( '#86BBEF' );
-$hbar->set_tooltip($this->lang->line('reports_revenue').': #val#' );
-$y_labels = array();
-$max_value = 0;
-foreach($data as $label=>$value)
-{
-	if ($max_value < $value)
-	{
-		$max_value = $value;
-	}
-	$y_labels[] = (string)$label;
-	$hbar->append_value( new hbar_value(0,(float)$value) );
-}
-$chart = new open_flash_chart();
-$chart->set_title( $title );
-$chart->add_element( $hbar );
+	/* IE */
+	-ms-transform: rotate(-60deg);
 
-$step_count = $max_value > 0 ? $max_value/10 : 1;
-$x = new x_axis();
-$x->set_offset( false );
-$x->set_steps($max_value/10);
+	/* Opera */
+	-o-transform: rotate(-60deg);
 
-$chart->set_x_axis( $x );
-
-$y = new y_axis();
-$y->set_offset( true );
-$y->set_labels(array_reverse($y_labels));
-$chart->add_y_axis( $y );
-
-if (isset($yaxis_label))
-{
-	$y_legend = new y_legend($yaxis_label );
-	$y_legend->set_style( '{font-size: 20px; color: #000000}' );
-	$chart->set_y_legend( $y_legend );
+	/* Internet Explorer */
+	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 }
 
-if (isset($xaxis_label))
-{
-	$x_legend = new x_legend($xaxis_label );
-	$x_legend->set_style( '{font-size: 20px; color: #000000}' );
-	$chart->set_x_legend( $x_legend );
+/* set all lables to be black with font size 1.2rem */
+.ct-label {
+	fill: rgba(0,0,0,1);
+	color: rgba(0,0,0,1);
+	font-size: 1.2rem;
 }
+</style>
 
-$chart->set_bg_colour("#f3f3f3");
+<script>
+	// Labels and data series
+	var data = {
+		labels: [<?php echo $labels_1; ?>],
+		series: [{
+			name: '<?php echo $yaxis_title; ?>',
+			data: [<?php echo $series_data_1; ?>]
+		}]
+	};
 
-$tooltip = new tooltip();
-$tooltip->set_hover();
-$tooltip->set_stroke( 1 );
-$tooltip->set_colour( "#000000" );
-$tooltip->set_background_colour( "#ffffff" ); 
-$chart->set_tooltip( $tooltip );
+	// We are setting a few options for our chart and override the defaults
+	var options = {
+		horizontalBars: true,
 
+		// X-Axis specific configuration
+		axisX: {
+			// Lets offset the chart a bit from the labels
+			offset: 120,
+			position: 'end'
+		},
 
-echo $chart->toPrettyString();
-?>
\ No newline at end of file
+		// Y-Axis specific configuration
+		axisY: {
+			// Lets offset the chart a bit from the labels
+			offset: 120,
+			// The label interpolation function enables you to modify the values
+			// used for the labels on each axis.
+//			labelInterpolationFnc: function(value) {
+//				return '$' + value;
+//			}
+		},
+
+		// plugins configuration
+		plugins: [
+			Chartist.plugins.ctAxisTitle({
+				axisX: {
+					axisTitle: '<?php echo $xaxis_title; ?>',
+					axisClass: 'ct-axis-title',
+					offset: {
+						x: 0,
+						y: 100
+					},
+					textAnchor: 'middle'
+				},
+				axisY: {
+					axisTitle: '<?php echo $yaxis_title; ?>',
+					axisClass: 'ct-axis-title',
+					offset: {
+						x: 0,
+						y: 0
+					},
+					textAnchor: 'middle',
+					flipTitle: false
+				}
+			}),
+			Chartist.plugins.ctPointLabels({
+				textAnchor: 'middle'
+			})
+		]
+	};
+
+	new Chartist.Bar('#chart1', data, options);
+</script>
\ No newline at end of file
diff --git a/application/views/reports/graphs/line.php b/application/views/reports/graphs/line.php
index 62fa570e6..b462b6829 100644
--- a/application/views/reports/graphs/line.php
+++ b/application/views/reports/graphs/line.php
@@ -1,49 +1,102 @@
-<?php
-$this->output->set_header("Cache-Control: no-store, no-cache, must-revalidate");
-$this->output->set_header("Pragma: public");
-$line_data = array();
-$labels = array();
-foreach($data as $label=>$value)
-{
-    $line_data[] = (float)$value;
-	$labels[] = (string)$label;
+<style>
+/* style X axis labels to be rotated of 60 degrees */
+.ct-label.ct-horizontal {
+	/* Safari */
+	-webkit-transform: rotate(-60deg);
+
+	/* Firefox */
+	-moz-transform: rotate(-60deg);
+
+	/* IE */
+	-ms-transform: rotate(-60deg);
+
+	/* Opera */
+	-o-transform: rotate(-60deg);
+
+	/* Internet Explorer */
+	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 }
 
-$hol = new hollow_dot();
-$hol->size(3)->halo_size(1)->tooltip('#x_label#<br>#val#');
-
-$line = new line();
-$line->set_default_dot_style($hol); 
-$line->set_values($line_data);
-
-$chart = new open_flash_chart();
-$chart->set_title(new title($title));
-$chart->add_element($line);
-
-$x = new x_axis();
-$x->steps(count($data) > 10 ? (int)(count($data)/4) : 1);
-$x->set_labels_from_array($labels);
-$chart->set_x_axis( $x );
-
-$y = new y_axis();
-$y->set_tick_length(7);
-$y->set_range(0, (count($data) > 0 ? max($data) : 0) + 25, ((count($data) > 0 ? max($data) : 0)+25)/10);
-$chart->set_y_axis( $y );
-$chart->set_bg_colour("#f3f3f3");
-
-if (isset($yaxis_label))
-{
-	$y_legend = new y_legend($yaxis_label );
-	$y_legend->set_style( '{font-size: 20px; color: #000000}' );
-	$chart->set_y_legend( $y_legend );
+/* set all lables to be black with font size 1.2rem */
+.ct-label {
+	fill: rgba(0,0,0,1);
+	color: rgba(0,0,0,1);
+	font-size: 1.2rem;
 }
+</style>
 
-if (isset($xaxis_label))
-{
-	$x_legend = new x_legend($xaxis_label );
-	$x_legend->set_style( '{font-size: 20px; color: #000000}' );
-	$chart->set_x_legend( $x_legend );
-}
+<script>
+	// Labels and data series
+	var data = {
+		labels: [<?php echo $labels_1; ?>],
+		series: [{
+			name: '<?php echo $yaxis_title; ?>',
+			data: [<?php echo $series_data_1; ?>]
+		}]
+	};
 
-echo $chart->toPrettyString();
-?>
\ No newline at end of file
+	// We are setting a few options for our chart and override the defaults
+	var options = {
+		// Draw the line chart points
+		showPoint: true,
+
+		// Disable line smoothing
+		lineSmooth: false,
+
+		// Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}
+		/*chartPadding: {
+			top: 15,
+			right: 15,
+			bottom: 20,
+			left: 10
+		},*/
+
+		// X-Axis specific configuration
+		axisX: {
+			// Lets offset the chart a bit from the labels
+			offset: 120,
+			position: 'end'
+		},
+
+		// Y-Axis specific configuration
+		axisY: {
+			// Lets offset the chart a bit from the labels
+			offset: 60,
+			// The label interpolation function enables you to modify the values
+			// used for the labels on each axis.
+//			labelInterpolationFnc: function(value) {
+//				return '$' + value;
+//			}
+		},
+
+		// plugins configuration
+		plugins: [
+			Chartist.plugins.ctAxisTitle({
+				axisX: {
+					axisTitle: '<?php echo $xaxis_title; ?>',
+					axisClass: 'ct-axis-title',
+					offset: {
+						x: 0,
+						y: 100
+					},
+					textAnchor: 'middle'
+				},
+				axisY: {
+					axisTitle: '<?php echo $yaxis_title; ?>',
+					axisClass: 'ct-axis-title',
+					offset: {
+						x: 0,
+						y: 0
+					},
+					textAnchor: 'middle',
+					flipTitle: false
+				}
+			}),
+			Chartist.plugins.ctPointLabels({
+				textAnchor: 'middle'
+			})
+		]
+	};
+
+	new Chartist.Line('#chart1', data, options);
+</script>
\ No newline at end of file
diff --git a/application/views/reports/graphs/pie.php b/application/views/reports/graphs/pie.php
index fda94d8b6..56bca6eea 100644
--- a/application/views/reports/graphs/pie.php
+++ b/application/views/reports/graphs/pie.php
@@ -1,25 +1,45 @@
-<?php
-$this->output->set_header("Cache-Control: no-store, no-cache, must-revalidate");
-$this->output->set_header("Pragma: public");
-$title = new title($title);
-
-$pie = new pie();
-$pie->set_alpha(0.6);
-$pie->set_start_angle( 35 );
-$pie->add_animation( new pie_fade() );
-$pie->set_tooltip( '#val# of #total#<br>#percent# of 100%' );
-$pie->set_colours(get_random_colors(count($data)));
-
-$pie_values = array();
-foreach($data as $label=>$value)
-{
-	$pie_values[] = new pie_value((float)$value, (string)$label);
+<style>
+/* set all lables to be black with font size 1.2rem */
+.ct-label {
+	fill: rgba(0,0,0,1);
+	color: rgba(0,0,0,1);
+	font-size: 1.2rem;
 }
-$pie->set_values($pie_values);
-$chart = new open_flash_chart();
-$chart->set_title( $title );
-$chart->set_bg_colour("#f3f3f3");
-$chart->add_element( $pie );
-$chart->x_axis = null;
-echo $chart->toPrettyString();
-?>
\ No newline at end of file
+</style>
+
+<script>
+	// Labels and data series
+	var data = {
+		labels: [<?php echo $labels_1; ?>],
+		series: [<?php echo $series_data_1; ?>]
+	};
+
+	var sum = function(a, b) { return a + b };
+	
+	// We are setting a few options for our chart and override the defaults
+	var options = {
+		chartPadding: 50,
+		labelPosition: 'outside',
+		// interpolate labels to show lable, value and %
+		labelInterpolationFnc: function(label, index) {
+			return label + ": " + data.series[index] + " / " + Math.round(data.series[index] / data.series.reduce(sum) * 100) + '%';
+		}
+	};
+	
+/*	var responsiveOptions = [
+		['screen and (min-width: 640px)', {
+			chartPadding: 30,
+			labelOffset: 100,
+			labelDirection: 'explode',
+			labelInterpolationFnc: function(value) {
+				return value;
+			}
+		}],
+		['screen and (min-width: 1024px)', {
+			labelOffset: 80,
+			chartPadding: 20
+		}]
+	];*/
+
+	new Chartist.Pie('#chart1', data, options/*, responsiveOptions*/);
+</script>
\ No newline at end of file