I have been trying json for transfer the information between php and javascript but doesn't work.
The query it's okay, i check it
The result of the query named "dia" is a date and "importe" is a number(float)
Any idea ?
Thanks for the help
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi" > </script>
</head>
<body>
<div id="line_chart" style="width: 100%; height: 500px"></div>
<?php
$consulta = "SELECT fecha as dia,SUM(importe) as importe FROM tfg.reservas WHERE fecha < '2019-05-31' AND fecha > '2019-05-20' GROUP BY DAY(fecha) asc;";
$json = array();
$resultado = mysqli_query($conexion,$consulta);
if ($resultado->num_rows > 0) {
while($fila = mysqli_fetch_array($resultado)) {
$dataRow = array(
$fila['dia'],
$fila['importe'],
);
array_push($json, $dataRow);
}
}
$jsonstring = json_encode($json);
?>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var data = google.visualization.arrayToDataTable([
[{type: 'date', label: 'dia'}, {type: 'number', label: 'importe'}]
]);
data.addRows(<?= $jsonstring ?>);
var options = {
title:'Sensors Data',
legend:{position:'bottom'},
chartArea:{width:'95%', height:'65%'}
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
</script>
</body>
</html>
Related
i am using google pie chart but in chart No data massage show but when i run query and
display it coming perfect but same query for data No data show, below the code
please help me,
while running same query it give perfect result but not in chart
<?php require 'connection.php'; ?>
<?php $query = 'SELECT SBU, count(RG) AS State from regionmaster group by SBU';
$result = mysqli_query($conn, $query);
while ($value = mysqli_fetch_assoc($result)) {
// echo $value['SBU'] . $value['State'];
echo "['".$value['SBU']."',".$value['State']."],";
}
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pic Chart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
<?php
while ($Chart = mysqli_fetch_assoc($result)) {
echo "['".$Chart['SBU']."',".$Chart['State']."],";
}
?>
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
I have creating one admin panel and i want to show column chart and pie chart. I do some part of code and my pie chart working but colum chart does not showing any result or not a error.
My code below :-
<?php
$serverName = "localhost";
$connectionInfo = array( "Database"=>"TripBrip", "UID"=>"", "PWD"=>"");
$conn = sqlsrv_connect( $serverName, $connectionInfo);
?>
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['date_of_journey', 'Booking'],
<?php
$query = "SELECT count(booking_id) AS count, date_of_journey FROM tbl_booking GROUP BY date_of_journey ORDER BY date_of_journey";
$exec = sqlsrv_query($con,$query);
while($row = sqlsrv_fetch_array($exec)){
echo "['".$row['date_of_journey']."',".$row['count']."],";
}
?>
]);
var options = {
title: 'Date wise booking'
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
chart.draw(data, options);
}
</script>
</head>
<body>
<h3>Column Chart</h3>
<div id="columnchart" style="width: 900px; height: 500px;"></div>
</body>
</html>
any one can help me how can i do for solving this issue
I am in a situation where I have to download a HTML page into PDF now. I know JSPDF is the best solution for this and I have implemented the following code but its not working...
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>Invoice</title>
<link rel="stylesheet" type="text/css" href="/jspdf/examples/css/smoothness/jquery-ui-1.8.17.custom.css">
<link rel="stylesheet" type="text/css" href="/jspdf/examples/css/smoothness/css/main.css">
<script type="text/javascript" src="/jspdf/examples/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/jspdf/examples/js/jquery/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="jspdf/dist/jspdf.debug.js"></script>
<script type="text/javascript" src="/jspdf/examples/js/basic.js"></script>
<script type="text/javascript">
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#cmd').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170,
'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
</script>
</script>
</head>
<body id="target">
<div id="content">
<h3>H3 tag</h3>
<p>a Para</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>
</body>
</html>
Please help me with this situation...
The following is an example of how to implement the jspdf.js library in order to create PDF pages out of the current website.
The JS libraries needed can be downloaded here:
Please contact me or write down your comment if you find any bugs.
<script type="text/javascript" src='jspdf.min.js'></script>
<script type="text/javascript" src='html2canvas.js'></script>
<script type="text/javascript">
function genPDF()
{
html2canvas(document.body, {
onrendered : function(canvas)
{
try
{
var canvas1 = document.createElement('canvas');
canvas1.width = canvas.width; canvas1.height = canvas.height;
var context1 = canvas1.getContext('2d');
context1.drawImage(canvas, 0,0);
options = {orientation: "0", unit: "mm",format: "a4" };
var doc = new jsPDF(options,'p', 'pt', 'a4');
var number_needed_pages = canvas.height / 900;
if(number_needed_pages < 1) number_needed_pages = 1;
for(var x=0; x < number_needed_pages ; x++)
{
var canvas2 = document.createElement('canvas');
canvas2.width = 794; canvas2.height = 900;
var context2 = canvas2.getContext('2d');
context2.drawImage(canvas1, 0 , 0 + 900*x , canvas1.width, canvas2.height, 50, 0, canvas.width, canvas2.height);
doc.addImage(canvas2.toDataURL('image/png'), 'JPEG', '', '', '');
doc.addPage();
}
doc.save("output_file.pdf");
} catch(e){alert(e);}
}
});
}
I have been trying to make a graph plot with flot, and have ran into a problem.I Think the problem is with the way m using the php variable with flot Aside from that the graph isn't showing so I must have done something wrong. Below is the graph code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="./flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="./flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="./flot/jquery.flot.categories.js"></script>
</head>
<body>
<?php
//CONNECTING TO THE SERVER
$servername = "XXX";
$username = "YYY";
$password = "ZZZ";
conn = new mysqli($servername, $username, $password);
$sql = "SELECT NAME, AGE FROM pro_db";
$result = $conn->query($sql);
$wt=array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
//storing the values in the array
$wt[]=$row;//is this the right way
}
} else {
echo "0 results";
}
?>
<div id="placeholder" style="width:600px;height:300px;"></div>
<script type="text/javascript">
$(function () {
//accessing the array
var data = <?php echo $wt; ?>;
$.plot($("#placeholder"), [data], {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center" }
},
xaxis: {
mode: "categories",
tickLength: 0
}
});
});
</script>
</body>
</html>``
Here's completely working example i made. If something doesn't work - there's some error with data. Try var_dump how your $wt array looks like in the end;
$data = [
['Andrew', 31],
['Helen', 29],
['Dasha', 24],
['Denis', 23]
];
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="canvas" style="width: 600px; height: 400px;"></div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/flot/jquery.flot.js"></script>
<script src="bower_components/flot/jquery.flot.categories.js"></script>
<script>
var data = <?php echo json_encode($data) ?>;
$("#canvas").plot([data], {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center"
}
},
xaxis: {
mode: "categories",
tickLength: 0
}
});
</script>
</body>
</html>
I use the code below to get data from a database. No issues here.....
$query = "SELECT * FROM takenlijst";
$from = 0;
$to = 999;
$query .= " LIMIT ".$from.",".$to;
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$taken[] = array(
'taaknummer' => $row['taaknummer'],
'naam' => $row['naam'],
'taak' => $row['taak'],
'prioriteit' => $row['prioriteit'],
'datum' => $row['datum']
);
}
echo json_encode($taken);
However, when i use the code below i get no data. What am i doing wrong?
<html lang="en">
<head>
<link rel="stylesheet" href="../../jquery/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../jquery/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../jquery/scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'taaknummer', type: 'string'},
{ name: 'naam', type: 'string'},
{ name: 'taak', type: 'string'},
{ name: 'prioriteit', type: 'string'},
{ name: 'datum', type: 'string'}
],
url: 'http://www.site.com/management/takenlijstdata.php',
cache: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
source: dataAdapter,
columns: [
{ text: 'Taaknummer', datafield: 'taaknummer', width: 250},
{ text: 'Naam', datafield: 'naam', width: 150 },
{ text: 'Taak', datafield: 'taak', width: 180 },
{ text: 'Prioriteit', datafield: 'prioriteit', width: 200 },
{ text: 'Datum', datafield: 'datum', width: 120 }
]
});
});
</script>
</head>
<body class='default'>
<div id="jqxgrid"></div>
</body>
</html>
The echo displays the data correctly. Even when i output the data to a txt file it can be read but not when i try to read it from this code.