Unable to display google chart - javascript

I have a table in a database from which I am retrieving the marks of one particular student for all 5 subjects. For Google Charts I am reading the subject name from the csv from which I have already populated the Database Table. I am passing subject name and marks as JSON object to ajax success method. But I am unable to get the chart on screen.
I have already tried debugging the code. But It is still not working.
<?php
$conn = mysqli_connect("localhost","root","","marks");
$query = "select name from tblMarks";
$result = mysqli_query($conn, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Graphs</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<center>
<div class="panel panel-default panel-heading">
<h5>Choices</h5>
<select name="name" class="from-control" id="name">
<option value="">Select Name</option>
<?php
foreach ($result as $row) {
echo "<option value=".$row['name'].">".$row['name']."</option>";
}
?>
</select>
<select name="subject" class="from-control" id="subject">
<option value="">Select Subject</option>
<?php
$handle = fopen("./upload/1.csv","r");
$fields = fgetcsv($handle);
foreach ($fields as $row){
if($row != 'Fields'){
$row = substr($row,0,strpos($row, "~"));
echo "<option value=".$row.">".$row."</option>";
}
}
?>
</select>
</div>
</center>
<div class="panel-body">
<div id=chart-area" style="width:1000px;height:620px;"></div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current',{packages:['corechart','bar']});
google.charts.setOnLoadCallback();
function loadnamewisedata(name, title){
var temp_tile = title;
$.ajax({
url:"fetch.php",
method:"POST",
data:{name:name},
dataType:"JSON",
success:function(data){
drawNameWiseChart(data, temp_tile);
}
});
}
function drawNameWiseChart(chart_data, chart_main_title){
var jsonData = chart_data;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Subject');
data.addColumn('number', 'Marks');
$.each(jsonData, function(i, jsonData){
var subject = jsonData.subject;
var marks = parseFloat($.trim(jsonData.marks));
data.addRows([[subject, marks]])
});
var options={
title:chart_main_title,
hAxis:{
title:"Subject"
},
vAxis:{
title: "Marks"
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_area'));
chart.draw(data, options);
}
</script>
<script type="text/javascript">
$("#name").change(function(){
document.getElementById("subject").selectedIndex = 0;
var name = $(this).val();
if(name != ""){
loadnamewisedata(name, name);
}
});
$("#subject").change(function(){
document.getElementById("name").selectedIndex = 0;
});
</script>
fetch.php
<?php
$output = [];
include('dbc.php');
if(isset($_POST["name"])){
$query = "select * from tblMarks where name='".$_POST["name"]."'";
$result = mysqli_query($query);
$handle = fopen("./upload/1.csv","r");
$fields = fgetcsv($handle);
$subArr = [];
$i = 0;
foreach ($fields as $row){
if($row != 'Fields'){
$row = substr($row,0,strpos($row, "~"));
$subArr[$i] = $row;
$i = $i + 1;
}
}
$j = 0;
while($row = mysqli_fetch_array($result)){
while($j < count(subArr)){
$output[] = array(
'subject' => subArr[$j],
'marks' => floatval($row[subArr[$j]])
);
}
}
echo $output;
}
?>
dbc.php
<?php
$conn = mysqli_connect("localhost","root","","marks");
?>
I expect the output of this to be a Bar Chart, but I am not seeing anything.

Related

How can I change my code so that the user can only like the post once?

I want to make a like system and this is what I have so far. I can't figure out how to make it only increment once can anyone help me out? I feel like i might have to use session variables but im not sure.
index.php
<?php
$con = mysqli_connect('localhost', 'root', '','phplikes');
$query = "SELECT * FROM meme_vote ORDER BY vote DESC";
$res = mysqli_query($con, $query);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meme Voting System</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<?php while($row = mysqli_fetch_assoc($res)){ $location = $row['video_location'];?>
<div class="col-md-4">
<div class="post">
<h4 class="post-title"><?php echo $row['title']?></h4>
<div id="postdesign">
<video src="<?php echo $row['video_location'] ?>" width="100%" height="240" controls></video>
</div>
<a href="javascript:void(0)" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-thumbs-up " onclick="like_update('<?php echo $row['id']?>')">Vote
(<span id="like_loop_<?php echo $row['id']?>"><?php echo $row['vote']?></span>)
</span>
</a>
</div>
</div>
<?php }?>
</div>
</div>
<script>
function like_update(id){
var cur_count = jQuery('#like_loop_'+id).html();
cur_count++
jQuery('#like_loop_'+id).html(cur_count);
jQuery.ajax({
url:'update_count.php',
type:'post',
data:'type=like&id='+id,
success:function(result){
}
})
}
</script>
</body>
</html>
update_count.php
<?php
$con = mysqli_connect('localhost', 'root', '', 'phplikes');
$type = $_POST['type'];
$id = $_POST['id'];
if($type=='like'){
$sql = "update meme_vote set vote=vote+1 where id=$id";
$sql2 = "update meme_vote set fake_vote=fake_vote+1 where id=$id";
}
$res = mysqli_query($con, $sql);
$res2 = mysqli_query($con, $sql2);
?>
Also just to let you know, I already have session variables established ie. $_SESSION['user_id'] and `$_SESSION['username']
Since you already have a user_id, I'll assume you have a users table.
You could create a new table with meme_vote_id and user_id columns, and a unique index using both fields:
CREATE TABLE `meme_voters` (
`meme_vote_id` INT UNSIGNED NOT NULL,
`user_id` INT UNSIGNED NOT NULL,
UNIQUE INDEX `unique_voter` (`meme_vote_id`, `user_id`)
);
Then when someone votes:
$sql = mysqli_query($con,"SELECT COUNT(*) AS count FROM meme_voters WHERE meme_vote_id={$id} AND user_id={$_SESSION['user_id']}" );
$rs = mysqli_fetch_object($sql);
if ( $rs->count == 0 ) {
$sql = "INSERT INTO meme_voters (meme_vote_id, user_id) VALUES ({$id}, {$_SESSION['user_id']})";
mysqli_query($con, $sql);
$sql = "UPDATE meme_vote SET vote=vote+1 WHERE id=$id";
$res = mysqli_query($con, $sql);
}

Cannot implement autocomplete from mysql

I am struggling to implement autocomplete on my page as no results are showing from the database.
Below is the code on the index.php page
<head> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script>
$(function() {
$("#tags").autocomplete({
source: "autocomplete.php"
});
});
</script> </head> <body> <label for="tags">Select Student</label> <div><input id="tags" type="text" name="tags" /> </div></body>
The autocomplete.php file looks like this...
<?php include("session.php");
session_start();
$description_arr = array();
$stmt = "select case
When (login.name is null or login.name='') and (login.surname is null or login.surname='')
then login.username
Else login.name + ' ' + login.surname
End as user_profile
from my_students
inner join login
on stud_id = login.id
where my_students.id = '$login_id'";
$ses_stmt = mysqli_query($conn, $stmt);
while($row = mysqli_fetch_array($ses_stmt)){
array_push($description_arr,$row['user_profile']);}
echo json_encode($description_arr);
?>

codeigniter and jquery autocomplete

i have some problem with the basicly function of jquery autocomplete in codeigniter but i think that the error isnt jquery
the code:
the view:
<link rel="stylesheet" href="<?php echo base_url();>application/libraries/jquery-ui.css" type="text/css">
<script type="text/javascript" src="<?php echo base_url(); ?>application/libraries/jquery-1.10.2.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>application/libraries/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#client_name').autocomplete({
source: "<?php echo site_url('site/check_in_client/?'); ?>"
});
});
</script>
<input type="text" name="client_name" id="client_name" placeholder="nome"/>
the model:
function check_in_client($name) {
$this->db->like('name',$name, 'both');
$query = $this->db->get('client');
return $query->result();
}
the controller:
function check_in_client() {
$this->load->library('javascript');
$this->load->view('check_in_client');
if(isset($_GET['term'])) {
$result= $this->membership_model->check_in_client($_GET['term']);
if(count($result) > 0) {
foreach($result as $pr)
$arr_result[] = $pr->name;
echo json_encode($arr_result);
}
}
}
the code load a view with a blank text boxe
where is the problem?
thanks a lot by
In your view file:
<link rel="stylesheet"href="//code.jquery.com/ui/1.11.4/themes/smoothness/jqueryui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript">
$(document).ready(function() {
$('#client_name').autocomplete({
source: "<?php echo site_url('site/check_in_client/?'); ?>"
});
});
</script>
<input type="text" name="client_name" id="client_name" placeholder="nome"/>
In your Model:
function check_in_client($name) {
$this->db->select('name',false);
$this->db->like('name',$name, 'both');
$query = $this->db->get('client');
if ($query->num_rows > 0) {
foreach ($query->result() as $row) {
$datas[] = $row->name;
}
echo json_encode($datas);
} else {
$datas[] = 'Oops! No suggestions found. Try a different search.';
echo json_encode($datas);
}
}
In your Controller:
function check_in_client() {
$this->load->library('javascript');
$this->load->view('check_in_client');
if(isset($_GET['term'])) {
$result= $this->membership_model->check_in_client($_GET['term']);
}
}

div dissapear after including php

When I want to include my search in index.php, slider.php just disappears.
The file search.php is combination of php and javascript and slider.php is pure javascript.
This is my index.php:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mhgallery.js"></script>
<script type="text/javascript" src="js/initgallery.js"></script>
<script type="text/javascript" src="js/search.js"></script>
</head>
<body>
<?php include 'includes/search_form.php';?>
<?php include 'includes/slider.php';?>
</body>
</html>
This is search.php:
<?php
include 'init.php';
$output="";
if (isset($_POST['search'])){
$searchq = $_POST['search'];
$searchq = preg_replace ("#[^0-9a-z]#i","",$searchq);
$query = mysql_query("SELECT * FROM `users` WHERE `username` LIKE '%$searchq%'") or die("error");
$count = mysql_num_rows($query);
if ($count == 0){
$output = 'No resault';
}else{
while($row = mysql_fetch_array($query)){
$username = $row['username'];
$output .= '<div>'.$username.'</div>';
}
}
}
?>
This is search_form.php:
<?php include 'php_script/search.php';?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="search.js" type="text/javascript"></script>
<div id="search_box">
<form action = "index.php" method="POST">
<input id="box" type="text" name="search" placehoalder="Search" onkeydown="searchq();"/>
<input id="srch" type="submit" value=">>"/>
</form>
<div id="output">
<?php echo ($output);?>
</div>
</div>
This is slider.php:
<div id="mhgallery">
<style type="text/css"> #mhgallery img { display:none; } </style>
<img src="slideshow_slike/batman.jpg" title="batman" />
<img src="slideshow_slike/hobbit.jpg" title="hobbit" />
<img src="slideshow_slike/interstellar.jpg" title="interstellar" />
<img src="slideshow_slike/sw7.jpg" title="sw7" />
</div>
This is initgallery.js:
$(document).ready(function(){$("#mhgallery").mhgallery({width:950,height:400,scaleMode:'scaleToFill',firstSlide:0,randomPlay:false,autoPlay:true,backgroundMode:'transparent',backgroundColor:'#333333',showShadow:true,showThumbShadow:true,showPause:false,showBorder:true,borderSize:6,borderColor:'#FFFFFF',showFullscreen:false,fullscreenBackgroundColor:'#333333',fullscreenThumbArrowStyle:'white',interval:3000,effectSpeed:500,showCaption:false,textCSS:'.title {font-size:12px;font-weight:bold;font-family:Arial;color:#ffffff;line-height:200%;} .alt {font-size:12px;font-family:Arial;color:#ffffff;}',captionPosition:'bottom',captionBarColor:'#333333',captionBarOpacity:0.8,captionBarPadding:8,captionAlign:'center',showNavArrows:true,autoHideNavArrows:true,arrowStyle:'white',showThumbs:false,thumbSize:40,thumbGap:8,thumbBottom:-60,thumbArrowStyle:'black',thumbOpacity:0.8,thumbBorderWidth:1,thumbBorderColor:'#FFFFFF',thumbBorderActiveColor:'#FFFFFF',effect:'fade,slideLeft,slideRight,slideTop,slideBottom',jsFolder:'js'});});
This is search.js:
function searchq(){
var searchTxt = $("input [name='search']").val();
$.post("search.php", {searchVal: searchTxt}, function (output){
$("#output").html(output);
});
}

JQuery Autocomplete from Database

I need to to do autocomplete suggestion for my website and the data should be retrieved from database. I want to use JQuery autocomplete. here is my code but it doesn't work!
This is my php file with the name of gethint.php:
<?php
require_once ('config.php');
$q=$_REQUEST["q"];
$sql="SELECT `fname` FROM `Property` WHERE fname LIKE '%$q%'";
$result = mysql_query($sql);
$json=array();
while($row = mysql_fetch_array($result)) {
$json[]=array(
'value'=> $row['fname'],
'label'=> $row['fname']
);
}
echo json_encode($json);
?>
and then this is my html file :
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function(){
$("#hint").autocomplete({
source:'gethint.php',
minLength:1
});
});
</script>
</head>
<body>
<form class="sansserif" action="view.php" method="post">
Name: <input type="text" id="hint" name="hint" >
<input type="submit" name="submit" value="View">
</form>
</html>
It took a lot of time but I couldn't find the problem. I was wondering if someone could help me.
Thanks.
<?php
require_once ('..\config.php');
$q=$_REQUEST["term"];
$sql="SELECT `fname` FROM `Property` WHERE fname LIKE '%$q%'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)) {
$json[]=array(
'value'=> $row['fname'],
'label'=> $row['fname']
);
}
echo json_encode($json);
?>
All I changed was the $_REQUEST["q"] to $_REQUEST["term"].
I did some changes, maybe you need to fix something but take a look to see if helps...
The php:
<?php
require_once ('config.php');
$q=$_REQUEST["q"];
$sql="SELECT `fname` FROM `Property` WHERE fname LIKE '%$q%'";
$result = mysql_query($sql);
$json=array();
while($row = mysql_fetch_array($result)) {
array_push($json, $row['fname']);
}
echo json_encode($json);
?>
The html+jquery:
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
</head>
<body>
<form class="sansserif" action="view.php" method="post">
Name: <input type="text" id="hint" name="hint" />
<input type="submit" name="submit" value="View">
</form>
<script type="text/javascript">
$(function() {
$( "#hint" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "gethint.php",
dataType: "jsonp",
data: {
q: request.term
},
success: function( data ) {
response( data );
}
});
},
});
});
</script>
</body>
</html>
Your PHP script should be accepting a term parameter, not q.

Categories

Resources