I'm using this php wkhtmltopdf library to generate pdf's. I'm not using the most recent version yet, but there doesn't seem to be any improvements to this problem.
Using a full page background-image, I run into the following problems:
Footer (and header) overlap pages (white background)
Cannot show pagination without header/footer (footer pagination won't work on pages)
Questions:
Is there a way to make the footer background transparent?
Is there a way to show pagination without header/footer? (page/pages format)
Screenshot:
PHP:
$pdf_options = array(
'binPath' => 'wkhtmltopdf-amd64',
'encoding' => 'UTF-8',
'dpi' => 96,
'margin-top' => '0mm',
'margin-right' => '0mm',
'margin-bottom' => '0mm',
'margin-left' => '0mm',
'footer-html' => $tmpDir.'/footer.html',
'header-spacing' => 0,
'footer-spacing' => -20,
'no-outline'
);
$page_options = array(
'disable-smart-shrinking'
);
$pdf = new WkHtmlToPdf($pdf_options);
$pdf->setPageOptions($page_options);
$pdf->addPage($tmpDir.'/body.html');
$renderPdf = $pdf->send();
Footer pagination:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
function pagination()
{
var vars = {};
var x = document.location.search.substring(1).split('&');
for (var i in x)
{
var z = x[i].split('=', 2);
vars[z[0]] = unescape(z[1]);
}
var x = ['frompage','topage','page','webpage','section','subsection','subsubsection'];
for (var i in x)
{
var y = document.getElementsByClassName(x[i]);
for (var j = 0; j < y.length; ++j)
{
y[j].textContent = vars[x[i]];
}
}
}
</script>
</head>
<body onload="pagination()">
<div id="pagination">
<span class="page"></span>/<span class="topage"></span>
</div>
</body>
</html>
Related
My code is like this:
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Questions', 'Result'],
['Correct Answers', <?= !empty($student_result[0]
['correct_ans_count']) ? $student_result[0]['correct_ans_count'] : '0'; ?>],
['Wrong Answers', <?= !empty($student_result[0]['wrong_ans_count']) ? $student_result[0]['wrong_ans_count'] : '0'; ?>],
['Skipped Questions', <?= !empty($student_result[0]['skiped_que_count']) ? $student_result[0]['skiped_que_count'] : '0'; ?>],
]);
var options = {
title: 'Test Result Piechart',
pieHole: 0.4,
chartArea: {
left: 100,
top: 70,
width: '100%',
height: '80%'
}
};
var chart_area = document.getElementById('piechart');
var chart = new google.visualization.PieChart(chart_area);
google.visualization.events.addListener(chart, 'ready', function()
{
chart_area.innerHTML = '<img src="' + chart.getImageURI() + '" class="img-responsive">';
});
chart.draw(data, options);
}
</script>
My html code is:
<div id="piechart" style="width: 100%; max-width:900px; height: 500px; ">
</div>
when I export to pdf using mpdf using codeigniter 3.x then it wont show graph in pdf.
My php(codeigniter) code is:
$data=array('name'=>'abc');
$html = $this->load->view('view_result',$data,true);
$this->load->library('M_pdf');
$mpdf = new mPDF();
$mpdf->AddPage(
'P', // L - landscape, P - portrait
'', '', '', '', 4, // margin_left
4, // margin right
4, // margin top
4, // margin bottom
4, // margin header
4); // margin footer
// die;
ob_clean();
$mpdf->allow_charset_conversion = true;
$mpdf->SetDisplayMode('fullpage');
$mpdf->WriteHTML($html);
$mpdf->Output('test.php', 'D');
In view it shows the graph correctly but in pdf there is no graph only blank space is there. In there any solution to show google chart in mpdf.
please help thank you.
My html to pdf conversion using wkhtmlpdf working fine without the <style> tag
but when I include the style tag it's not working that means not generating the pdf some one help me to solve this issue or let me know how to include my style.css in this format.
The way I handle this is as follows--
<?php
// create some HTML content
$html = '<!DOCTYPE html><html><head>
<style>
body {
margin: 0;
padding: 0;
}
...
</style></head><body>
<!-- Your body content -->
</body></html>';
$options = array(
"no-outline",
"binary" => "/usr/local/bin/wkhtmltopdf",
"margin-top" => ".25in",
"margin-right" => ".25in",
"margin-bottom" => ".55in",
"margin-left" => ".25in",
"zoom" => 1
);
$footer = '<!DOCTYPE html><html><head></head><body>...</body></html>';
$page_options = array('footer-html' => $footer);
$pdf->addPage($html, $page_options);
$pdf->saveAs('MY_PDF_NAME.pdf');
Hope this helps!
Best,
-Rush
I need some help,I'm using google charts api but when I try to get some parameters using POST and GET it doesn't draw the chart.
How can I improve the code to achieve the task?
Thanks in advance
sql query:
SELECT answers,COUNT(*) as count FROM surveys
where company_area ='human resources' and date >= '2014-11-01' and
date <= '2014-12-31'GROUP BY answers ORDER BY count DESC
phpmyadmin's result after run the query.
Answers count(*)
YES 23
NO 1
json output.
{"cols":
[ {"label":"Answers",
"type":"string"},{"label":"Answers","type":"number"}],
"rows":[
{"c":[{"v":"YES"},{"v":23}]},
{"c":[{"v":"NO"},{"v":1}]
}]}
get_json.php
<?php
$con = mysql_connect('localhost', 'root', '') or die('Error connecting to server');
mysql_select_db('sistema_encuestas', $con);
$q = $_GET['q'];
$a = $_GET['a'];
// write your SQL query here (you may use parameters from $_GET or $_POST if you need them)
$query = mysql_query("SELECT areas_evaluacion.nombre_area, AVG(encuestas.respuestas) AS Promedio
FROM encuestas
INNER JOIN areas_evaluacion on areas_evaluacion.id = encuestas.id_area_evaluacion
WHERE encuestas.fechaentrevista>='".$q."' and encuestas.fechaentrevista<='".$a."'
Group by encuestas.id_area_evaluacion
");
$table = array();
$table['cols'] = array(
array('label' => 'respuestas', 'type' => 'string'),
array('label' => 'Respuestas', 'type' => 'number')
);
$rows = array();
while($r = mysql_fetch_assoc($query)) {
$temp = array();
// each column needs to have data inserted via the $temp array
$temp[] = array('v' => $r['nombre_area']);
//$temp[] = array('v' => (int)$r['id_area_evaluacion']);
$temp[] = array('v' => (float)$r['Promedio']); // typecast all numbers to the appropriate type (int or float) as needed - otherwise they are input as strings
// insert the temp array into $rows
$rows[] = array('c' => $temp);
}
// populate the table with rows of data
$table['rows'] = $rows;
// encode the table as JSON
$jsonTable = json_encode($table);
// set up header; first two prevent IE from caching queries
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
// return the JSON data
echo $jsonTable;
?>
chart.php
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart(num,num2) {
var json = $.ajax({
url: 'get_json_areas_por_dia.php', // make this url point to the data file
dataType: 'json',
data: "q="+num ,"a="+num2,
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(json);
var options = {
title: 'Estadísticas por Áreas Por dia',
is3D: 'true',
width: 800,
height: 600
};
// Instantiate and draw our chart, passing in some options.
//do not forget to check ur div ID
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<form>
<input type="date" name="date1" onchange="drawChart(this.value)">
<input type="date" name="date2" onchange="drawChart(this.value)">
<select name="users" onchange="drawChart(this.value)">
</form>
<div id="chart_div"></div>
</body>
</html>
I fixed it by adding the missing ' in the json url
PHP
echo ' {"cols":
[ {"label":"Answers",
"type":"string"},{"label":"Answers","type":"number"}],
"rows":[
{"c":[{"v":"YES"},{"v":23}]},
{"c":[{"v":"NO"},{"v":1}]
}]}';
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var json = $.ajax({
url: 'get_json.php', // make this url point to the data file
dataType: 'json',
async: false,
type: 'GET'
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(json);
var options = {
title: 'My Weekly Plan',
is3D: 'true',
width: 800,
height: 600
};
// Instantiate and draw our chart, passing in some options.
//do not forget to check ur div ID
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
setInterval(drawChart, 500 );
}
</script>
<div id="chart_div"></div>
</body>
</html>
This is the my code i am using for column chart before the new release of Google Api and it is working fine. Now my chart is not displaying. i have checked the new release changes but i found noting relevant. the first problem appears with the data type in array, float data type is not legal and if i replaced it with some other data type then chart still not displayed. if i change the float to string then error will appear that string data type will not be used on X-axis. I have plotted time on X-axis and Distance on Y-axis. If any one knows how to change the code according to new release of Google Api please share your code or some information.
$host=""; // Host name
$username=""; // Mysql username
$password=""; // Mysql password
$db_name="mysql"; // Database name
$tbl_name="gprs"; // Table name
// Connect to server and select database.
$con=mysql_connect("$host", "$username")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");
$data = mysql_query("select SUM(Distance) as Distance, CAST( Time AS date) as Time from gprs where DeviceId=25 and Time between '2013-08-08' and '2013-09-31' group by CAST(Time AS date) order by CAST( Time AS date)")
or die(mysql_error());
$table = array();
$table['cols'] = array(
array('label' => 'TIME', 'type' => 'string'),
array('label' => 'Distance', 'type' => 'float')
);
$rows = array();
while ($nt = mysql_fetch_assoc($data))
{
$temp = array();
$temp[] = array('v' => (string)$nt['TIME']);
$temp[] = array('v' =>(float) $nt['Distance']);
$rows[]['c'] = $temp;
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable(<?=$jsonTable?>);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 300px;"></div>
</body>
</html>
I have solved the above problem. Replace the above array with this
array('label' => 'TIME', 'type' => 'string'),
array('label' => 'fuel', 'type' => 'number')
and this $temp[] = array('v' => $nt['TIME']);
$temp[] = array('v' => $nt['fuel']);
and don't use the Packages: columnchart now it is replaced by corechart in new Api release
I am trying to create google chart using google api which works fine for this:
<?php
echo "hi";
$mysqli =mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: ".mysqli_connect_error();
}
$result = $mysqli->query('SELECT * FROM new_view');
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'ind_type', 'type' => 'string'),
array('label' => 'Index_val', 'type' => 'number')
);
/* Extract the information from $result */
foreach($result as $r) {
$temp = array();
// The following line will be used to slice the Pie chart
$temp[] = array('v' => (string) $r['ind_type']);
// Values of the each slice
$temp[] = array('v' => (int) $r['Index_val']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
// convert data into JSON format
$jsonTable = json_encode($table);
//echo $jsonTable;
?>
<html>
<head>
<!--Load the Ajax API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
title: 'Index analysis',
is3D: 'true',
width: 800,
height: 600
};
// Instantiate and draw our chart, passing in some options.
// Do not forget to check your div ID
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--this is the div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
But Now I tried with taking html part in another file and database part in another like this:
ajax_form_temp.php
<html>
<head>
<!--Load the Ajax API-->
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<meta content="utf-8" http-equiv="encoding" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonTable = $.ajax({
url:"ajax_graph_temp.php",
dataType:"json",
async:true
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonTable);
var options = {
title: 'Index analysis',
is3D: 'true',
width: 800,
height: 600
};
// Instantiate and draw our chart, passing in some options.
// Do not forget to check your div ID
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--this is the div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
and ajax_graph_temp.php
<?php
$mysqli =mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: ".mysqli_connect_error();
}
$result = $mysqli->query('SELECT * FROM new_view');
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'ind_type', 'type' => 'string'),
array('label' => 'Index_val', 'type' => 'number')
);
/* Extract the information from $result */
foreach($result as $r) {
$temp = array();
// The following line will be used to slice the Pie chart
$temp[] = array('v' => (string) $r['ind_type']);
// Values of the each slice
$temp[] = array('v' => (int) $r['Index_val']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
// convert data into JSON format
$jsonTable = json_encode($table);
echo $jsonTable;
?>
Code is same. Just in 2nd methods fetch table data using json.
But at line var data = new google.visualization.DataTable(jsonTable); jsonTable could not fetch column, though it exist.
And in browser: Table has no column error comes! Column are alread declared $table['cols'] = array(
array('label' => 'ind_type', 'type' => 'string'),
array('label' => 'Index_val', 'type' => 'number')
Where is the problem?
This does not answer your question, but here is a way how you can do it.
First of all restore the working version by checking it out again from version control.
Then do little edits to the wroking code where you check that - after each edit - the code still works.
In these little edits you move parts of the code first into function definitions and then - if still working - those function definitions into a new file that you include.
After each little edit do a commit so that you granulary can step back or diff to review in which lines of code you exactly introduced the error.
By creating function and moving them out in part you can easily do what you'd like to do. Doing all at once can introduce many errors and is not helpful to review quickly.
Hope this help.
See as well:
PHP file cannot enter some part of code