Below is the static url I am using in tcpdf:
http://maps.google.com/maps/api/staticmap?zoom=14&size=800x800&maptype=roadmap&markers=color:green|label:A|52.3693824,4.8871682&markers=color:green|label:B|52.369369,4.901235&markers=color:red|label:C|52.3585252,4.8808168&path=color:66ACF2|weight:3|enc:uks~Haoy\iDOCp#Ap#pGVV?#o#B_Db#MXSCsDrBaDN[S_#S_#?Mn#}I?uDIu##aBBw##o#LoCHmA?s#AoDI_CA_AJ{FH{BD]h#kBT_AJSLKRIZMFAEm#m#oDG[U[wBeCuBcCIMI]GgACWG?I?GCQUGGG#SUGAK#}#tCiBhGs#dC[z#QTQJe#L{ALoHb#M?K~#WrAEHNNt#l#jB|AvFrFhAbAfAfAnBjB~#|#LDJBRj#tAxE^rAt#jCPn#VAn#BZLf#T#F~Dn#RLVLtCn#nD|#ZADCvBj#zBj#AV_BbUbB|A~BrBjAdAz#d#RPx#pAm#bBo#|A[z#?H?B?#M\vAnItGr_#HTx#i#z#g#zByAHIHEAWo#wD_AmF&sensor=false
I think due to the encryted path, tcpdf is not parsing this and showing wrong path in google maps.
Can someone help me regarding this? Thanks in advance!!
Use writeHTMLCell() & <img> html tag:
$html = <<<EOD
<img border="0" src="//maps.google.com/maps/api/staticmap?zoom=14&size=800x800&maptype=roadmap&markers=color:green|label:A|52.3693824,4.8871682&markers=color:green|label:B|52.369369,4.901235&markers=color:red|label:C|52.3585252,4.8808168&path=color:66ACF2|weight:3|enc:uks~Haoy\iDOCp#Ap#pGVV?#o#B_Db#MXSCsDrBaDN[S_#S_#?Mn#}I?uDIu##aBBw##o#LoCHmA?s#AoDI_CA_AJ{FH{BD]h#kBT_AJSLKRIZMFAEm#m#oDG[U[wBeCuBcCIMI]GgACWG?I?GCQUGGG#SUGAK#}#tCiBhGs#dC[z#QTQJe#L{ALoHb#M?K~#WrAEHNNt#l#jB|AvFrFhAbAfAfAnBjB~#|#LDJBRj#tAxE^rAt#jCPn#VAn#BZLf#T#F~Dn#RLVLtCn#nD|#ZADCvBj#zBj#AV_BbUbB|A~BrBjAdAz#d#RPx#pAm#bBo#|A[z#?H?B?#M\vAnItGr_#HTx#i#z#g#zByAHIHEAWo#wD_AmF&sensor=false" alt="Greenwich, England">
EOD;
$pdf->writeHTMLCell('', '', 0, 0, $html, 0, 1, false, true, 'L', false);
Result:
Update:
You also can use Image():
$pdf->Image(
'http://maps.google.com/maps/api/staticmap?zoom=14&size=800x800&maptype=roadmap&markers=color:green|label:A|52.3693824,4.8871682&markers=color:green|label:B|52.369369,4.901235&markers=color:red|label:C|52.3585252,4.8808168&path=color:66ACF2|weight:3|enc:uks~Haoy\iDOCp#Ap#pGVV?#o#B_Db#MXSCsDrBaDN[S_#S_#?Mn#}I?uDIu##aBBw##o#LoCHmA?s#AoDI_CA_AJ{FH{BD]h#kBT_AJSLKRIZMFAEm#m#oDG[U[wBeCuBcCIMI]GgACWG?I?GCQUGGG#SUGAK#}#tCiBhGs#dC[z#QTQJe#L{ALoHb#M?K~#WrAEHNNt#l#jB|AvFrFhAbAfAfAnBjB~#|#LDJBRj#tAxE^rAt#jCPn#VAn#BZLf#T#F~Dn#RLVLtCn#nD|#ZADCvBj#zBj#AV_BbUbB|A~BrBjAdAz#d#RPx#pAm#bBo#|A[z#?H?B?#M\vAnItGr_#HTx#i#z#g#zByAHIHEAWo#wD_AmF&sensor=false',
0.5, 0.5, 20, 20, '', '', '', false, 300
);
It show path line correctly:
Related
I have an html table defined based on dynamic data. The table contains a thead, tfoot and tbody. The tfoot is mapped to specific values within my json. However, when using JSPDF Autotable and exporting to PDF the footer is not rendered. I have seen information but no code examples of the showfoot option and have tried it after the doc.autotable, and even after the style options but to no avail. The footer is not exported. I'm sure it super simple - but I can't seem to figure it out. Note: I do not want JSDPF Autotable to 'create' a footer - it is defined, it is part of my table - I simply want it rendered on the pdf. I found an old stackoverflow from 2016 where this was mentioned - Simon B. commented it would be added - the topic was closed - but I couldn't find a code example anywhere.
Here is my jspdf autotable code where I have tried to 'show my footer' - but to no avail. Any assistance appreciated.
<script>
function generate() {
//Creation of PDF document
let doc = new jsPDF('l', 'pt');
const totalPagesExp = '{total_pages_count_string}';
var elem = document.getElementById('${pm.info.requestId}');
var data = doc.autoTableHtmlToJson(elem);
doc.autoTable(data.columns, data.rows, {
headStyles: {
cellWidth: 'wrap',
fontSize: 10,
lineWidth: 0,
lineColor: [0, 0, 0],
textColor: [0, 0, 0],
fillColor: [255,255,255]
},
bodyStyles: {
cellWidth: 'wrap',
fontSize: 8,
lineWidth: 0,
lineColor: [0, 0, 0],
textColor: [0, 0, 0],
fillColor: [255,255,255]
},
footStyles: {
cellWidth: 'wrap',
fontSize: 10,
lineWidth: 0,
lineColor: [0, 0, 0],
textColor: [0, 0, 0],
fillColor: [211,211,211]
},
//Formatting of pages
didDrawPage: function (data) {
//Summa logo on top of the page
doc.addImage('${pm.variables.get("summa")}', 'PNG', 20, 20, 145, 42.63);
//Font sizes of report information
doc.setFontSize(8);
//Report information: portfolio name, knowledge time and report time
doc.text(35, 75, '${pm.variables.get("portfolioName")}');
doc.text(35, 85, '${pm.variables.get("reportTime")}');
doc.text(35, 95, '${pm.variables.get("knowledgeTime")}');
//Page numbers
var str = "Page " + doc.internal.getNumberOfPages()
if (typeof doc.putTotalPages === 'function') {
str = str + " of " + totalPagesExp;
};
//Page size
var pageSize = doc.internal.pageSize;
var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
doc.text('Theme "plain"', 14, 16);
},
margin: {
top: 100
},
});
//Number of pages
if (typeof doc.putTotalPages === 'function') {
doc.putTotalPages(totalPagesExp);
},
//--------------------------------------------------------------------------------------------------START
//Change name of report if desired
doc.save('${pm.info.requestName}${pm.variables.get("reportTime")}.pdf');
//--------------------------------------------------------------------------------------------------END
}
Not sure if you already managed to export footer totals to the jspdf. I got it to working, with a small adjustment.
Replace the var elem = document.getElementById('${pm.info.requestId}'); to var elem = document.getElementById('NAME');
And replace the doc.autoTable(data.columns, data.rows, { to doc.autoTable({html: '#NAME',
I am trying to use the plotting library JSXGraph from Dart using dart js but I have problems.
This is working javascript code
var board = JXG.JSXGraph.initBoard(
'box',
{
boundingbox: [-10, 10, 2, -1],
axis: true,
keepaspectratio: false,
showNavigation: false
}
);
var graph = board.create(
'functiongraph',
[function(x){ return 3*x*x + 5*x + 1;}, -10, 10],
{strokeColor: '#ffff00'}
);
You can try it here on jsFiddle.
I want to do basically the identicall thing but from dart. This is what I have come up with so far:
JsObject jsxGraph = context['JXG']['JSXGraph'];
var board = jsxGraph.callMethod('initBoard', [
'box',
new JsObject.jsify({
'boundingbox': [-10, 10, 2, -1],
'axis': true,
'keepaspectratio': false,
'showNavigation': false
})
]);
var graph = board.callMethod('create', [
'functiongraph',
[(x){return 3*x*x + 5*x + 1;}, -10, 10],
new JsObject.jsify({'strokeColor': '#ffff00'})
]);
I get the plot area and axes but I can't get the actual plot line. Instead, there is an error on the console: Uncaught TypeError: this.Y is not a function.
Could someone, please, point me to what I could be doing wrong? I suspect it is something about the callback function but I really don't know what.
There's a jsify missing in your code:
JsObject jsxGraph = context['JXG']['JSXGraph'];
var board = jsxGraph.callMethod('initBoard', [
'box',
new JsObject.jsify({
'boundingbox': [-10, 10, 2, -1],
'axis': true,
'keepaspectratio': false,
'showNavigation': false
})
]);
var graph = board.callMethod('create', [
'functiongraph',
new JsObject.jsify([(x){return 3*x*x + 5*x + 1;}, -10, 10]},
new JsObject.jsify({'strokeColor': '#ffff00'})
]);
i'm using TCPDF to generate my pdf. I have no idea for reset starting page number. I mean, i will generate report that starting page numer 3 (not 1) in footer, but the second page increment by 2 (3,5,6,7 etc)
Here is my code :
$_SESSION["hal"] = $_POST["hal"];
$_SESSION["f"] = $_POST["f"];
class MYPDF extends TCPDF {
// Page footer
public function Footer() {
// Position at 25 mm from bottom
$this->SetY(-25);
// Set font
$this->SetFont('helvetica', 'b', 8);
// Page number
$this->Cell(0, 15,$_SESSION["f"]." ". $_SESSION["hal"], 'T', false, 'R', 0, '', 0, false, 'T', 'M');
$_SESSION["hal"]++;
}
}
Can someone help please..
Done..
$_SESSION["hal"] = $_POST["hal"];
$_SESSION["f"] = $_POST["f"];
class MYPDF extends TCPDF {
// Page footer
public function Footer() {
// Position at 25 mm from bottom
$this->SetY(-25);
// Set font
$this->SetFont('helvetica', 'b', 8);
// Page number
//i add var to store current page
$halaman = $this->PageNo();
$this->Cell(0, 15,$_SESSION["f"]." ". ($halaman+$_SESSION["hal"]), 'T', false, 'R', 0, '', 0, false, 'T', 'M');
}
}
a other way is to use Page Groups. Better with no need of SESSION.
To start the Group:
$this->startPageGroup();
and to print:
$w_page = isset($this->l['w_page']) ? $this->l['w_page'].' ' : '';
if (empty($this->pagegroups)) {
$pagenumtxt = $w_page.$this->getAliasNumPage().' / '.$this->getAliasNbPages();
} else {
$pagenumtxt = $w_page.$this->getPageNumGroupAlias().' / '.$this->getPageGroupAlias();
$this->Cell(0, 0, $pagenumtxt, 'T', 0, 'L');
My chart is very simple and is something like this:
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['week', 'rate'],
['1', 0.156],
['2', 0.232],
['3', 0.446],
['4', 0.832],
['5', 0.702],
['6', 0.773],
['7', 0.842],
['8', 0.413],
['9', 0.278],
['10', 0.323],
['11', 0.312],
['12', 0.309],
['13', 0.134],
['14', 0.137]
]);
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 1}}
);
}
But I have NO IDEA how to format the data column to show as a pecentage in the tooltip. Can you guys give a hand?
Use a NumberFormatter:
var formatter = new google.visualization.NumberFormat({pattern: '#%'});
formatter.format(data, 1); // format column 1
You may also want to format the y-axis:
vAxis: {
maxValue: 1,
format: '#%'
}
Add a column like this
{role: 'tooltip'}
I had the same problem and fixed it.
See for yourself!
I've gotten examples of this working in highcharts, but I am having trouble getting this to work in highstocks. I am trying to get my tooltip to show some extra information about the point provided in the series but it seems like the values I put in my series data hash aren't being saved properly. The X and Y fields are being set ok since I can see the graph coming out correctly, but my other "fruit" and "name" fields are reporting null in the tooltip.
Here is an example of my series data:
{
name: 'food1',
fruit: 'apple',
x: Date.UTC(2010, 0, 1),
y: 216.4
},
{
name: 'food2',
fruit: 'banana',
x: Date.UTC(2010, 0, 4),
y: 116.4
}
And here is my loop inside my tooltip formatter:
$.each(this.points, function(i, point) {
s += '<br/>Name is = '+ point.name;
s += '<br/>y is = '+point.y;
s += '<br/>Fruit is = ' +point.fruit;
});
The tooltip will show:
Name is: undefined
y is: 216.4
Fruit is: undefined
And I want it to show:
Name is: food1
y is: 216.4
Fruit is: apple
Here is the jsfiddle link:
http://jsfiddle.net/hYtUj/5/
you are accessing the attributes in a wrong way
it dhould be like this
$.each(this.points, function(i, point) {
s += '<br/>Name is = '+ point.point.name;
s += '<br/>y is = '+point.y;
s += '<br/>Fruit is = ' +point.point.fruit;
});
updated your fiddle here
I hope this will help you