Changed graphical reports to use Chartist (#342)

This commit is contained in:
FrancescoUK committed 2016-05-22 19:01:16 +01:00
1 parent 17bc62d94b
commit cfacf52a42
6 files changed
+418 -358

No files matched your search

+113 -191
View File
@@ -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()
+3 -9
View File
@@ -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>
+82 -40
View File
@@ -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();
?>
<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>
+79 -50
View File
@@ -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();
?>
// 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>
+97 -44
View File
@@ -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();
?>
// 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>
+44 -24
View File
@@ -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();
?>
</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>