I am trying to render a partial view at index page
to show a chart when a certain condition gets true by doing the following.
Index.php
<?PHP
.
.
.
.
else if($type == "403")
{
$columns = [
['class' => 'yii\grid\SerialColumn'],
'Device_ID',
'Customer_ID',
'MSN',
'kWh',
'Data_Date_Time',
];
$this->render('_kwhChart', [
'dataProvider' => $dataProvider,
]) ;
}
.
.
.
.
?>
<?=
GridView::widget([
'dataProvider' => $dataProvider,
//'filterModel' => $searchModel,
'columns' => $columns
]);
?>
When a certain condition gets true I am able to see the updated gridview
values but not the partial view i.e. chart.
Patial view
<?PHP
$dataPointskWh = array();
$model = $dataProvider->getModels();
foreach ($model as $row)
{
// pushing for kwh values
array_push($dataPointskWh,
array("label"=>$row['Data_Date_Time'],"y"=>$row['kWh']));
}
?>
<div id="chartContainer1" style="width: 100%; height: 300px;display: inline-block;"></div>
<script>
var chart1 = new CanvasJS.Chart("chartContainer1", {
exportEnabled: true,
animationEnabled: true,
zoomEnabled: true,
theme: "light1",
title:{
text: "Voltages"
},
legend:{
cursor: "pointer",
verticalAlign: "bottom",
horizontalAlign: "center",
itemclick: toggleDataSeries
},
data: [
{
type: "column",
lineColor:"red",
legendMarkerColor: "red",
name: "kWh",
indexLabel: "{y}",
//yValueFormatString: "V1#0.##",
showInLegend: true,
dataPoints: <?php echo json_encode($dataPointskWh, JSON_NUMERIC_CHECK); ?>
}
]
});
chart1.render();
function toggleDataSeries(e){
e.dataSeries.visible = !(typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible);
chart1.render();
}
Note: I am using a submit button, and the page refresh every time when submit button is clicked.
How can I achieve this?
Any help would be highly appreciated.
You don't render the render() .. you need .. echo
echo $this->render('_kwhChart', [
'dataProvider' => $dataProvider,
]) ;
or
<?= $this->render('_kwhChart', ['dataProvider' => $dataProvider, ]) ?>;