I'm trying to place multiple graphs in a page to form a dashboard.
I found the way to do that with placing the graphs source code directly in the controller and then display the graphs in the view, but I know it s not 'Clean' to do that especially with mvc.
Do you have an idea how to place my graph codes separately in a model class (as different functions I guess) and get the graphs data results from that model to the controller and then place the graphs in the view?
This is what I have done for 2 graphs (have many more that why I have to find a way to separate the source codes so wont have to change every parameter to be unique in the code:
contoller
class stjpgController extends Oft_Controller_Action {
public function init(){
require_once 'Ofc/ofc_line_base.php';
require_once 'Ofc/open-flash-chart.php';
require_once 'Ofc/ofc_line_dot.php';
require_once 'Ofc/ofc_line_hollow.php';
}
public function graphAction(){
$view = $this->view;
$dateInBetween = array();
$SmsSum = array();
$smsSumGraph = array();
$y_axis_values = array();
$x_axis_values = array();
$queryparse = oci_parse($conn, $query);
oci_execute($queryparse);
while ($row_date = oci_fetch_array($queryparse,
OCI_ASSOC+OCI_RETURN_NULLS))
{
$y_axis_values[] = intval($row_date['SMSSUM']);
$x_axis_values[] = $row_date['DATETO'];
}
$chart = new open_flash_chart();
$y_axis = new y_axis();
$x_axis = new x_axis();
$default_dot = new line_dot();
$tooltip = new tooltip();
$x_labels = new x_axis_labels();
$x_labels->set_labels($x_axis_values);
$taille=sizeof($x_labels);
$step=2;
if ($taille>100) $step=4;
if ($taille>200) $step=8;
if ($taille>300) $step=12;
if ($taille>400) $step=24;
$x_labels->set_steps( $step );
$x_labels->rotate('45');
$x_axis->set_labels($x_labels);
$x_axis->set_offset(false);
$y_axis->set_range( 0, max($y_axis_values)+10, round( max($y_axis_values) / 4 ) );
$chart->set_x_axis( $x_axis );
$chart->add_y_axis( $y_axis );
//LINE
$line = new line();
$line->set_values( $y_axis_values );
$line->set_halo_size( 0 );
$line->set_width( 2 );
$chart->add_element($line);
$data = $chart->toPrettyString();
$swfObject = "swfobject.embedSWF(";
$swfObject .= "'{$view->baseUrlMedia('ofc/open-flash-chart.swf')}', 'ofcchart',";
$swfObject .= "'350', '300', '9.0.0', 'expressInstall.swf',";
$swfObject .= "{'get-data':'get_data_ofc_chart'}, {'wmode': 'transparent'} );";
$view->jquery()->addOnload("var data = {$data}");
$view->jquery()->addOnload($swfObject);
$view->dataChart = $data;
//------------------------GRAPH 2-----------------------------------
$y_axis_values1 = array();
$x_axis_values1 = array();
$y_axis_values2 = array();
$x_axis_values2 = array();
$SuccRecMsgParse = oci_parse($conn, $query1);
oci_execute($SuccRecMsgParse);
while ($row_date1 = oci_fetch_array($SuccRecMsgParse,
OCI_ASSOC+OCI_RETURN_NULLS))
{
$y_axis_values1[] = intval($row_date1['SMSSUM']);
$x_axis_values1[] = $row_date1['DATETO'];
}
$MOtotalIncParse = oci_parse($conn, $query2);
oci_execute($MOtotalIncParse);
while ($row_date2 = oci_fetch_array($MOtotalIncParse,
OCI_ASSOC+OCI_RETURN_NULLS))
{
$y_axis_values2[] = intval($row_date2['SMSSUM']);
$x_axis_values2[] = $row_date2['DATETO'];
}
$y_axis1 = new y_axis();
$x_axis1 = new x_axis();
$default_dot = new line_dot();
$tooltip = new tooltip();
$x_labels1 = new x_axis_labels();
$x_labels1->set_labels($x_axis_values1);
$taille=sizeof($x_labels1);
$step=2;
if ($taille>100) $step=4;
if ($taille>200) $step=8;
if ($taille>300) $step=12;
if ($taille>400) $step=24;
$x_labels1->set_steps( $step );
$x_labels1->rotate('45');
$x_axis1->set_labels($x_labels1);
$x_axis1->set_offset(false);
$y_axis1->set_range( 0, max($y_axis_values1)+10, round( max($y_axis_values1) / 4 ) );
$default_dot = new line_dot();
$default_dot->set_colour('#DFC329');
$line_dot = new line();
$line_dot->set_default_dot_style($default_dot);
$line_dot->set_width( 4 );
$line_dot->set_colour( '#DFC329' );
$line_dot->set_values( $y_axis_values1 );
$line_dot->set_key( "SuccRecMsg", 10 );
$default_hollow_dot = new line_hollow();
$default_hollow_dot->set_colour('#6363AC');
$line_hollow = new line();
$line_hollow->set_default_dot_style($default_hollow_dot);
$line_hollow->set_width( 4 );
$line_hollow->set_colour( '#6363AC' );
$line_hollow->set_values( $y_axis_values2 );
$line_hollow->set_key( "MOtotalInc", 10 );
$chart1 =new open_flash_chart();
$chart1->set_x_axis( $x_axis1 );
$chart1->add_y_axis( $y_axis1 );
$chart1->add_element($line_dot);
$chart1->add_element($line_hollow);
$data1 = $chart1->toPrettyString();
$swfObject1 = "swfobject.embedSWF(";
$swfObject1 .= "'{$view->baseUrlMedia('ofc/open-flash-chart.swf')}', 'ofcchart1',";
$swfObject1 .= "'350', '300', '9.0.0', 'expressInstall.swf',";
$swfObject1 .= "{'get-data':'get_data_ofc_chart1'}, {'wmode': 'transparent'} );";
$view->jquery()->addOnload("var data1 = {$data1}");
$view->jquery()->addOnload($swfObject1);
$view->dataChart1 = $data1;
}
}
View:
<script type="text/javascript" src="/js/json/json2.js"></script>
<script type="text/javascript" src="/js/swfobject.js"></script>
<?= $this->headScript()->captureStart(); ?>
function get_data_ofc_chart(){
return JSON.stringify(<?php echo $this->dataChart; ?>);
}
function get_data_ofc_chart1(){
return JSON.stringify(<?php echo $this->dataChart1; ?>);
}
function findSWF(movieName) {
if (navigator.appName.indexOf('Microsoft')!= -1) {
//return window['ie_' + movieName];
return document.getElementById('ie_'+movieName);
} else {
//return document[movieName];
return document.getElementById(movieName);
}
}
<?= $this->headScript()->captureEnd(); ?>
<div id="container">
<p></p>
<div id="ofc_chart"></div>
<div id="ofc_chart1"></div>