ハイチャートでグラフを描画するために使用されるjsonを出力するコントローラーがあります
1-最初に、タイムピッカーの開始日と終了日の変数を使用して時間の範囲を選択する必要があり、コントローラーに渡され、この時間に従ってデータがフェッチされ、グラフが生成されます。
2-同じjson出力を使用して、同じデータを表形式で描画したいと考えています。
たとえば、ハイチャートコードで使用される開始日と終了日を使用して、データテーブルを含むテーブルを描画できますか?
私のjsonは次のようになります
{"name":"sensor_1","data":[["2012-12-01 15:00:00.070",45],["2012-12-01 15:00:00.281",95],["2012-12-01 15:00:00.883",104]] ........]},"name":"sensor_2","data":[[]........]}
このコードを使用しました
$(document).ready(function(){
var startDateTextBox = $('#startDate'); /// start date passed to yii controller
var endDateTextBox = $('#endDate');
$("#btnSubmit").click(function() {
if(startDateTextBox.val()!="" && endDateTextBox.val()!=""){
$.ajax({
type: "get",
url: "<?php echo
CController::createUrl('ecg/GetSensorsData'); ?>",
data: {"ecgId" : "<?php echo $modelsensors['node_id'] ;?>" ,
"sDate": $('#startDate').val() , "eDate": $('#endDate').val()},
dataType:"json",
success: function(response, status) {
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline'
},
},
xAxis: {
type: 'datetime',
},
},
series: response
});
},
error: function (response, status) {
alert("An error occured while loading
data!");
}
});
}
else
{
alert("Choose date range!")
}
});
startDateTextBox.datetimepicker({
//showSecond: true,
dateFormat : 'yy-mm-dd',
timeFormat: 'HH:mm ',
stepHour: 1,
stepMinute: 1,
//stepSecond: 0.5,
onClose: function(dateText, inst) {
if (endDateTextBox.val() != '') {
var testStartDate =
startDateTextBox.datetimepicker('getDate');
var testEndDate = endDateTextBox.datetimepicker('getDate');
if (testStartDate > testEndDate)
endDateTextBox.datetimepicker('setDate',
testStartDate);
}
else {
endDateTextBox.val(dateText);
}
},
onSelect: function (selectedDateTime){
endDateTextBox.datetimepicker('option', 'minDate',
startDateTextBox.datetimepicker('getDate') );
}
});
endDateTextBox.datetimepicker({
showSecond: true,
dateFormat : 'yy-mm-dd',
timeFormat: 'HH:mm:ss',
stepHour: 1,
stepMinute: 1,
stepSecond: 0.5,
onClose: function(dateText, inst) {
if (startDateTextBox.val() != '') {
var testStartDate = startDateTextBox.datetimepicker('getDate');
var testEndDate = endDateTextBox.datetimepicker('getDate');
if (testStartDate > testEndDate)
startDateTextBox.datetimepicker('setDate', testEndDate);
}
else {
startDateTextBox.val(dateText);
}
},
onSelect: function (selectedDateTime){
startDateTextBox.datetimepicker('option', 'maxDate',
endDateTextBox.datetimepicker('getDate') );
}
});
});
</script>
私の見解では、すべてのデータをフェッチします。ハイチャートと同じことをしたい(データをフィルタリングする)
<tbody>
<?php if(count($modelSensors)>=1) {
foreach($modelSensors as $models) : ?>
<tr>
<td> <?php echo $models['information_sensor_id'] ; ?> </td>
<td> <?php echo $models['information_sensor_time'] ; ?> </td>
<td> <?php echo $models['information_sensor_value'] ; ?> </td>
<td> <?php echo $models['sensor_id'] ; ?> </td>
</tr>
<?php endforeach;
}else {?>
<tr>
<td colspan='2' style="text-align:center;">Sorry no data found for this Node</td>
</tr>
<?php } ?>
</tbody>
編集:
var_dump($modelSensors);
array
0 =>
object(SensorInfo)[1384]
private '_md' (CActiveRecord) =>
object(CActiveRecordMetaData)[85]
public 'tableSchema' =>
object(CMysqlTableSchema)[98]
...
public 'columns' =>
array
...
public 'relations' =>
array
...
public 'attributeDefaults' =>
array
...
private '_model' =>
object(SensorInfo)[84]
...
private '_new' (CActiveRecord) => boolean false
private '_attributes' (CActiveRecord) =>
array
'information_sensor_id' => string '1' (length=1)
'information_sensor_time' => string '2012-12-01 15:00:00' (length=19)
'information_sensor_value' => string '95' (length=2)
'sensor_id' => string 'sensor1' (length=7)
....................