Hi, I need to implement line grapg to my application. So, i’m using flot extension. By using this extension statically working fine but can i know how to modify line graph dynamically based on select option. Pls help me, i’m attaching my files below.
For reference pls visit My Link. And check My Graph option the same functionality i need to my application.
Hi, i’m using flot extension for linear graph. Here having static values. Can i know how to pass dynamic values below…
<?php
// lines and bars in same graph
$this->widget('application.extensions.EFlot.EFlotGraphWidget',
array(
'data'=>array(
array(
'label'=> 'line',
'data'=>array(
array(1,1),
array(2,7),
array(3,12),
array(4,32),
array(5,62),
array(6,89),
),
'lines'=>array('show'=>true),
'points'=>array('show'=>true),
),
),
),
'options'=>array(
'legend'=>array(
'position'=>'nw',
'show'=>true,
'margin'=>10,
'backgroundOpacity'=> 0.5
),
),
'htmlOptions'=>array(
'style'=>'width:400px;height:400px;'
)
)
);
?>
and based on select option i need to change graph values dynamically. here is my View part…
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-------------------------------------------------Script for onchange------------------------------------------------------------------>
<script type="text/javascript">
function myfunction(v){
alert(v);
$.ajax({
url: '<?php echo Yii::app()->createAbsoluteUrl("usersStatsInfo/graph"); ?>',
type: 'POST',
// async: false,
data: 'ans='+v ,
success: function(res)
{
alert(res);
alert("inside success");
}
});
}
</script>
<!------------------------------------------------Script for From Date------------------------------------------------------------------------------->
<script>
$(function() {
$( "#start_datepicker" ).datepicker();
});
</script>
<!-------------------------------------------------Script For To Date---------------------------------------------------------------------------------->
<script>
$(function() {
$("#end_datepicker").datepicker();
})
</script>
</head>
<body>
<?php
$form = $this->beginWidget('CActiveForm', array(
'id' => 'users-stats-info-graph',
'enableAjaxValidation' => false,
));
?>
<table border="0">
<tr>
<td width="50%">
<table border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="#ffcc00">
<td align="left" valign="middle" width="15%">
<select name="bodyStats" title="Select Stats" onchange="myfunction(this.value)">
<option value="56">Weight</option>
<option value="60">height</option>
<option value="bmi">BMI</option>
<option value="chest">Chest</option>
<option value="waist">Waist</option>
<option value="hips">Hips</option>
<option value="biceps">Biceps</option>
</select>
<?php /*echo $form->dropdownList($model,'id', CHtml::listData(UsersStatsInfo::model()->findAll(), 'id', 'height', 'weight', 'chest', 'waist', 'hips', 'biceps', 'bmi'),array('class'=>'select'),
array('onchange' => 'myfunction(this.value)'));*/ ?>
</td>
<td align="right" valign="middle" width="10%">From
<input type="text" id="start_datepicker" placeholder="From Date" size="10" style="margin-left: 30%; margin-top: -20%;"/>
</td>
<td> </td>
<td align="right" valign="middle"> To
<input type="text" id="end_datepicker" placeholder="To Date" size="10" style="margin-left: 30%; margin-top: -20%;"/>
</td>
<td> </td>
<td>
<input type="submit" id="dateSubmit" value="Go" onclick="return dateRangeFormValidate();"/>
</td>
<td width="10%" align="center">
Or
</td>
<td width="55%" align="right" valign="middle">
<select name="fixedDatePeriod" id="fixedDatePeriodId" title="Select fixed Range">
<option value="10"> Last 10 values</option>
<option value="30"> Last 30 values</option>
<option value="180"> Last 6 months</option>
<option value="3"> All Time</option>
</select>
</td>
</tr>
<tr>
<td colspan="6">
<div id="topicsHover" style="margin-left: 35%;color: black;font-size: 18px;">19-06-2013, 31.9</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<?php $this->endWidget(); ?>
</body>
</html>
<?php
if(Yii::app()->request->isAjaxRequest){
if(isset($_POST['ans'])){
$result = $_POST['ans'];
echo $result;
$this->render('graph', array('model'=>$model));
}
} else
{
echo "This is else part..........";
}
?>
Can i know how to pass dynamic values in flot extension above mentioned my flot extension code…
Hi, Now i’m displaying database values based on dropdown.
Can i know how to set timeformat to axis in flot extension. I tried like this but its not working... pls help me.
$this->widget('application.extensions.EFlot.EFlotGraphWidget',
array(
'data'=>array(
array(
'label'=> 'line',
'data'=> $chest,
/*array(
array(1,50),
array(2,25),
array(3,45),
array(4,15),
array(5,75),
array(6,55),
),*/
'lines' => array('show'=>true),
'points'=> array('show'=>true),
'xaxis' => array(
'mode'=>'time',
'timeformat'=>'%y/%m/%d'
),
),
),
'options'=>array(
'legend'=>array(
'position'=>'nw',
'show'=>true,
'margin'=>10,
'backgroundOpacity'=> 0.5,
),
),
'htmlOptions'=>array(
'style'=>'width:600px;height:400px;'
)
)
);
And based on dropdown need to change graph…