How do i add drilldown function in my column highchart?
<script>
drilldown: {
series: [
<?php
for ($j=0; $j < count($service) ; $j++) {
name: '<?php echo $service[$j]; ?>',
id: '<?php echo $service[$j]; ?>',
data: [
<?php
$sql = $mysqli->query("SELECT DISTINCT(DATE_FORMAT(stamp, '%b %d')) as dateDays from entries where sid = '$arrSID[$j]'");
while ($row = $sql->fetch_assoc()) {
$days[] = $row['dateDays'];
}
for ($k=0; $k < count($days) ; $k++) {
$sql1 = $mysqli->query("SELECT COUNT(*) as totalDayVote FROM entries where DATE_FORMAT(stamp, '%b %d') = '$days[$k]' && sid = '$arrSID[$j]'");
while ($row1 = $sql1->fetch_assoc()) {
$dayVote = $row1['totalDayVote']; ?>
['<?php echo $days[$k]; ?>', <?php echo ($dayVote); ?>],
<?php
}
}
?>
]
}
?>
</script>
The result is i get the first chart that display title of my services and when i click on one of the services it will drilldown entries by day of that specific service.
Related
I am doing pagination with ajax for table which has some
records for which i have to show active link for each
click.Please do help me with this.
$(document).ready(function()
{
ready_data();
function ready_data(page)
{
$.ajax({
url:"connection.php",
method:"POST",
data:{page:page},
success:function(data){
$('#paginate_record').html(data);
// $('.page_links').removeClass('active');
// $(this).addClass('active');
}
}); }
$(document).on('click', '.page_links ', function(){
var page = $(this).attr("id");
ready_data(page);
});
});
Here is My pagination page
$records_per_page = 2;
$page = '';
if(isset($_POST["page"]))
{
$page = $_POST["page"];
}
else
{
$page = 1;
}
$start_from = ($page - 1)*$records_per_page;
$sql = "SELECT * FROM students LIMIT $start_from,
$records_per_page";
$result = mysqli_query($con,$sql);
$data .= '</table><br /><div align="center">';
$page_sql = "SELECT * FROM students ";
$page_result = mysqli_query($con, $page_sql);
$total_records = mysqli_num_rows($page_result);
$total_pages = ceil($total_records/$records_per_page);
for($i=1; $i<=$total_pages; $i++)
{
$data.= "<span class='page_links active'
style='cursor:pointer;margin:10px;padding:1px;border:1px
solid
;'id='".$i."'>".$i."</span>";
}
echo $data;
Now in which i want to show active link for each click.i tried by adding class on ajax succes function also add the active class on span tag but it is applying to all links.so please do help me.
In the last for() loop, you are applying the active class to all the output, you want to apply this only to the current page...
for($i=1; $i<=$total_pages; $i++)
{
$data.= "<span class='page_links";
if ( $i == $page ) {
$data .=" active";
}
$data.= "' style='cursor:pointer;margin:10px;padding:1px;border:1px solid;'id='"
.$i."'>".$i."</span>";
}
I'm trying to add pagination, even though the code it seems correct, the page displays only the first 10 results (10 results i want per page). As you can see below, the problem seems to be created in the $_GET method.
Here is the ajax:
function displayAllTopics() {
$.ajax({
url: "requests.php",
type: "GET",
data: {
keyPagination: "displayAllTopics"
},
dataType: "json",
success: function(response) {
$("#topicArea").append(response.response_message);
$("#pagination").append(response.pagination);
}
});
}
Here is the requests.php file:
if(isset($_GET['keyPagination'])) {
if($_GET['keyPagination'] == "displayAllTopics") {
$sql = "SELECT * FROM travel";
$result = mysqli_query($conn, $sql);
$count_topics = mysqli_num_rows($result);
if($count_topics < 1) {
exit('There are no topics yet.');
}
if(isset($_GET['page'])) {
$page = $_GET['page'];
}
else {
$page = 1;
}
//results per page
$results_per_page = 10;
//number of pages
$offset = ($page-1) * $results_per_page;
$number_of_pages = ceil($count_topics / $results_per_page);
$sql_pagination = "SELECT * FROM travel LIMIT $offset, $results_per_page";
$results_pagination = mysqli_query($conn, $sql_pagination);
$response_message = "";
$pagination = "";
while($row = mysqli_fetch_assoc($results_pagination)) {
$user_id = $row['user_id'];
$travel_subject_id = $row['travel_subject_id'];
$travel_subject_date = $row['travel_subject_date'];
$travel_title = $row['travel_subject_title'];
$travel_body = $row['travel_subject_body'];
$travel_comments_count = $row['travel_comments_count'];
$travel_views = $row['travel_subject_views'];
$travel_subject_date_format = date('j M y H:i', strtotime($travel_subject_date));
$sql_user = "SELECT * FROM forum_users WHERE user_id='$user_id'";
$result_user = mysqli_query($conn, $sql_user);
if($row_user = mysqli_fetch_assoc($result_user)) {
$username = $row_user['username'];
$response_message .= "<tr>
<td><a href='travel_subject.php?id=".$travel_subject_id."' onclick='countview(".$travel_subject_id.");'><img src='topic.png' class='img_first'>$travel_title</a></td>
<td><img src='comment.png' class='img_second'><p>$travel_comments_count</p></td>
<td><a href='profile_user.php?id=".$user_id."'><img src='avatar.png' class='img_third'>$username</a></td>
<td><p><img src='views.png' class='img_four'>$travel_views</p></td>
<td><p>$travel_subject_date_format</p></td>
</tr>";
}
}
for ($i = 1; $i <= $number_of_pages; $i++) {
$pagination .= "<a href='forum_index.php?page=".$i."&limit=".$offset."'>$i</a>";
}
$data = array('response_message' => $response_message, 'pagination' => $pagination);
echo json_encode($data);
exit();
}
}
Note: Variable $page is always 1, so it seems that cannot set the $_GET['page'] and as a result from that, the page below displays always the first 10 results. Why is that?
and here is the php file, that i want to display the results:
<div class='display-subjects'>
<table class='display-subjects-table' cols='5'>
<tbody id="topicArea">
</tbody>
</table>
</div>
<div id='pagination'>
<?php
if(isset($_GET['page'])) {
$page = $_GET['page'];
}
else {
$page = 1;
}
?>
</div>
Where is the wrong part? Thanks in advance.
displayAllTopics() needs to take the page number as a parameter, and then pass it in the data option.
function displayAllTopics(pageNum) {
$.ajax({
url: "requests.php",
type: "GET",
data: {
keyPagination: "displayAllTopics",
page: pageNum
},
dataType: "json",
success: function(response) {
$("#topicArea").append(response.response_message);
$("#pagination").append(response.pagination);
}
});
}
So I currently have graphs with have static data from JQ, I'm attempting to get the data from a DB using PHP. I've began the logic but struggling to move forward, Any ideas would be appreciated.. So far the graph outputs blank, only works when I use static data.
Used 0 in the output array as a test
PHP<?php
$userID = $_SESSION["userid"];
$days = array();
$query = "SELECT timeSpent
FROM gymTime
WHERE userid = '$userID'";
$result = mysqli_query($conn, $query);
$i=0;
while($row = $result->fetch_assoc()) {
$days[$i] = $row["timeSpent"];
$i++;
}
?
JQ <script>
// in php you simply need to create the two arrays and teh functionality will work
// monthly set to minutes
var myTimeMon = ;
var myMonths = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
// weekly data in mins
var myTimeWeek = [<?php echo $days[0]; ?>];
var myDays= ["Mon","Tue","Wed","Thur","Fri","Sat","Sun"];
// default values to be displayed when the page loads
var myLabels = myDays;
var mydata = myTimeWeek;
// store value of radiobutton
var currentValue = "m"
var displayData=[];
function contoMins(){
// change the values of the array
for(i=0; i<mydata.length; i++){
mydata[i]=mydata[i]*60;
}
destroyChart();
}
// destroy the chart so that it does not load on top of itself
function destroyChart(){
window.myBar.destroy();
buildChart();
}
function buildChart(){
displayData = mydata;
var barChartData = {
labels : myLabels,
//barValueSpacing : 25,
//barStrokeWidth : 40,
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: displayData
}
]
}
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
barValueSpacing : 10,
});
}
buildChart();
//sendData();
</script>
DB Structure
http://prntscr.com/avdg9r
Webpage
http://prntscr.com/avdgeq
This always sets $i equal to 0.
while($row = $result->fetch_assoc()) {
$i=0;
$days[$i] = $row["timeSpent"];
$i++;
}
Move $i = 0 outside the while loop.
$i=0;
while($row = $result->fetch_assoc()) {
$days[$i] = $row["timeSpent"];
$i++;
}
Also, loop through your $days array.
var myTimeWeek = [<?php echo $days[0]; ?>];
will only display the first element in $days. You need to loop through the array.
var myTimeWeek = [
<?php
$i = 0;
$total = 0;
foreach ($days as $day)
{
if ($i > 0) echo ', ';
echo '"' . $day . '"';
$total = $total + $day;
$i++;
}
?>
]
Move your $i outside the loop-block, otherwise the $i will be 0 for each iteration
$i=0;
while($row = $result->fetch_assoc()) {
$days[$i] = $row["timeSpent"];
$i++;
}
Right Im using php to generate a json file
<?PHP
header('Content-type: application/json');
include 'includes/db/connect.php';
$category = $_REQUEST['catname'];
$sql = "SELECT `CDID`, `CDTitle`, `CDYear`, `pubID`, `CDPrice` FROM `tiptop_cd` INNER JOIN tiptop_category ON tiptop_cd.catID=tiptop_category.catID WHERE catDesc = '{$category}'";
$result = mysqli_query($con,$sql);
$row = mysqli_fetch_array($result);
while($row = mysqli_fetch_array($result)){
$returned[] = $row;
}
echo json_encode($returned);
?>
and I want my php page to use a select box that gets the categories from the database
<?php
$result = mysqli_query($con,"SELECT * FROM tiptop_category");
// echo "<table>";
echo "<select id=\"catname\">";
while($row = mysqli_fetch_array($result))
{
?>
<option name="<?=$row['catDesc']?>"><?=$row['catDesc']?></option>
<?php
}
echo "</select>";
?>
now im trying to use this ajax to output my data
<script type="text/javascript">
var catname = "Classical";
$.ajax({
type: "GET",
url: "./json.php?catname=" + catname,
accepts: "json",
dataType: "json",
success: function(data, status, jqXHR){
someFunction(data);
},
error: function(jqXHR, status, HTTPerror){
alert(HTTPerror);
}
});
function someFunction(data){
console.log(data);
var list = "<ul>";
for (var i = 0; i < data.length; i++) {
list += "<li><ul>";
for (var j = 0; j < data[i].length; j++) {
list += "<li>" + data[i][j] + "</li>";
};
list += "</ul></li>";
};
list += "</ul>";
$('#wrapper').append(list);
}
</script>
<div id="wrapper">
</div>
but all i get is an empty bulleted list
From how the db query looks like, you should get a list of associative arrays, which are encoded as objects:
var list = "<ul>";
for (var i = 0; i < data.length; i++) {
list += "<li><ul>";
for(var key in data[i])
if(data[i].hasOwnProperty(key))
list += "<li>" + data[i][key] + "</li>";
list += "</ul></li>";
};
list += "</ul>";
I am trying to get my graph to display dates on the x axis instead of the timestamps. I've searched and read other posts and still can't get it to budge. Here's my code:
for($i = 0; $i < 3; $i++)
{
$j = $i + 1;
$query = "SELECT UNIX_TIMESTAMP(date_added)*1000, COUNT(id)
FROM likes
WHERE date_added BETWEEN
DATE_SUB(CURDATE(), INTERVAL $j MONTH)
AND DATE_SUB(CURDATE(), INTERVAL $i MONTH)";
$result = mysql_query($query);
echo mysql_error();
$date = mysql_result($result, 0, 0);
$count = mysql_result($result, 0, 1);
$pair = array( (string)$date, (int)$count );
array_push($data_series1, $pair);
}
$.ajax({
url: 'graph_likes.php?get_data=month',
dataType: 'json',
success: function(returned) {
$.plot($('#container'),
[{
data: returned,
points:
{
show: true
},
lines:
{
show: true
},
color: '#00d6e2',
xaxis:
{
mode: 'time'
}
}]);
}
});
If you want flot to display your timestamps nicely formatted, you can try using the timestamp format option (called timeformat):
...
xaxis:
{
mode: 'time',
timeformat: "%y/%m/%d"
}
...
You find the option explained in this document: http://people.iola.dk/olau/flot/API.txt , look for the section called Time series data.