I' m using jspdf with vue. I want the text to come under that table after adding a table, but I get the error doc.autotable.previous is undefined.
exportPdf(){
var doc = new jsPDF('l', 'pt');
doc.setFontSize(20);
doc.text(170, 20, 'Ürün Teslim Belgesi',{
halign: 'center',
valign: 'middle'
});
var vm = this;
var columns = [
{title: "Ürün", dataKey: 'product'},
{title: 'Tip', dataKey: 'type'},
{title: 'Adet', dataKey: 'piece'},
{title: 'Tarih', dataKey: 'date'}
];
doc.autoTable(
columns, vm.products,{
margin: {left: 35},
headStyles: {halign: 'center', valign: 'middle'},
theme: 'grid',
tableWidth: 'auto',
fontSize: 8,
overflow: 'linebreak',
});
doc.setProperties({
title: 'xxx',
subject: 'yyy',
author: 'ttt',
keywords: 'qqq',
creator: 'www'
});
doc.text("example text example text example text example text.", 14, doc.autoTable.previous.finalY + 10);
doc.save('test.pdf');
},
Thank you very much if you can help, have a nice day.
Seems strange to me - tried your code and I got settings.styles is undefined error instead the one you describing. It seems you mixing options from Styling options and Other options
Following code works just fine (had to replace data - jspdf 1.5.3, jspdf-autotable 3.2.11):
var doc = new jsPDF("l", "pt");
doc.setFontSize(20);
doc.text(170, 20, "Ürün Teslim Belgesi", {
halign: "center",
valign: "middle"
});
var products = [
{ product: "Retro", type: "Shoes", piece: 1, date: "1.1.2020" }
];
var columns = [
{ title: "Ürün", dataKey: "product" },
{ title: "Tip", dataKey: "type" },
{ title: "Adet", dataKey: "piece" },
{ title: "Tarih", dataKey: "date" }
];
doc.autoTable(columns, products, {
theme: "grid",
styles: {
fontSize: 8,
overflow: "linebreak"
},
headStyles: { halign: "center", valign: "middle" },
tableWidth: "auto",
margin: { left: 35 }
});
doc.setProperties({
title: "xxx",
subject: "yyy",
author: "ttt",
keywords: "qqq",
creator: "www"
});
doc.text(
"example text example text example text example text.",
14,
doc.autoTable.previous.finalY + 10
);
doc.save("test.pdf");
Related
I have to show the variable timeline chart's bar length,
is their any way to achieve this ?
series.timeline.marker.height / width is the options you are looking for.
It can be set at series scope, in order to get variable height.
Highcharts.chart('container', {
chart: {
type: 'timeline',
},
series: [{
data: [{
date: 'Some date',
label: 'Event label',
marker: {height: 50, width: 10},
description: 'Description of this event.',
dataLabels: {
color: '#78f',
borderColor: 'blue',
backgroundColor: '#444',
connectorWidth: 2,
connectorColor: 'blue',
style: {
textOutline: 0
},
}
}, {
date: 'Next date',
label: 'Next event label',
description: 'Description of second event.',
marker: {height: 75, width: 20},
}, {
date: 'Another date',
label: 'Last event label',
description: 'Description of third event.',
marker: {height: 100, width: 30}
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/timeline.js"></script>
<div id="container"></div>
Can someone help me to wrap y-axis title please (I am using styled mode)?
Here's an example: https://jsfiddle.net/sabira/6s3wa0m7/
Highcharts.chart('container', {
chart: {
styledMode: true,
type: 'column'
},
title: {
text: 'test'
},
yAxis: [{
className: 'highcharts-color-0',
title: {
text: 'very long title text here very long title text here very long title text here very long title text here '
}
}],
plotOptions: {
column: {
borderRadius: 5
}
},
series: [{
data: [1, 3, 2, 4]
}, {
data: [324, 124, 547, 221],
}]
});
Use the below CSS styles:
.highcharts-axis-title {
width: 200px;
white-space: normal !important;
}
Live demo: https://jsfiddle.net/BlackLabel/gqud6c0L/
I need a little help related to autotable.I am using JSPDF library and I want to generate 3 columns(Fatal,Non-Fatal and Property Damage) horizontally under the column 2017.I tried to find through internet but could not find any solution.
doc.setFontStyle('normal');
doc.setFontSize(12);
var columns = [
{ title: "Month", dataKey: "Month" },
{ title: "2017", dataKey: "2017" },
];
var vehicle=[{'Month':'January','2017':'Fatal'},{'Month':'February'},{'Month':'March'},{'Month':'April'},{'Month':'May'},{'Month':'June'},{'Month':'July'},{'Month':'August'},{'Month':'September'},{'Month':'October'},{'Month':'November'},{'Month':'December'}];
doc.autoTable(columns,vehicle, {
startY:55,
margin: {horizontal: 5},
bodyStyles: {valign: 'middle'},
styles: {overflow: 'linebreak'},
theme: 'grid',
columnStyles: {
text: {
columnWidth: 'wrap'
},
Month: {
columnWidth: '10',
fontStyle: 'bold',
textColor: 40 ,
valign: 'left'
},
2017: {
columnWidth: '20',
fontStyle: 'bold',
textColor: 40 ,
valign: 'left'
}
});
doc.save('Accident.pdf');
}
I am trying to reload the grid on click event. Here is my code for grid
var source = {
datatype: "json",
datafields: [
{ name: 'sno' },
{ name: 'bid' },
{ name: 'city' },
{ name: 'booking_date' },
{ name: 'amount' },
{ name: 'customer_contact' },
{ name: 'user_name' },
{ name: 'trip_type' },
{ name: 'comments' },
{ name: 'action' },
],
cache: false,
url: 'order_details.php?flag=2&start_date='+start_date_param+'&end_date='+end_date_param,
data: {
pagesize:50
},
root: 'Rows',
//sortcolumn: 'area',
// sortdirection: 'asc',
beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
}
};
dataadapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 1100,
source: dataadapter,
theme: 'classic',
autoheight: true,
pageable: true,
pagesize:50,
enablebrowserselection: true,
selectionmode: 'singlecell',
//sortable:true,
virtualmode: true,
rendergridrows: function (params) {
return params.data;
},
columns:
[
{ text: 'No', datafield: 'sno', width: 30 },
{ text: 'Booking Id', datafield: 'bid', width: 90, align: 'center',cellsAlign: 'center' },
{ text: 'City', datafield: 'city', width: 170 },
{ text: 'Car Book Date', datafield: 'booking_date', width: 100, align: 'center',cellsAlign: 'center' },
{ text: 'Amount', datafield: 'amount', width: 60, align: 'right',cellsAlign: 'right' },
{ text: 'Customer Contact', datafield: 'customer_contact', width: 205 },
{ text: 'User Name', datafield: 'user_name', width: 125 },
{ text: 'Trip Type', datafield: 'trip_type', width: 160},
{ text: 'Comments', datafield: 'comments', width: 80, align: 'center',cellsAlign: 'center'},
{ text: 'Action', datafield: 'action', width: 80, align: 'center',cellsAlign: 'center'},
]
});
// event handling on select of date range and click on button show
$("#btn_show").on("click", function (e) {
e.preventDefault();
var start_date_param = $("#start_date").val();
var end_date_param = $("#end_date").val();
source.url = 'order_details.php?flag=2&start_date='+start_date_param+'&end_date='+end_date_param;
dataadapter.dataBind();
});
On click of button "btn_show", I could get the data from page 0, but if I am on page 4, then after click event, my grid pager is remains on page 4 only and data is display for page 0.If I click on next page, then it jumps from page 0 to next page i.e page 5.
Why jqxgrid is not resetting its recordedstartindex and recordedendindex values on dataadapter.dataBind() call after click event?
Do I need to use any other function to reload my complete grid??
I think that the following:
$("#jqxgrid").jqxGrid('gotopage', 0);
should replace
dataadapter.dataBind();
In your code.
When I place this in my base application html.haml file:
= javascript_include_tag :defaults, 'jquery-1.3.2.min', 'highcharts'
<!--[if IE]>
javascript_include_tag 'excanvas.compiled'
<![endif]-->
%script{:type => "text/javascript"}
$(document).ready(function() {
= yield :javascripts
});
I get a textual description of a graph that is supposed to appear visually:
$(document).ready(function() { var chart = new Highcharts.Chart({ chart: { margin: [50, 30, 0, 30], renderTo: 'pie-chart-container' }, credits: { text: 'Data provided by NETMARKETSHARE', enabled: true, href: 'http://marketshare.hitslink.com/browser … px?qprid=3' }, legend: { style: {left: 'auto', right: '50px', top: '75px', bottom: 'auto' }, layout: 'vertical' }, plotOptions: { pie: {dataLabels: {color: 'white', enabled: true, formatter: function() { if (this.y > 15) return this.point.name; }, style: {font: '10pt Helvetica', textShadow: '#000000 1px 1px 2px' } } } }, series: [ {type: 'pie', data: [{y: 3.57, identifier: 'applewebkit', name: 'Safari'}, {y: 22.32, sliced: true, identifier: 'gecko', name: 'Firefox'}, {y: 56.9, identifier: 'msie', name: 'Internet Explorer'}, {y: 17.21, name: 'Other'}]} ], subtitle: { text: 'January 2010' }, title: { text: 'Browser Market Share' }, tooltip: { formatter: function() { return "" + this.point.name + ": " + this.y + " %"; } }, xAxis: { title: {text: '' } }, yAxis: { title: {text: '' } } }); });
I recommend contacting the project owner by filing an issue on the github project.
You need to place that script in the layout or some other erb file.
The application.js is not being parsed so you can't use inline ruby in it (or any other file residing in the public directory.