Good day, this is my first post.
I was trying to create a simple web page containing a line chart where the data on the chart will update every 1 second(via setInterval), Please take note that the data that is being shown in the chart came from the database and it's now working fine(the chart data is being updated every one second). However, I just noticed the if I scroll the page down, the scroll bar returns back at the top which is pretty annoying. My Question is, How can I prevent the scrollbar from returning back to top of the webpage while the data from the chart is updating. Below are my actual code. I hope someone can help me out.
Thanks a lot!
Just to add I'm using CodeIgniter as a framework.
When the user succesfully logged in into the webpage, the welcome() controller function will be executed.
public function welcome(){
$this->load->view('includes/IsLoggedIn');
$this->load->model('models');
$devices = $this->models->devicetoChart();
$dev['device'] = $devices;
$this->load->view("includes/sidebar");
$this->load->view("home", $dev);
$this->load->view("templates/index");
}
// this is devicetoChart codes at model, see below,
public function deviceCount(){
$this->db->from('tbl_device'); // count how many zingchart needs to be created depends on device count.
$query = $this->db->get();
$res = $query->num_rows();
return $res;
}
//this is home.php from $this->load->view("home", $dev)
/* This is home, just to get the layout and store it as variable */
$this->content_body = "<span class=\"glyphicon glyphicon-home\"> </span>
<div id=\"wrapper\">
" . $this->sidebar . "
<div id=\"page-content-wrapper\">
<div class=\"container-fluid\">
<span class=\"glyphicon glyphicon-nav\" aria-hidden=\"true\"><a href=\"#menu-toggle\" class=\"btn btn-secondary\" id=\"menu-toggle\">x</a> </span>
<h1>Welcome!</h1>
<div id=\"MyCharting\" class=\"col-sm\">
$this->div
<div id=\"myList\">
</div>
</div>
</div>
<nav aria-label=\"paging\">
<ul class=\"pagination pagination-custom\">
<li class=\"page-item disabled\">
<a class=\"page-link\" href=\"#\" tabindex=\"-1\">Previous</a>
</li>
<li class=\"page-item\"><a class=\"page-link\" href=\"#\">1</a></li>
<li class=\"page-item active\">
<a class=\"page-link\" href=\"#\">2 <span class=\"sr-only\">(current)</span></a>
</li>
<li class=\"page-item\"><a class=\"page-link\" href=\"#\">3</a></li>
<li class=\"page-item\">
<a class=\"page-link\" href=\"#\">Next</a>
</li>
</ul>
</nav>
</div>
</div>
<script src = \"" . base_url() . "js/bootstrap.bundle.min.js\"/></script>
<script src = \"" . base_url() . "js/myjs.js\" /></script>"; // Below are myjs.js codes
/* This is templates/index
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
<?php echo $this->content_head ;?>
</title>
<link rel="stylesheet" href= "<?php echo base_url() . "css/bootstrap.min.css"; ?>" />
<link rel="stylesheet" href= "<?php echo base_url() . "css/simple-sidebar.css"; ?>" />
<script src = "<?php echo base_url() . "js/bootstrap.min.js"; ?>" /></script>
<link rel="stylesheet" href= "<?php echo base_url() . "css/mystyle.css"; ?>" />
<script src = "<?php echo base_url() . "js/jquery.js"; ?>" /></script>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<?php
echo $this->content_body;
?>
</body>
</html>
*/
}
/*================= MYJS.JS =================*/
$(document).ready(function(){
setInterval(function() {
reload_data();
}, 1000);
});
function reload_data(){
$("#myList").load("UpdateChart").fadeIn("fast");
}
public function UpdateChart(){
// this is UpdateChart that was loaded from myjs.js
$this->i2 = 2;
$this->i1 = 1;
$this->i0 = 0;
$this->load->model('models');
$output = $this->models->Temp_Reading();
$outputdata['reading'] = $output;
$counts = $this->models->deviceCount();
$outputdata['deviceCount'] = $counts;
$this->load->view("includes/phptojs",$outputdata);
}
public function Temp_Reading(){
/* this is the temp_reading from model called from updateChart $output = $this->models->Temp_Reading();*/
$sql = "SELECT *\n"
. "FROM tbl_device d JOIN\n"
. " (SELECT t.*,\n"
. " (@rn := if(@d = t.devid, @rn + 1,\n"
. " if(@d := t.devid, 1, 1)\n"
. " )\n"
. " ) as rn\n"
. " FROM (SELECT t.*\n"
. " FROM tbl_temperature t\n"
. " ORDER BY DevID, id DESC\n"
. " ) t CROSS JOIN\n"
. " (SELECT @d := -1, @rn := 0) params\n"
. " ) t\n"
. " ON d.ID = t.DevID\n"
. "WHERE rn <= 3 LIMIT 0, 30 ";
$query = $this->db->query($sql);
$result = $query->result();
return $result;
}
<script>
// this is phptojs loaded from UpdateChart Controller function,
var temperatureReading = <?php echo json_encode($reading)?>;
var a,b,c;
var t = 0;
for (x = 1; x < <?php echo $deviceCount + 1;?>; x++){
if(t < 2){
a = 0;
b = 1;
c = 2;
}else{
a = a + 3;
b = b + 3;
c = c + 3;
}
var firstVal = parseInt([temperatureReading[a]["TempReading"]]);
var secondVal = parseInt([temperatureReading[b]["TempReading"]]);
var thirdVal = parseInt([temperatureReading[c]["TempReading"]]);
var HumidOne = parseInt(temperatureReading[a]["Humidity"]);
var HumidTwo = parseInt(temperatureReading[b]["Humidity"]);
var HumidThree = parseInt(temperatureReading[c]["Humidity"]);
var chartData={
"type":"line",
"series":[ // plotting
{
"values":[firstVal,secondVal,thirdVal],
"text": "Temperature Reading"
},
{
"values":[HumidOne,HumidTwo,HumidThree],
"text": "Humidity Reading"
},
],
"tooltip": {
"visible": true
},
"plot": {
"aspect": "spline",
"value-box": {
"text": "%v",
},
},
"scale-x":
{
"values":["Last 15 Seconds", "Last 10 Seconds", "Last 5 Seconds"],
},
"title": {
"text": temperatureReading[a]["Location"],
},
"legend":{
"layout":"1x2", //row x column
"x":"29%",
"y":"85%",
}
};
zingchart.render({
id: "Chart" + x,
data: chartData,
height: 300,
width: 600,
//customprogresslogo: 'https://www.zingchart.com/images/blueberry.jpg'
});
t = 5;
}
